/* TLMC Cinematic Chapters — front-end structure.
   All sizes, fonts and colours come from CSS variables written by the plugin
   (Chapters → settings), so this file never needs editing. */

.tlmcC-track {
	position: relative;
	width: 100%;
	font-family: var(--tlmcC-body, Georgia, serif);
	background: var(--tlmcC-ground, #08070a);
}
.tlmcC-track *,
.tlmcC-track *::before,
.tlmcC-track *::after { box-sizing: border-box; }

.tlmcC-stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: var(--tlmcC-ground, #08070a);
}

/* ---- artwork layers ---- */
.tlmcC-layer {
	position: absolute;
	background-size: cover;
	background-repeat: no-repeat;
	will-change: transform, opacity;
	pointer-events: none;
}
.tlmcC-l1 { inset: -6%; z-index: 1; background-position: center 34%; }
.tlmcC-l2 {
	inset: -10% -20%; z-index: 2; background-position: 70% 60%;
	-webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000 20%, transparent 78%);
	        mask-image: radial-gradient(60% 70% at 50% 50%, #000 20%, transparent 78%);
}
.tlmcC-l3 { inset: -25%; z-index: 3; mix-blend-mode: soft-light; opacity: .12; }
.tlmcC-l4 {
	inset: 30% -30% -30%; z-index: 4; background-position: 40% 88%;
	filter: blur(7px) brightness(.5); opacity: .72;
}

.tlmcC-s1 {
	position: absolute; inset: 0; z-index: 5; pointer-events: none;
	background: radial-gradient(120% 90% at 74% 42%, rgba(8,7,10,.18) 0%, rgba(8,7,10,.72) 52%, rgba(6,5,8,.94) 100%);
}
.tlmcC-s2 {
	position: absolute; inset: 0; z-index: 6; pointer-events: none;
	background: linear-gradient(90deg, rgba(6,5,8,.86) 0%, rgba(6,5,8,.5) 46%, rgba(6,5,8,.2) 100%);
	transition: opacity .8s ease;
}

/* ---- chapters ---- */
/* Base state is READABLE: the first chapter shows and its words are visible,
   so a failed or blocked script leaves real content rather than blank space.
   The script adds .tlmcC-js, which hands control over to the scrubbed states. */
.tlmcC-ch {
	position: absolute; inset: 0; z-index: 10;
	display: flex; align-items: center;
	padding: 0 var(--tlmcC-pad, 120px);
	opacity: 0; pointer-events: none;
	transition: opacity .5s ease, transform .5s ease;
}
.tlmcC-ch.tlmcC-first { opacity: 1; visibility: visible; pointer-events: auto; }
.tlmcC-track:not(.tlmcC-js) .tlmcC-w { opacity: 1; filter: none; }
.tlmcC-track:not(.tlmcC-js) { min-height: 100vh; }
.tlmcC-track.tlmcC-active .tlmcC-ch.tlmcC-first { opacity: 0; pointer-events: none; }
.tlmcC-ch.tlmcC-on,
.tlmcC-track.tlmcC-active .tlmcC-ch.tlmcC-on { opacity: 1; pointer-events: auto; }
.tlmcC-in {
	width: 100%; max-width: var(--tlmcC-maxw, 1240px);
	margin: 0 auto; display: flex;
}
.tlmcC-ch:nth-of-type(even) .tlmcC-in { justify-content: flex-end; }
.tlmcC-col {
	width: min(var(--tlmcC-colw, 720px), 100%);
	display: flex; flex-direction: column;
	gap: var(--tlmcC-gap, 22px);
	min-width: 0;
}

.tlmcC-track .tlmcC-eyebrow {
	display: block;
	font-family: var(--tlmcC-display, Georgia, serif);
	font-size: var(--tlmcC-eyebrow-size, 12px);
	letter-spacing: var(--tlmcC-track-eyebrow, .4em);
	text-transform: uppercase;
	color: var(--tlmcC-accent, #c8a86b);
	line-height: 1.4;
	margin: 0;
}
.tlmcC-track .tlmcC-title {
	margin: 0; padding: 0;
	font-family: var(--tlmcC-display, Georgia, serif);
	font-weight: var(--tlmcC-title-weight, 300);
	font-size: var(--tlmcC-title-size, 68px);
	line-height: var(--tlmcC-lh-title, 1.05);
	letter-spacing: var(--tlmcC-track-title, -.012em);
	color: var(--tlmcC-title-color, #fbf6ec);
	text-wrap: pretty;
}
.tlmcC-track .tlmcC-body {
	margin: 0; padding: 0;
	font-family: var(--tlmcC-body, Georgia, serif);
	font-size: var(--tlmcC-body-size, 24px);
	line-height: var(--tlmcC-lh-body, 1.72);
	color: var(--tlmcC-body-color, rgba(244,238,228,.94));
	text-wrap: pretty;
}
.tlmcC-track .tlmcC-body a { color: var(--tlmcC-accent, #c8a86b); }

/* word-by-word reveal */
.tlmcC-w {
	display: inline-block;
	white-space: pre-wrap;
	opacity: 0;
	filter: blur(6px);
	transition: opacity .6s ease, filter .6s ease;
}
.tlmcC-w.tlmcC-on { opacity: 1; filter: blur(0); }

/* ---- furniture ---- */
.tlmcC-idx {
	position: absolute; left: clamp(10px, 2.6vw, 40px); top: 50%;
	transform: translateY(-50%); z-index: 20;
	display: flex; flex-direction: column; align-items: center; gap: 14px;
	pointer-events: none;
}
.tlmcC-idx b {
	font-family: var(--tlmcC-display, Georgia, serif);
	font-weight: 400; font-size: clamp(18px, 2.2vw, 30px);
	letter-spacing: .06em; color: var(--tlmcC-index, #dcbd82);
}
.tlmcC-idx i {
	width: 1px; height: clamp(48px, 12vh, 120px); font-style: normal;
	background: linear-gradient(180deg, rgba(220,189,130,.6), rgba(220,189,130,.05));
}
.tlmcC-idx u {
	text-decoration: none;
	font-family: var(--tlmcC-display, Georgia, serif);
	font-size: 12px; letter-spacing: .12em; color: rgba(240,232,218,.34);
}
.tlmcC-hint {
	position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
	z-index: 20; pointer-events: none;
	font-family: var(--tlmcC-display, Georgia, serif);
	font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
	color: rgba(240,232,218,.4); transition: opacity .6s ease;
}

/* ---- breakpoints ---- */
@media (max-width: 1024px) {
	.tlmcC-ch:nth-of-type(even) .tlmcC-in { justify-content: flex-start; }
}
@media (max-width: 767px) {
	.tlmcC-ch { padding-left: calc(var(--tlmcC-pad, 24px) + 32px); padding-right: var(--tlmcC-pad, 24px); }
	.tlmcC-idx { gap: 10px; }
	.tlmcC-hint { bottom: 18px; }
}

/* ---- no-JS and reduced motion: readable, unanimated ---- */
.tlmcC-track.tlmcC-static .tlmcC-stage { position: relative; height: auto; overflow: visible; }
.tlmcC-track.tlmcC-static .tlmcC-ch {
	position: relative; inset: auto; opacity: 1; pointer-events: auto;
	padding-top: 12vh; padding-bottom: 12vh;
}
.tlmcC-track.tlmcC-static .tlmcC-w { opacity: 1; filter: none; }
.tlmcC-track.tlmcC-static .tlmcC-layer,
.tlmcC-track.tlmcC-static .tlmcC-idx,
.tlmcC-track.tlmcC-static .tlmcC-hint { display: none; }

@media (prefers-reduced-motion: reduce) {
	.tlmcC-w { opacity: 1 !important; filter: none !important; }
	.tlmcC-ch { transition: none; }
}


/* 1.0.4 hard fallback: shortcode content remains visible even when a theme/builder overrides section defaults. */
.tlmcC-track { display:block !important; min-height:100vh; visibility:visible !important; opacity:1 !important; }
.tlmcC-track .tlmcC-stage { display:block !important; min-height:100vh; visibility:visible !important; opacity:1 !important; }
.tlmcC-track:not(.tlmcC-active) .tlmcC-ch.tlmcC-first { display:flex !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:none !important; }
.tlmcC-track:not(.tlmcC-active) .tlmcC-ch.tlmcC-first .tlmcC-col,
.tlmcC-track:not(.tlmcC-active) .tlmcC-ch.tlmcC-first .tlmcC-eyebrow,
.tlmcC-track:not(.tlmcC-active) .tlmcC-ch.tlmcC-first .tlmcC-title,
.tlmcC-track:not(.tlmcC-active) .tlmcC-ch.tlmcC-first .tlmcC-body { visibility:visible !important; opacity:1 !important; }
.tlmcC-track:not(.tlmcC-active) .tlmcC-ch.tlmcC-first .tlmcC-w { opacity:1 !important; filter:none !important; }

/* 1.0.5: prevent inactive full-screen chapters from ghosting over the active chapter. */
.tlmcC-track.tlmcC-active .tlmcC-ch:not(.tlmcC-on) {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}
.tlmcC-track.tlmcC-active .tlmcC-ch.tlmcC-on {
	visibility: visible !important;
}