/* ==========================================================================
   HEADLINER STAYS — CINEMATIC LAYER
   Loaded after styles.css on the reimagined pages (Home, Portfolio, Story).
   Brand system unchanged: maroon-first, Silver Editorial serif, generous
   whitespace. This layer adds the scroll-driven film tour, editorial
   composition, and slower, more confident motion.
   ========================================================================== */

.page-cinema {
  --ease-cine: cubic-bezier(0.16, 1, 0.3, 1);
  --cine-black: #120409;
  --hairline: rgba(95, 0, 18, 0.14);
}

/* Generous whitespace: sections breathe more on cinematic pages */
.page-cinema .section { padding: 130px 0; }
@media (max-width: 768px) {
  .page-cinema .section { padding: 84px 0; }
}

/* ==========================================================================
   1. Header treatment while over the film (pages with a film hero)
   ========================================================================== */
body:is(.page-home, .page-partner) header.main-header {
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, height 0.4s ease;
}

body:is(.page-home, .page-partner).over-video header.main-header,
body:is(.page-home, .page-partner).over-video header.main-header.scrolled {
  animation: none;                 /* cancel the scroll-driven shrink/whiten */
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Dual logo: maroon for light surfaces, white while over the film */
.logo .logo-light { display: none; }
body:is(.page-home, .page-partner).over-video .logo .logo-dark { display: none; }
body:is(.page-home, .page-partner).over-video .logo .logo-light { display: block; }

@media (min-width: 769px) {
  body:is(.page-home, .page-partner).over-video nav.nav-menu ul li a { color: #fff; opacity: 0.85; }
  body:is(.page-home, .page-partner).over-video nav.nav-menu ul li a:hover,
  body:is(.page-home, .page-partner).over-video nav.nav-menu ul li.active a { color: var(--color-gold); opacity: 1; }
  body:is(.page-home, .page-partner).over-video nav.nav-menu ul li a::after { background: var(--color-gold); }
}
body:is(.page-home, .page-partner).over-video .mobile-toggle span { background: #fff; }
body:is(.page-home, .page-partner).over-video .mobile-toggle.active span { background: var(--color-gold); }

/* ==========================================================================
   2. The Tour — scroll-scrubbed continuous walkthrough
   The track is tall; the stage pins; JS maps scroll progress (0→1) to the
   film's currentTime and writes it into --tp for the progress rail.
   ========================================================================== */
.cine-tour {
  position: relative;
  height: 640vh;
  background: var(--cine-black);
  --tp: 0;
}

.cine-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  /* Opening frame shows instantly while the film frames stream in.
     Each tour can override its poster via --cine-poster on the section. */
  background: var(--cine-black) var(--cine-poster, url('images/tour_poster.jpg')) center / cover no-repeat;
}

.cine-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

/* Live variant: the film plays on its own — one viewport tall, no pinning */
.cine-tour.cine-live {
  height: 100vh;
  height: 100svh;
}
.cine-tour.cine-live .cine-stage { position: relative; height: 100%; }

.cine-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Thin gold line at the stage's foot charts the film loading; fades when done */
.cine-stage::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(var(--load, 0));
  transform-origin: left;
  opacity: 0.8;
  z-index: 8;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.cine-tour.film-ready .cine-stage::after { opacity: 0; }

/* Cinematic veil: top scrim for the nav, bottom gradient for captions,
   plus a soft vignette so the film reads as graded, not raw. */
.cine-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10, 2, 6, 0.55) 0%, rgba(10, 2, 6, 0) 18%),
    linear-gradient(to top, rgba(10, 2, 6, 0.72) 0%, rgba(10, 2, 6, 0) 36%),
    radial-gradient(ellipse 120% 90% at 50% 45%, rgba(0, 0, 0, 0) 62%, rgba(8, 1, 5, 0.38) 100%);
}

/* Faint film grain (static, featherweight) */
.cine-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

/* --- Hero copy over the opening frame (same text as before) --- */
.cine-hero {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  opacity: var(--hero-o, 1);
  translate: 0 var(--hero-y, 0px);
  /* Clear the fixed header so centered copy never slips beneath it */
  padding: calc(var(--header-height) + 14px) 0 70px;
  /* Left scrim for copy legibility — fades out with the hero */
  background: linear-gradient(100deg, rgba(10, 2, 6, 0.66) 0%, rgba(10, 2, 6, 0.34) 44%, rgba(10, 2, 6, 0) 70%);
}
.cine-hero.is-gone { pointer-events: none; }

.cine-hero .hero-tagline {
  color: var(--color-gold);
  margin-bottom: 16px;
  display: inline-block;
  font-size: 2rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.cine-hero h1 {
  font-size: clamp(2.7rem, 5.6vw, 4.9rem);
  color: var(--color-white);
  line-height: 1.05;
  margin-bottom: 42px;
  max-width: 15ch;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.cine-hero p {
  font-size: 1.18rem;
  color: var(--color-cream-text);
  max-width: 56ch;
  margin-bottom: 42px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.cine-hero .hero-actions { display: flex; gap: 18px; }
.cine-hero .btn-secondary {
  color: var(--color-white);
  border-color: rgba(247, 231, 234, 0.65);
}
.cine-hero .btn-secondary:hover {
  background: var(--color-white);
  color: var(--color-maroon);
  border-color: var(--color-white);
}

@media (max-width: 768px) {
  .cine-hero h1 { font-size: 2.4rem; }
  .cine-hero p { font-size: 1.02rem; }
  .cine-hero .hero-actions { flex-direction: column; align-items: flex-start; }
}

/* Shorter windows: scale the hero down so nothing clips beyond the stage */
@media (max-height: 820px) {
  .cine-hero .hero-tagline { font-size: 1.6rem; margin-bottom: 10px; }
  .cine-hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); margin-bottom: 18px; }
  .cine-hero p { font-size: 1.05rem; margin-bottom: 28px; }
}
@media (max-height: 640px) {
  .cine-hero .hero-tagline { font-size: 1.35rem; margin-bottom: 6px; }
  .cine-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 14px; }
  .cine-hero p { font-size: 0.95rem; margin-bottom: 20px; max-width: 48ch; }
  .cine-hero .btn { padding: 12px 24px; }
}

/* --- Chapter captions: one per space, crossfaded as the film passes it --- */
.cine-caption {
  position: absolute;
  left: clamp(24px, 6vw, 96px);
  bottom: clamp(30px, 8vh, 76px);
  z-index: 6;
  pointer-events: none;
}

.cine-caption .cap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(620px, 86vw);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-cine), transform 0.7s var(--ease-cine);
}

/* Narrative line riding under each chapter title */
.cap-line {
  margin: 14px 0 0;
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--color-cream-text);
  max-width: 44ch;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.55);
}

.cap-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 10px;
}
.cap-kicker::before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.7;
}

.cap-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.05;
  color: var(--color-white);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

/* Captions only appear once the tour is engaged (hero has stepped aside) */
.cine-tour[data-engaged][data-chapter="0"] .cap[data-i="0"],
.cine-tour[data-engaged][data-chapter="1"] .cap[data-i="1"],
.cine-tour[data-engaged][data-chapter="2"] .cap[data-i="2"] {
  opacity: 1;
  transform: translateY(0);
}

/* --- Fixed progress rail: names each space as you pass it --- */
.cine-rail {
  position: absolute;
  right: clamp(20px, 4.5vw, 64px);
  top: 50%;
  translate: 0 -50%;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.cine-tour[data-engaged] .cine-rail { opacity: 1; }

.cine-rail-stops {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 34px;
}

.cine-stop {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 231, 234, 0.55);
  transition: color 0.4s ease;
}

.cine-stop .stop-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(247, 231, 234, 0.65);
  background: transparent;
  transition: background 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}

.cine-stop:hover { color: var(--color-white); }

.cine-tour[data-chapter="0"] .cine-stop:nth-child(1),
.cine-tour[data-chapter="1"] .cine-stop:nth-child(2),
.cine-tour[data-chapter="2"] .cine-stop:nth-child(3) {
  color: var(--color-white);
}
.cine-tour[data-chapter="0"] .cine-stop:nth-child(1) .stop-dot,
.cine-tour[data-chapter="1"] .cine-stop:nth-child(2) .stop-dot,
.cine-tour[data-chapter="2"] .cine-stop:nth-child(3) .stop-dot {
  background: var(--color-gold);
  border-color: var(--color-gold);
  transform: scale(1.5);
}

/* Thin progress line beside the stops */
.cine-rail-line {
  position: relative;
  width: 1px;
  height: 210px;
  background: rgba(247, 231, 234, 0.22);
  overflow: hidden;
}
.cine-rail-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-gold);
  transform-origin: top;
  transform: scaleY(var(--tp));
}

@media (max-width: 768px) {
  .cine-stop { font-size: 0; gap: 0; }        /* dots only on small screens */
  .cine-stop .stop-dot { width: 8px; height: 8px; }
  .cine-rail-stops { gap: 24px; }
  .cine-rail-line { height: 150px; }
  .cine-caption { bottom: 64px; }
  .cap-title { font-size: 1.6rem; }
  .cap-line { font-size: 0.9rem; max-width: 34ch; }
}

/* Scroll cue inherits the shared styling; sits above the veil and
   steps aside with the hero once the tour is engaged */
.cine-stage .scroll-cue { z-index: 6; transition: opacity 0.5s ease; }
.cine-tour[data-engaged] .cine-stage .scroll-cue { opacity: 0; }

/* ==========================================================================
   3. Stats — editorial columns, hairline separated, oversized serif numerals
   ========================================================================== */
.page-cinema .stats-section {
  background: var(--bg-base);
  padding: 110px 0 104px;
  border-bottom: 1px solid var(--hairline);
}

.page-cinema .stats-container {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: transparent;
}

.page-cinema .stat-item {
  background: transparent;
  text-align: left;
  padding: 8px 40px;
  border-left: 1px solid var(--hairline);
}
.page-cinema .stat-item:first-child { border-left: none; padding-left: 0; }
.page-cinema .stat-item:hover { background: transparent; }

.page-cinema .stat-num {
  font-size: clamp(2.6rem, 4.2vw, 3.8rem);
  margin-bottom: 12px;
}

.page-cinema .stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
}

@media (max-width: 992px) {
  .page-cinema .stats-container { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .page-cinema .stat-item:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 560px) {
  .page-cinema .stats-container { grid-template-columns: 1fr; }
  .page-cinema .stat-item { border-left: none; padding: 0; }
}

/* ==========================================================================
   4. Editorial section headers (shared by cinematic pages)
   ========================================================================== */
.page-cinema .section-header { margin-bottom: 90px; }
.page-cinema .section-header h2 { font-size: clamp(2.4rem, 4vw, 3.3rem); }

/* ==========================================================================
   5. Home — “Inside the Portfolio” editorial rows
   ========================================================================== */
.folio-list {
  display: flex;
  flex-direction: column;
  gap: clamp(96px, 13vh, 160px);
}

.folio-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  position: relative;
}

.folio-media { grid-column: 1 / span 7; position: relative; }
.folio-info  { grid-column: 8 / span 5; position: relative; }

.folio-row:nth-child(even) .folio-media { grid-column: 6 / span 7; order: 2; }
.folio-row:nth-child(even) .folio-info  { grid-column: 1 / span 5; order: 1; }

.folio-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 10.5;
  background: var(--bg-cream);
  box-shadow: var(--shadow-soft);
}

.folio-frame img {
  position: absolute;
  top: -7%;
  left: 0;
  width: 100%;
  height: 114%;
  object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

.folio-frame .property-badge { z-index: 2; }

.folio-num {
  font-family: var(--font-heading);
  font-size: clamp(4.4rem, 7vw, 6.4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(95, 0, 18, 0.28);
  display: block;
  margin-bottom: 18px;
}

.folio-info .property-meta { margin-bottom: 14px; }

.folio-title {
  font-size: clamp(2rem, 3vw, 2.7rem);
  color: var(--color-maroon);
  margin-bottom: 18px;
}

.folio-desc {
  font-size: 1.02rem;
  color: var(--color-ink-soft);
  max-width: 48ch;
  margin-bottom: 34px;
}

@media (max-width: 900px) {
  .folio-row { display: flex; flex-direction: column; align-items: stretch; gap: 30px; }
  .folio-row:nth-child(even) .folio-media { order: 0; }
  .folio-num { font-size: 3.6rem; margin-bottom: 12px; }
}

/* ==========================================================================
   6. Join-the-network CTA — full-bleed maroon finale
   ========================================================================== */
.cine-cta {
  position: relative;
  background: var(--color-maroon);
  overflow: hidden;
  padding: clamp(120px, 18vh, 170px) 0;
  text-align: center;
}

.cine-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 90% at 50% 110%, rgba(241, 116, 34, 0.22) 0%, rgba(241, 116, 34, 0) 60%);
  pointer-events: none;
}

.cine-cta::after {
  content: '';
  position: absolute;
  top: 44px;
  left: 50%;
  translate: -50% 0;
  width: 140px;
  height: 10px;
  background-image: url('images/headliner-stays-checkered-pattern-black-rgb.svg');
  background-repeat: repeat-x;
  background-size: 20px 10px;
  opacity: 0.35;
  pointer-events: none;
}

.cine-cta .accent-script {
  color: var(--color-gold);
  display: block;
  margin-bottom: 14px;
}

.cine-cta h2 {
  color: var(--color-white);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  max-width: 20ch;
  margin: 0 auto 26px;
}

.cine-cta p {
  font-size: 1.15rem;
  color: var(--color-cream-muted);
  max-width: 600px;
  margin: 0 auto 46px;
}

/* ==========================================================================
   7. Inner pages — cinematic editorial intro
   ========================================================================== */
.cine-intro {
  padding: clamp(170px, 24vh, 230px) 0 96px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--hairline);
  position: relative;
}

.cine-intro .kicker {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-maroon);
}
.cine-intro .kicker::before {
  content: '';
  width: 44px;
  height: 1px;
  background: var(--color-orange);
}

.cine-intro h1 {
  font-size: clamp(3.2rem, 7vw, 5.4rem);
  line-height: 1.02;
  margin: 22px 0 30px;
  color: var(--color-maroon);
  max-width: 14ch;
}

.cine-intro h1 .accent-badge { font-size: 0.52em; margin-left: 14px; }

.cine-intro p {
  max-width: 64ch;
  font-size: 1.16rem;
  color: var(--color-ink-soft);
  margin-bottom: 0;
}

/* ==========================================================================
   8. Portfolio — full-width estate features
   ========================================================================== */
.estate {
  padding: clamp(96px, 13vh, 140px) 0;
}
.estate + .estate { border-top: 1px solid var(--hairline); }

.estate-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}

.estate-media { grid-column: 1 / span 7; }
.estate-info  { grid-column: 8 / span 5; position: relative; }

.estate:nth-child(even) .estate-media { grid-column: 6 / span 7; order: 2; }
.estate:nth-child(even) .estate-info  { grid-column: 1 / span 5; order: 1; }

.estate-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 15 / 11;
  background: var(--bg-cream);
  box-shadow: var(--shadow-soft);
}
.estate-frame img {
  position: absolute;
  top: -7%;
  left: 0;
  width: 100%;
  height: 114%;
  object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.estate-frame .property-badge { z-index: 2; }

.estate-num {
  font-family: var(--font-heading);
  font-size: clamp(4.2rem, 6.6vw, 6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(95, 0, 18, 0.26);
  display: block;
  margin-bottom: 16px;
}

.estate-info .property-meta { margin-bottom: 12px; }

.estate-title {
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  color: var(--color-maroon);
  margin-bottom: 16px;
}

.estate-desc {
  font-size: 1rem;
  color: var(--color-ink-soft);
  margin-bottom: 22px;
}

.estate-specs {
  display: flex;
  gap: 22px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-maroon);
  margin-bottom: 26px;
}

/* Amenity tags become airy hairline pills on cinematic pages */
.page-cinema .property-amenities {
  border-top: 1px solid var(--hairline);
  padding-top: 22px;
  margin-bottom: 34px;
}
.page-cinema .amenity-tag {
  background: transparent;
  border-color: rgba(95, 0, 18, 0.22);
}

.estate-actions { display: flex; gap: 15px; }
.estate-actions .btn { flex: 1; }

@media (max-width: 900px) {
  .estate-grid { display: flex; flex-direction: column; align-items: stretch; gap: 30px; }
  .estate:nth-child(even) .estate-media { order: 0; }
  .estate-num { font-size: 3.4rem; }
  .estate-actions { flex-direction: column; }
}

/* ==========================================================================
   9. Story — editorial philosophy, founders, values
   ========================================================================== */
.page-story .story-block { gap: clamp(48px, 6vw, 90px); }

.page-story .story-media {
  padding: 0;
  border: none;
  background: var(--bg-cream);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  height: auto;
  aspect-ratio: 4 / 4.6;
  box-shadow: var(--shadow-soft);
}
.page-story .story-media img {
  position: absolute;
  top: -7%;
  left: 0;
  width: 100%;
  height: 114%;
  object-fit: cover;
  border-radius: 0;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

.page-story .story-text h3 {
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  margin-bottom: 26px;
}
.page-story .story-text p { color: var(--color-ink-soft); }

/* Founders — hairline editorial profiles, no card chrome */
.founder {
  border-top: 1px solid var(--hairline);
  padding-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.founder-head { display: flex; align-items: center; gap: 24px; }

.founder-portrait {
  width: 116px;
  height: 116px;
  flex: 0 0 116px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-gold);
  box-shadow: var(--shadow-soft);
}
.founder-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.founder-head h3 { font-size: 1.9rem; margin-bottom: 6px; }
.founder-role {
  color: var(--color-orange);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  display: block;
}

.founder p { font-size: 0.98rem; line-height: 1.7; color: var(--color-ink-soft); margin-bottom: 0; }
.founder p strong { color: var(--color-maroon); }

/* Values — hairline columns, like the stats band */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.value-col {
  padding: 10px 40px;
  border-left: 1px solid var(--hairline);
}
.value-col:first-child { border-left: none; padding-left: 0; }
.value-col h3 { font-size: 1.5rem; margin-bottom: 14px; color: var(--color-maroon); }
.value-col p { font-size: 0.95rem; color: var(--color-ink-soft); margin-bottom: 0; }

@media (max-width: 900px) {
  .values-grid { grid-template-columns: 1fr; gap: 40px; }
  .value-col { border-left: none; padding: 0; }
}

/* The Headliner Touch — airy frames instead of boxed cards */
.page-cinema .amenity-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  text-align: left;
}
.page-cinema .amenity-card:hover { transform: none; box-shadow: none; }
.page-cinema .amenity-card-image {
  height: 240px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--bg-card);
  margin-bottom: 22px;
  overflow: hidden;
}
.page-cinema .amenity-card-image img { object-fit: contain; }
.page-cinema .amenity-card:hover .amenity-card-image img { transform: scale(1.05); }
.page-cinema .amenity-card h4 { font-size: 1.3rem; }

/* ==========================================================================
   10. Motion utilities — slow, graded entrances + parallax + image reveals
   ========================================================================== */
.page-cinema .fx {
  opacity: 0;
  transform: translateY(46px);
  filter: blur(7px);
  transition:
    opacity 1s var(--ease-cine),
    transform 1s var(--ease-cine),
    filter 1s var(--ease-cine);
  transition-delay: var(--fxd, 0s);
}
.page-cinema .fx.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* The clip lives on the child, not the observed wrapper — an element whose
   own clip-path is zero-width never intersects for IntersectionObserver. */
.page-cinema .img-reveal > :first-child {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--ease-cine);
  transition-delay: var(--fxd, 0s);
}
.page-cinema .img-reveal.in > :first-child { clip-path: inset(0 0 0 0); }

/* ==========================================================================
   11. Accessibility & fallbacks
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cine-tour { height: auto; }
  .cine-stage { position: relative; height: 100vh; }
  .cine-stage::after { display: none; }
  .cine-rail, .cine-caption, .cine-stage .scroll-cue { display: none; }
  .cine-hero { opacity: 1 !important; translate: none !important; }
  .page-cinema .fx { opacity: 1; transform: none; filter: none; transition: none; }
  .page-cinema .img-reveal { clip-path: none; transition: none; }
  .folio-frame img, .estate-frame img, .page-story .story-media img { transform: none; }
}