/* ==========================================================================
   Cinematic trip story (trip-cinematic.php + assets/js/trip-cinematic.js)
   --------------------------------------------------------------------------
   --p (0 → 1) is set by the script on every [data-cine] block: a chapter's
   progress while its visual is pinned, or a section's progress through the
   viewport. Almost all motion below is expressed in terms of it, so the
   page animates exactly as fast as the reader scrolls -- in both
   directions, and identically on phones.
   ========================================================================== */

/* Site header height; trip-cinematic.js replaces this with the measured value
   (on the root, so every pinned stage sits flush under the sticky header). */
:root { --cine-header: 72px; }

.cine {
	--cine-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--cine-cream: #FDF4DD;
	--cine-sand: #F6E5BD;
	--cine-dusk: #0C1A38;
	--cine-dusk-2: #1B2A55;
	--cine-gold: #C8961E;

	/* Graphic palette (Greece: sunlit). Paris chapters override below. */
	--cine-line: #04366B;
	--cine-accent: #C8961E;
	--cine-fill: #FFF8E8;
	--cine-rock: #EBD5A3;
	--cine-water: #8EC3DD;
	--cine-ink: #04366B;
	--cine-ink-soft: #4A5B75;

	color: var(--cine-ink);
	overflow-x: clip;
	font-variant-numeric: lining-nums;
}
.cine .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.cine-eyebrow {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cine-gold);
	margin-bottom: 14px;
}
.cine-eyebrow--light { color: var(--color-accent); }

/* 1. Flythrough ------------------------------------------------------------ */
.cine-world__mount {
	/* Matches the dioramas' own cream background so stills sit seamlessly. */
	--sw-bg: #FDEBB8;
	--sw-ink: #04366B;
	--sw-ink-soft: #50607A;
	--sw-accent: #04366B;
	--sw-font-display: var(--cine-display);
	min-height: 100vh;
	/* The engine keeps ~1 viewport of trailing scroll after the last frame;
	   without this it shows the site's white page background there. */
	background: var(--sw-bg);
}
.cine-world__mount .sw-copy__title { font-weight: 600; font-size: clamp(2.4rem, 5vw, 4.2rem); }
.cine-world__mount .sw-copy__eyebrow { color: var(--cine-gold); }
/* #F7ECBC is the film's cream after video encoding, so the frame edge disappears. */
.cine-world__master { height: 100vh; height: 100svh; background: #F7ECBC; }
.cine-world__master .sw-m-video { object-fit: contain; }
.cine-world__master .sw-m-video-label { color: var(--color-primary); padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
.cine-world__master .sw-m-video-label__title {
	color: var(--color-primary);
	text-shadow: none;
	font-family: var(--cine-display);
	font-weight: 600;
	font-size: clamp(2.3rem, 11vw, 3.2rem);
}
.cine-world__static { display: grid; gap: 24px; padding: 24px; }
.cine-world__static img { width: 100%; border-radius: 16px; }

/* Journey rail ------------------------------------------------------------- */
.cine-rail {
	position: fixed;
	z-index: 150;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: fit-content;
	bottom: calc(18px + env(safe-area-inset-bottom));
	transform: translateY(8px);
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: calc(100vw - 32px);
	padding: 8px 16px;
	border-radius: 999px;
	background: color-mix(in srgb, #fff 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 6px 24px rgba(4, 30, 60, 0.12);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-primary);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.cine-rail.is-visible { opacity: 1; transform: none; }
.cine-rail__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(52ch, calc(100vw - 200px)); }
.cine-rail__track { position: relative; flex: 0 0 120px; height: 2px; background: color-mix(in srgb, var(--color-primary) 18%, transparent); border-radius: 2px; }
.cine-rail__fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--rail, 0)); background: var(--cine-gold); border-radius: 2px; }
.cine-rail__plane { position: absolute; top: 50%; left: calc(var(--rail, 0) * 100%); transform: translate(-50%, -52%) rotate(0deg); font-size: 0.9rem; color: var(--color-primary); }

/* 2. Intro --------------------------------------------------------------- */
.cine-intro {
	position: relative;
	padding: clamp(96px, 16vh, 180px) 24px clamp(72px, 12vh, 140px);
	background: var(--cine-cream);
	text-align: center;
}
.cine-intro__inner { max-width: 1040px; margin: 0 auto; }
.cine-intro__title {
	font-family: var(--cine-display);
	font-weight: 500;
	font-size: clamp(2rem, 4.6vw, 3.6rem);
	line-height: 1.15;
	color: var(--cine-ink);
	margin: 0 auto 56px;
	max-width: 22ch;
}
/* Word-by-word reveal as the section scrolls into view. */
.cine-word {
	display: inline-block;
	opacity: clamp(0.14, calc((var(--p, 0) * 2.4 - 0.35) * var(--n, 10) - var(--i, 0)), 1);
	transform: translateY(calc((1 - clamp(0, calc((var(--p, 0) * 2.4 - 0.35) * var(--n, 10) - var(--i, 0)), 1)) * 0.3em));
}
.cine-stats {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: 760px;
}
.cine-stats__n {
	display: block;
	font-family: var(--cine-display);
	font-weight: 600;
	font-size: clamp(3rem, 7vw, 5rem);
	line-height: 1;
	color: var(--color-primary);
}
.cine-stats__label { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cine-ink-soft); }

/* 3. Act cards ------------------------------------------------------------ */
.cine-act {
	position: relative;
	padding: clamp(80px, 14vh, 160px) 24px;
	background: var(--cine-cream);
	overflow: clip;
}
.cine-act--paris { background: var(--cine-dusk); color: #fff; }
.cine-act__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(24px, 5vw, 72px);
	align-items: center;
}
.cine-act__title {
	font-family: var(--cine-display);
	font-weight: 600;
	/* Sized (and balanced) to settle on two lines in the narrower left
	   column, not three -- the previous size ran long titles like "Athens
	   and the Peloponnese" onto an awkward third line with a lone word. */
	font-size: clamp(2.4rem, 5vw, 4.4rem);
	line-height: 1.05;
	text-wrap: balance;
	color: inherit;
	margin: 0 0 22px;
}
.cine-act--greece .cine-act__title { color: var(--color-primary); }
.cine-act__text { font-size: 1.12rem; line-height: 1.65; max-width: 44ch; color: var(--cine-ink-soft); }
.cine-act--paris .cine-act__text { color: rgba(255, 255, 255, 0.82); }
.cine-act__scene { perspective: 1400px; }

/* The dioramas tilt in 3D as they travel through the viewport. */
.cine-tilt {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 22px;
	transform-origin: 50% 60%;
	transform:
		perspective(1400px)
		rotateX(calc((0.5 - var(--p, 0.5)) * 9deg))
		rotateY(calc((var(--p, 0.5) - 0.5) * 7deg))
		scale(calc(0.95 + var(--p, 0.5) * 0.06));
	box-shadow: 0 40px 80px -30px rgba(40, 24, 0, 0.35);
	will-change: transform;
}
.cine-act--paris .cine-tilt,
.cine-day--paris .cine-tilt { box-shadow: 0 0 0 1px rgba(255, 209, 26, 0.25), 0 40px 100px -20px rgba(255, 190, 80, 0.35); }

/* 4. Day chapters ---------------------------------------------------------- */
.cine-day {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 80px);
	max-width: calc(var(--max-width) + 48px);
	margin: 0 auto;
	padding: 0 24px;
	min-height: 150vh;
}
.cine-day--greece { background: var(--cine-cream); box-shadow: 0 0 0 100vmax var(--cine-cream); clip-path: inset(-1px -100vmax); }
.cine-day--paris {
	--cine-line: #F4E9D0;
	--cine-accent: #FFD11A;
	--cine-fill: #1B2A55;
	--cine-rock: #2A3A69;
	--cine-water: #3D5F97;
	--cine-ink: #FFFFFF;
	--cine-ink-soft: rgba(255, 255, 255, 0.78);
	color: #fff;
	background: var(--cine-dusk);
	box-shadow: 0 0 0 100vmax var(--cine-dusk);
	clip-path: inset(-1px -100vmax);
}
/* Alternates the graphic left/right per chapter. Explicit column placement,
   not `order` -- `order` reshuffles auto-placement's own cursor (in
   order-modified document order) for every item in the grid, including the
   full-width ribbon row after it, and was dropping the visual into a grid
   row of its own below the ribbon on every other chapter. */
.cine-day__visual { grid-column: 1; }
.cine-day__body { grid-column: 2; }
.cine-day:nth-of-type(even) .cine-day__visual { grid-column: 2; }
.cine-day:nth-of-type(even) .cine-day__body { grid-column: 1; }

.cine-day__visual {
	position: sticky;
	align-self: start;
	top: calc(var(--cine-header) + 4vh);
	height: calc(80vh - var(--cine-header) * 0.3);
	height: calc(80svh - var(--cine-header) * 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.cine-day__visual-inner {
	position: relative;
	width: 100%;
	height: 100%;
	max-height: 620px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cine-day__scene { max-height: 100%; width: auto; max-width: 100%; }

.cine-day__body {
	position: relative;
	z-index: 1;
	padding: 16vh 0 30vh;
}
.cine-day__num {
	display: block;
	font-family: var(--cine-display);
	font-weight: 700;
	font-size: clamp(5rem, 11vw, 9rem);
	font-variant-numeric: lining-nums proportional-nums;
	line-height: 0.86;
	margin-bottom: 16px;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--cine-accent);
	/* Gold fills in left to right as the chapter progresses. */
	background: linear-gradient(90deg, var(--cine-accent) calc(var(--p, 0) * 120% - 10%), transparent calc(var(--p, 0) * 120%));
	-webkit-background-clip: text;
	background-clip: text;
}
.cine-day__eyebrow {
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cine-accent);
	margin: 0 0 10px;
}
.cine-day__title {
	font-family: var(--cine-display);
	font-weight: 600;
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	line-height: 1.05;
	color: inherit;
	margin: 0 0 20px;
}
.cine-day--greece .cine-day__title { color: var(--color-primary); }
.cine-day__tags { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cine-day__tags li {
	font-size: 0.78rem;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--cine-accent) 55%, transparent);
	color: var(--cine-ink);
}
.cine-day__text { font-size: 1.08rem; line-height: 1.75; color: var(--cine-ink-soft); max-width: 58ch; margin: 0 0 18px; }

.cine-stops { list-style: none; margin: 30px 0; padding: 0; display: grid; gap: 14px; counter-reset: stop; }
.cine-stops__item {
	position: relative;
	padding: 16px 18px 16px 58px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--cine-fill) 70%, transparent);
	border: 1px solid color-mix(in srgb, var(--cine-accent) 30%, transparent);
	counter-increment: stop;
}
.cine-stops__item::before {
	content: counter(stop);
	position: absolute;
	left: 16px;
	top: 16px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 0.85rem;
	background: var(--color-primary);
	color: var(--color-accent);
}
.cine-stops__name { font-family: var(--cine-display); font-weight: 700; font-size: 1.5rem; margin-right: 10px; }
.cine-stops__time { font-size: 0.8rem; font-weight: 700; color: var(--cine-accent); letter-spacing: 0.06em; }
.cine-stops__item p { margin: 4px 0 0; color: var(--cine-ink-soft); line-height: 1.6; }

.cine-callout {
	margin: 32px 0;
	padding: 22px 26px;
	border-left: 3px solid var(--cine-accent);
	background: color-mix(in srgb, var(--cine-accent) 10%, transparent);
	border-radius: 0 14px 14px 0;
}
.cine-callout strong { display: block; font-family: var(--cine-display); font-size: 1.6rem; margin-bottom: 6px; color: inherit; }
.cine-callout p { margin: 0; color: var(--cine-ink-soft); }

.cine-fact {
	position: relative;
	margin-top: 34px;
	padding: 22px 24px 20px;
	border-radius: 18px;
	background: var(--cine-fill);
	box-shadow: 0 18px 40px -24px rgba(4, 30, 60, 0.35);
	max-width: 58ch;
}
.cine-fact::before {
	content: "";
	position: absolute;
	left: 24px;
	top: 0;
	height: 3px;
	width: calc(var(--p, 0) * 60% + 10%);
	background: var(--cine-accent);
	border-radius: 0 0 3px 3px;
}
.cine-fact__label { display: block; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cine-accent); margin-bottom: 8px; }
.cine-fact p { margin: 0; line-height: 1.65; color: var(--cine-ink-soft); }

/* Place names drift sideways between chapters. A sibling of .cine-day (see
   trip-cinematic.php), so it can never sit on a chapter's pinned graphic. */
.cine-day__ribbon {
	position: relative;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.cine-day__ribbon-inner {
	max-width: calc(var(--max-width) + 48px);
	margin: 0 auto;
	padding: clamp(12px, 3vh, 32px) 24px;
}
.cine-day__ribbon span {
	display: inline-block;
	white-space: nowrap;
	font-family: var(--cine-display);
	font-style: italic;
	font-size: clamp(2.6rem, 7vw, 6rem);
	line-height: 1.15;
	color: color-mix(in srgb, var(--cine-accent) 30%, transparent);
	transform: translateX(calc((0.5 - var(--p, 0.5)) * 24vw));
}

/* 5. Graphics -------------------------------------------------------------- */
.cine-g { width: 100%; height: 100%; max-width: 620px; overflow: visible; font-family: var(--font-body); }
.cine-g text { fill: var(--cine-line); font-size: 17px; font-weight: 600; }
.cine-g .cine-g__big { font-family: var(--cine-display); font-size: 40px; font-weight: 700; fill: var(--cine-accent); }
.cine-g .cine-g__caption { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--cine-accent); }
.cine-g__plane { fill: var(--cine-line); }
.cine-g__route { fill: none; stroke: var(--cine-accent); stroke-width: 3; stroke-linecap: round; }

.cine-g__city circle { fill: var(--cine-fill); stroke: var(--cine-line); stroke-width: 2.5; transition: fill 0.4s, r 0.4s; }
.cine-g__city.is-on circle { fill: var(--cine-accent); }
.cine-g__icon { fill: none; stroke: var(--cine-line); stroke-width: 2; stroke-linecap: round; }

.cine-g__stars circle { fill: var(--cine-accent); opacity: 0.45; animation: cine-twinkle 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.45s); }
.cine-g__clouds path { fill: var(--cine-fill); stroke: var(--cine-line); stroke-width: 1.5; opacity: 0.9; animation: cine-drift var(--d, 40s) linear infinite; }
.cine-g__earth { fill: none; stroke: var(--cine-line); stroke-width: 2.5; }
.cine-g__lat { fill: none; stroke: var(--cine-line); stroke-width: 1.5; stroke-dasharray: 3 8; opacity: 0.45; }

.cine-g__rock { fill: var(--cine-rock); stroke: var(--cine-line); stroke-width: 2; stroke-linejoin: round; }
.cine-g__strata { fill: none; stroke: var(--cine-line); stroke-width: 1.2; opacity: 0.3; }
.cine-g__water { fill: var(--cine-water); }
.cine-g__ripple { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 10; opacity: 0.7; animation: cine-ripple 2.4s linear infinite; }
.cine-g__boat { transform: translate(250px, calc(440px - var(--p, 0) * 330px)) scale(calc(1 - var(--p, 0) * 0.78)); }
.cine-g__hull { fill: #fff; stroke: var(--cine-line); stroke-width: 1.8; }
.cine-g__cabin { fill: var(--cine-accent); stroke: var(--cine-line); stroke-width: 1.2; }
.cine-g__wake { fill: none; stroke: #fff; stroke-width: 2; opacity: 0.8; }
.cine-g__measure { opacity: 0; transition: opacity 0.5s; }
.cine-g__measure.is-on { opacity: 1; }
.cine-g__measure path { fill: none; stroke: var(--cine-line); stroke-width: 1.8; }

.cine-g__rays path { stroke: var(--cine-accent); stroke-width: 2; stroke-linecap: round; }
.cine-g__rays { opacity: 0; transform-origin: 250px 310px; transition: opacity 0.6s; }
.cine-g__rays.is-on { opacity: 0.35; animation: cine-spin 24s linear infinite; }
.cine-g__mountain { fill: var(--cine-rock); stroke: var(--cine-line); stroke-width: 2; stroke-linejoin: round; }
.cine-g__temple path { fill: none; stroke: var(--cine-line); stroke-width: 2; }
.cine-g__trail { fill: none; stroke: var(--cine-accent); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.cine-g__omphalos path:first-child { fill: var(--cine-fill); stroke: var(--cine-line); stroke-width: 2.5; transition: fill 0.5s; }
.cine-g__omphalos.is-on path:first-child { fill: var(--cine-accent); }
.cine-g__net { fill: none; stroke: var(--cine-line); stroke-width: 1.2; opacity: 0.6; }
.cine-g__eagle { fill: var(--cine-line); }
.cine-g__eagle--flip { transform: scaleX(-1); }
.cine-g__wing { transform-origin: 0 0; animation: cine-flap 0.5s ease-in-out infinite alternate; }
.cine-g__wing--r { animation-name: cine-flap-r; }
.cine-g__place { opacity: 0; transition: opacity 0.6s; }
.cine-g__place.is-on { opacity: 1; }

.cine-g__sea { fill: var(--cine-water); fill-opacity: 0.32; stroke: var(--cine-line); stroke-width: 2; }
.cine-g__waves path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: 0.75; animation: cine-bob 3s ease-in-out infinite alternate; }
.cine-g__waves path:nth-child(even) { animation-delay: -1.5s; }
.cine-g__port rect { fill: var(--cine-line); }
.cine-g__port path { stroke: var(--cine-line); stroke-width: 3; }
.cine-g__land { fill: var(--cine-rock); stroke: var(--cine-line); stroke-width: 2; transition: fill 0.5s; }
.cine-g__island rect { fill: #fff; stroke: var(--cine-line); stroke-width: 1; }
.cine-g__island .cine-g__name { font-family: var(--cine-display); font-size: 24px; font-weight: 700; }
.cine-g__island .cine-g__time { font-size: 14px; fill: var(--cine-accent); opacity: 0; transition: opacity 0.5s; }
.cine-g__island.is-on .cine-g__land { fill: #F7D98B; }
.cine-g__island.is-on .cine-g__time { opacity: 1; }
.cine-g__ship .cine-g__hull { fill: #fff; }
.cine-g__clock {
	position: absolute;
	top: 8%;
	right: 6%;
	font-family: var(--cine-display);
	font-weight: 700;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-variant-numeric: lining-nums proportional-nums;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--cine-fill);
	color: var(--cine-line);
	box-shadow: 0 10px 30px -16px rgba(4, 30, 60, 0.4);
}

.cine-g__chandelier path { stroke: var(--cine-accent); stroke-width: 1.5; }
.cine-g__chandelier circle { fill: var(--cine-accent); opacity: 0.75; animation: cine-twinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.5s); }
.cine-g__arch { opacity: clamp(0.16, calc(var(--p, 0) * 20 - var(--i, 0)), 1); }
.cine-g__frame { fill: color-mix(in srgb, var(--cine-accent) 18%, transparent); stroke: var(--cine-accent); stroke-width: 1.5; }
.cine-g__pane { fill: #DCE8F5; opacity: 0.85; }
.cine-g__shine { animation: cine-shine 3.6s ease-in-out infinite; }
.cine-g__floor { fill: none; stroke: var(--cine-line); stroke-width: 1; opacity: 0.25; }
.cine-g__counter {
	position: absolute;
	left: 50%;
	bottom: 4%;
	transform: translateX(-50%);
	text-align: center;
	line-height: 1;
	white-space: nowrap;
}
.cine-g__counter-n { display: block; font-family: var(--cine-display); font-weight: 700; font-size: clamp(3rem, 6vw, 4.6rem); color: var(--cine-accent); font-variant-numeric: lining-nums proportional-nums; }
.cine-g__counter-unit { font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8rem; }
.cine-g__counter-place { display: block; margin-top: 6px; font-size: 0.85rem; opacity: 0.75; }

.cine-g__treasure { opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.5s; }
.cine-g__treasure.is-on { opacity: 1; transform: none; }
.cine-g__treasure path { fill: var(--cine-accent); }

.cine-g__tower path { fill: none; stroke: var(--cine-line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cine-g__tower .cine-g__lattice { stroke-width: 1.5; opacity: 0.8; }
.cine-g__sparkle circle { fill: #fff; opacity: 0; }
.cine-g__sparkle.is-on circle { animation: cine-sparkle 1.1s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.13s); }
.cine-g__seine { fill: none; stroke: var(--cine-accent); stroke-width: 2; opacity: 0.6; stroke-dasharray: 8 6; animation: cine-ripple 3s linear infinite; }
.cine-g [data-cine-at]:not(g) { opacity: 0; transition: opacity 0.6s; }
.cine-g [data-cine-at].is-on { opacity: 1; }

.cine-g__ring { transform-origin: 250px 250px; transform: rotate(calc(var(--p, 0) * 150deg * var(--dir, 1))); }
.cine-g__ring circle { fill: none; opacity: 0.92; }
.cine-g__chandelier-lg circle { fill: var(--cine-accent); opacity: 0.2; }
.cine-g__chandelier-lg path { stroke: var(--cine-accent); stroke-width: 2; }
.cine-g__chandelier-lg .cine-g__core { opacity: 1; }
.cine-g .cine-g__on-color { fill: var(--cine-line); }

/* 6. Athens → Paris interlude ------------------------------------------ */
.cine-interlude { position: relative; height: 240vh; }
.cine-interlude__stage {
	position: sticky;
	top: var(--cine-header);
	height: calc(100vh - var(--cine-header));
	height: calc(100svh - var(--cine-header));
	overflow: hidden;
	display: grid;
	place-items: center;
	color: #fff;
	background: linear-gradient(180deg, #6FB3D9 0%, #F7D9A0 100%);
}
/* The sky turns from Aegean afternoon to Paris evening as the plane flies. */
.cine-interlude__sky {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--cine-dusk) 0%, var(--cine-dusk-2) 60%, #6B4A6E 100%);
	opacity: var(--p, 0);
}
.cine-interlude__svg { position: absolute; left: 0; right: 0; top: 10%; width: 100%; height: 60%; }
.cine-interlude__route { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: 0.85; }
.cine-interlude .cine-g__plane { fill: #fff; }
.cine-interlude__copy { position: relative; text-align: center; max-width: 760px; padding: 0 24px; margin-top: 18vh; }
.cine-interlude__copy h2 { font-family: var(--cine-display); font-weight: 600; font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.05; color: #fff; margin: 0 0 16px; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); }
.cine-interlude__copy p { font-size: 1.15rem; color: rgba(255, 255, 255, 0.9); margin: 0; }
.cine-interlude__coords {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5vh;
	display: flex;
	justify-content: space-between;
	padding: 0 clamp(20px, 5vw, 64px);
	font-family: var(--cine-display);
	font-size: clamp(1.1rem, 2vw, 1.6rem);
	font-variant-numeric: lining-nums proportional-nums;
	color: rgba(255, 255, 255, 0.9);
}
.cine-interlude__coords b { font-family: var(--font-heading); font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin: 0 10px; }

/* 7. Included -------------------------------------------------------------- */
.cine-included { background: var(--cine-dusk); color: #fff; padding: clamp(80px, 12vh, 140px) 24px; }
.cine-included__inner { max-width: var(--max-width); margin: 0 auto; }
.cine-included h2 { font-family: var(--cine-display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.8rem); color: #fff; margin: 0 0 40px; }
.cine-included__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cine-included__group { padding: 30px; border-radius: 22px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 209, 26, 0.18); }
.cine-included__group--0 { background: linear-gradient(160deg, rgba(111, 179, 217, 0.18), rgba(255, 255, 255, 0.03)); }
.cine-included__group h3 { font-family: var(--cine-display); font-size: 1.9rem; color: var(--color-accent); margin: 0 0 16px; }
.cine-included__group ul { list-style: none; margin: 0; padding: 0; }
.cine-included__group li { position: relative; padding: 9px 0 9px 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.88); line-height: 1.5; }
.cine-included__group li::before { content: "✓"; position: absolute; left: 0; top: 9px; color: var(--color-accent); font-weight: 700; }

/* 8. Closing + inquiry form ------------------------------------------------- */
.cine-closing {
	position: relative;
	overflow: clip;
	padding: clamp(96px, 14vh, 160px) 24px;
	background: radial-gradient(120% 90% at 50% 0%, var(--cine-dusk-2) 0%, var(--cine-dusk) 60%);
	color: #fff;
	text-align: center;
}
.cine-closing__scene {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(1100px, 130vw);
	margin: 0;
	translate: -50% -50%;
	opacity: 0.28;
	box-shadow: none;
	pointer-events: none;
	/* Feather the diorama's cream backdrop away so only the world glows. */
	-webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
	mix-blend-mode: screen;
}
.cine-closing__inner { position: relative; max-width: 720px; margin: 0 auto; }
.cine-closing h2 { font-family: var(--cine-display); font-weight: 600; font-size: clamp(2.6rem, 5.6vw, 4.4rem); line-height: 1.05; color: #fff; margin: 0 0 16px; }
.cine-closing__text { font-size: 1.15rem; color: rgba(255, 255, 255, 0.85); margin: 0 0 36px; }
.cine-form {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	padding: 10px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
	text-align: left;
}
.cine-form__field { margin: 0; }
.cine-form label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cine-form input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-ink);
	background: #fff;
}
.cine-form input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.cine-form__submit { grid-column: 1 / -1; height: 52px; }
.cine-closing__call { margin: 22px 0 6px; color: rgba(255, 255, 255, 0.85); }
.cine-closing__call a { color: var(--color-accent); font-weight: 700; text-decoration: none; }
.cine-closing__note { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); margin: 0; }

/* Keyframes ------------------------------------------------------------ */
@keyframes cine-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.9; } }
@keyframes cine-drift { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
@keyframes cine-ripple { to { stroke-dashoffset: -32; } }
@keyframes cine-spin { to { transform: rotate(360deg); } }
@keyframes cine-flap { from { transform: rotate(14deg); } to { transform: rotate(-16deg) scaleY(0.8); } }
@keyframes cine-flap-r { from { transform: rotate(-14deg); } to { transform: rotate(16deg) scaleY(0.8); } }
@keyframes cine-bob { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
@keyframes cine-shine { from { transform: translateX(0); } to { transform: translateX(680px); } }
@keyframes cine-sparkle { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* Tablet & phone ---------------------------------------------------------- */
@media (max-width: 900px) {
	.cine-act__inner { grid-template-columns: 1fr; }
	.cine-act__scene { order: -1; }

	/* Visual pinned as a band under the header; the text scrolls up beneath it. */
	.cine-day {
		grid-template-columns: 1fr;
		gap: 0;
		min-height: 0;
		padding: 0 20px;
	}
	.cine-day__visual,
	.cine-day:nth-of-type(even) .cine-day__visual,
	.cine-day__body,
	.cine-day:nth-of-type(even) .cine-day__body { grid-column: 1; }
	.cine-day__visual {
		top: var(--cine-header);
		height: 46vh;
		height: 46svh;
		margin: 0 -20px;
		padding: 12px 16px;
		background: var(--cine-cream);
		box-shadow: 0 16px 24px -18px rgba(40, 24, 0, 0.25);
	}
	.cine-day--paris .cine-day__visual { background: var(--cine-dusk); box-shadow: 0 16px 24px -18px rgba(0, 0, 0, 0.6); }
	.cine-day__visual-inner { max-height: none; }
	.cine-day__body { padding: 5vh 0 16vh; }
	.cine-day__num { font-size: clamp(4rem, 19vw, 6rem); }
	.cine-day__ribbon-inner { padding: 10px 20px; }
	.cine-day__ribbon span { font-size: clamp(2.2rem, 11vw, 3.4rem); transform: translateX(calc((0.5 - var(--p, 0.5)) * 40vw)); }
	.cine-g text { font-size: 22px; }
	.cine-g .cine-g__big { font-size: 46px; }
	.cine-g__island .cine-g__name { font-size: 28px; }
	.cine-g__island .cine-g__time { font-size: 18px; }
	.cine-g__clock { top: 4%; right: 4%; font-size: 1.2rem; }
	.cine-g__counter-n { font-size: 2.6rem; }

	.cine-stats { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
	.cine-included__grid { grid-template-columns: 1fr; }
	.cine-form { grid-template-columns: 1fr; }
	.cine-rail { bottom: calc(12px + env(safe-area-inset-bottom)); font-size: 0.74rem; }
	.cine-rail__label { max-width: calc(100vw - 150px); }
	.cine-rail__track { flex-basis: 64px; }
	.cine-interlude { height: 200vh; }
	.cine-interlude__svg { top: 14%; height: 40%; }
	.cine-interlude__copy { margin-top: 10vh; }
}

/* Reduced motion: final states, no ambient loops. ------------------------ */
@media (prefers-reduced-motion: reduce) {
	.cine-tilt { transform: none; }
	.cine-g *, .cine-g__wing, .cine-g__ring, .cine-g__boat { animation: none !important; transition: none !important; }
	.cine-day__ribbon span { transform: none; }
	.cine-word { opacity: 1; transform: none; }
	.cine-interlude { height: auto; }
	.cine-interlude__stage { position: relative; top: 0; height: 90vh; }
}

/* 7b. Prices (stories with a "pricing" block) ------------------------------- */
.cine-pricing { background: linear-gradient(180deg, var(--cine-cream) 0%, #fbf8ef 55%, #e9f2f7 100%); color: var(--cine-ink); padding: clamp(84px, 12vh, 140px) 24px; }
.cine-pricing__inner { max-width: 980px; margin: 0 auto; }
.cine-pricing__head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.cine-pricing h2 { font-family: var(--cine-display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.05; color: var(--cine-ink); margin: 6px 0 16px; }
.cine-pricing__intro { margin: 0; font-size: 1.08rem; line-height: 1.6; color: var(--cine-ink-soft); }
.cine-pricing__tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cine-pricing__tier { position: relative; padding: 34px 30px 28px; border-radius: 22px; background: #fff; border: 1px solid rgba(4, 54, 107, 0.12); box-shadow: 0 30px 60px -40px rgba(12, 26, 56, 0.45); text-align: center; }
.cine-pricing__tier.is-best { background: linear-gradient(165deg, #0f2347 0%, var(--cine-dusk) 100%); border-color: rgba(200, 150, 30, 0.55); color: #fff; }
.cine-pricing__badge { position: absolute; top: 0; left: 50%; translate: -50% -50%; padding: 7px 14px; border-radius: 999px; background: var(--cine-gold); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.cine-pricing__label { margin: 0; font-weight: 600; font-size: 1.05rem; line-height: 1.35; }
.cine-pricing__label span { display: block; font-weight: 400; opacity: 0.7; }
.cine-pricing__price { margin: 14px 0 4px; font-family: var(--cine-display); font-weight: 600; font-size: clamp(3rem, 6vw, 4.2rem); line-height: 1; color: var(--cine-gold); }
.cine-pricing__tier.is-best .cine-pricing__price { color: #ffd11a; }
.cine-pricing__basis { margin: 0; font-size: 0.88rem; opacity: 0.7; }
.cine-pricing__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid rgba(4, 54, 107, 0.1); }
.cine-pricing__row h3, .cine-pricing__row h4 { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--cine-ink); }
.cine-pricing__row p { margin: 4px 0 0; color: var(--cine-ink-soft); line-height: 1.45; }
.cine-pricing__amount { flex: none; margin: 0 !important; font-family: var(--cine-display); font-weight: 600; font-size: 2rem; color: var(--cine-ink) !important; }
.cine-pricing__row--supplement { margin-top: 22px; padding: 22px 28px; border: 1px solid rgba(200, 150, 30, 0.35); border-radius: 18px; background: rgba(255, 255, 255, 0.75); }
.cine-pricing__flights { margin-top: 22px; padding: 10px 28px 22px; border-radius: 22px; background: #fff; border: 1px solid rgba(4, 54, 107, 0.12); box-shadow: 0 30px 60px -44px rgba(12, 26, 56, 0.4); }
.cine-pricing__route { margin: 8px auto 0; max-width: 560px; }
.cine-pricing__route svg { display: block; width: 100%; height: auto; overflow: visible; }
.cine-pricing__arc { stroke: var(--cine-water); stroke-width: 2.5; stroke-dasharray: 7 7; }
.cine-pricing__plane path { stroke: var(--cine-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cine-pricing__temple path, .cine-pricing__tower path { fill: var(--cine-ink); stroke: var(--cine-ink); stroke-width: 1.5; stroke-linejoin: round; }
.cine-pricing__temple path + path { stroke: #fff; stroke-width: 2.2; }
.cine-pricing__tower path { fill: none; stroke-width: 2.4; }
.cine-pricing__route text { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--cine-ink-soft); }
.cine-pricing__subhead { margin: 10px 0 0; font-family: var(--cine-display); font-weight: 600; font-size: 1.9rem; color: var(--cine-ink); }
.cine-pricing__note { margin: 16px 0 0; font-size: 0.9rem; color: var(--cine-ink-soft); }
@media (max-width: 900px) {
	.cine-pricing__tiers { grid-template-columns: 1fr; gap: 26px; }
	.cine-pricing__row { align-items: flex-start; }
	.cine-pricing__row--supplement, .cine-pricing__flights { padding-left: 20px; padding-right: 20px; }
	.cine-pricing__amount { font-size: 1.6rem; }
}