/* cinema.css — shared cinematic hero pattern
 * Used by: about.html, index.html, and any future page that opens with a
 * Rockstar-style 100vh cinematic frame (parallax photos + 3D model + ribbon).
 *
 * Pairs with /js/cinema.js (parallax fallback + vehicle entrance fade).
 * Requires these tokens on :root (already defined in each page):
 *   --cinema-bg:#050505  --cinema-ink:#F4F4F2  --cinema-muted:#9a9a93
 *   --paper, --ink, --accent, --serif, --container, --gutter
 */

/* === NAV OVER CINEMA HERO ===
 * When a page contains a .cinema-hero AND the user is at the top (.nav has no .scrolled),
 * make the nav blend into the dark hero. Once scrolled into the cream body it returns
 * to whatever the page's default nav style is.
 */
body:has(.cinema-hero) .nav:not(.scrolled){background:rgba(5,5,5,.55);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom-color:transparent}
body:has(.cinema-hero) .nav:not(.scrolled) .brand{color:var(--cinema-ink)}
body:has(.cinema-hero) .nav:not(.scrolled) .brand-text small{color:var(--cinema-muted)}
body:has(.cinema-hero) .nav:not(.scrolled) .nav-links a{color:var(--cinema-ink)}
body:has(.cinema-hero) .nav:not(.scrolled) .nav-links a::after{background:var(--cinema-ink)}
body:has(.cinema-hero) .nav:not(.scrolled) .nav-hamburger span{background:var(--cinema-ink)}

/* === CINEMA HERO === */
.cinema-hero{position:relative;height:100vh;min-height:640px;width:100%;background:var(--cinema-bg);overflow:hidden;color:var(--cinema-ink);isolation:isolate}
.cinema-hero .layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Layer 0 — sky/ambience */
.layer-sky{background:radial-gradient(120% 80% at 50% 18%,#0a1418 0%,#070a0d 55%,var(--cinema-bg) 100%);z-index:0}

/* Layer 1 — far parallax */
.layer-far{z-index:1}
.layer-far img{width:100%;height:100%;object-fit:cover;object-position:center 65%;transform:scale(1.15);opacity:.55;filter:blur(2px) saturate(.85);will-change:transform,opacity}

/* Layer 2 — mid parallax */
.layer-mid{z-index:2}
.layer-mid img{width:100%;height:100%;object-fit:cover;object-position:center 38%;transform:scale(1.08);opacity:.88;filter:saturate(.82) contrast(1.06) brightness(0.82);will-change:transform,opacity;transition:opacity 0.55s ease}

/* Legacy class aliases preserved so about.html (which used .layer-nickerie/.layer-waterkant) still works */
.layer-nickerie{z-index:1}
.layer-nickerie img{width:100%;height:100%;object-fit:cover;object-position:center 65%;transform:scale(1.15);opacity:.55;filter:blur(2px) saturate(.85);will-change:transform,opacity}
.layer-waterkant{z-index:2}
.layer-waterkant img{width:100%;height:100%;object-fit:cover;object-position:center 70%;transform:scale(1.08);opacity:.8;filter:saturate(.78) contrast(1.04);will-change:transform,opacity;mix-blend-mode:screen}

/* Layer 3 — sunset glow */
.layer-glow{z-index:3;background:
  radial-gradient(60% 38% at 50% 78%,rgba(227,6,19,.18) 0%,rgba(227,6,19,0) 70%),
  radial-gradient(80% 50% at 50% 95%,rgba(255,170,90,.08) 0%,rgba(0,0,0,0) 70%)}

/* Vignettes — top + bottom black grade */
.cinema-hero::before,
.cinema-hero::after{content:"";position:absolute;left:0;right:0;pointer-events:none;z-index:6}
.cinema-hero::before{top:0;height:28vh;background:linear-gradient(to bottom,rgba(5,5,5,.96) 0%,rgba(5,5,5,.55) 55%,rgba(5,5,5,0) 100%)}
.cinema-hero::after{bottom:0;height:38vh;background:linear-gradient(to top,rgba(5,5,5,.98) 0%,rgba(5,5,5,.7) 35%,rgba(5,5,5,0) 100%)}

/* Layer 4 — vehicle (right-aligned on desktop, centered on mobile) */
.layer-vehicle{z-index:4;display:flex;align-items:flex-end;justify-content:flex-end;padding-bottom:6vh;padding-right:3vw}
.layer-vehicle model-viewer{width:min(52vw,840px);height:74vh;min-height:360px;background:transparent;--poster-color:transparent;opacity:0;transition:opacity .6s cubic-bezier(0.16,1,0.3,1)}
.layer-vehicle model-viewer.is-loaded{opacity:1}

/* GLBs that ship without textures (geometry-only) get a warm metallic tint
 * via CSS filter so they read as polished body paint instead of flat white.
 * All three vehicle models are geometry-only so apply to all. */
.layer-vehicle model-viewer[src*="hiace"],
.layer-vehicle model-viewer[src*="noah"],
.layer-vehicle model-viewer[src*="wish"]{
  filter: brightness(0.86) sepia(0.55) saturate(1.55) hue-rotate(-14deg) contrast(1.05);
}

/* Booking section viewer — same tint, scoped to #vehicle-viewer */
#vehicle-viewer[src*="hiace"],
#vehicle-viewer[src*="noah"],
#vehicle-viewer[src*="wish"]{
  filter: brightness(0.86) sepia(0.55) saturate(1.55) hue-rotate(-14deg) contrast(1.05);
}

/* Layer 5 — hero stage (left content column) */
.hero-stage{position:absolute;inset:0;z-index:7;display:flex;align-items:center;padding:0 var(--gutter);max-width:var(--container);margin:0 auto;left:0;right:0;pointer-events:none;padding-bottom:5vh}
.hero-content{width:min(520px,48%);pointer-events:auto;display:flex;flex-direction:column;gap:1.25rem}
.hero-h1{font-family:var(--serif);font-weight:500;font-size:clamp(3.2rem,8vw,8rem);line-height:.86;letter-spacing:-0.05em;color:var(--cinema-ink);text-shadow:0 2px 40px rgba(0,0,0,.55);margin:0}
.hero-h1 .dot{color:var(--accent)}
.hero-eyebrow{font-family:var(--serif);font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--cinema-muted);margin:0}
.hero-sub{font-family:var(--serif);font-size:clamp(1rem,1.8vw,1.25rem);font-weight:400;color:rgba(244,244,242,.72);line-height:1.45;margin:0}
.hero-sub em{font-style:normal;color:var(--cinema-ink)}

/* Editorial ribbon */
.hero-ribbon{position:absolute;left:0;right:0;bottom:0;z-index:8;background:#000;border-top:1px solid rgba(255,255,255,.06);padding:.95rem var(--gutter);display:flex;align-items:center;justify-content:center;gap:1.25rem}
.hero-ribbon ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.25rem;list-style:none;margin:0;padding:0;max-width:var(--container);width:100%}
.hero-ribbon li{font-family:var(--serif);font-weight:500;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cinema-muted);display:inline-flex;align-items:center;gap:1.25rem}
.hero-ribbon li + li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:.4rem}

/* Scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:5.6rem;transform:translateX(-50%);z-index:9;display:flex;flex-direction:column;align-items:center;gap:.35rem;color:var(--cinema-muted);background:transparent;border:none;font-family:var(--serif);font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;pointer-events:auto;cursor:pointer;padding:.5rem .75rem;animation:cue-bob 1.6s cubic-bezier(.4,0,.2,1) infinite}
.scroll-cue .mi{font-size:22px}
.scroll-cue:hover{color:var(--cinema-ink)}
@keyframes cue-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* Hero-to-paper transition fade */
.hero-fade{position:relative;height:30vh;margin-top:-30vh;z-index:10;pointer-events:none;background:linear-gradient(to bottom,rgba(244,244,242,0) 0%,rgba(244,244,242,.55) 55%,var(--paper) 100%)}

/* Scroll-driven parallax is handled by GSAP ScrollTrigger in
 * js/animations/parallax.js — cinema.js retains the vehicle entrance only. */

/* === Responsive === */
@media (max-width:900px){
  .layer-vehicle{justify-content:center;padding-right:0;padding-bottom:24vh}
  .layer-vehicle model-viewer{width:96vw;height:44vh}
  .hero-content{width:100%}
  .hero-stage{align-items:flex-start;padding-top:15vh}
}
@media (max-width:560px){
  .scroll-cue{bottom:5rem;font-size:.6rem}
  .hero-ribbon{padding:.75rem 1rem}
  .hero-ribbon li{font-size:.62rem;letter-spacing:.18em;gap:.75rem}
}

/* === Reduced motion === */
@media (prefers-reduced-motion:reduce){
  .scroll-cue{animation:none}
  .layer-far img,
  .layer-mid img,
  .layer-nickerie img,
  .layer-waterkant img,
  .layer-vehicle,
  .hero-type{
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
  }
  .layer-far img,
  .layer-nickerie img{transform:scale(1.15) !important}
  .layer-mid img,
  .layer-waterkant img{transform:scale(1.08) !important}
  .layer-vehicle model-viewer{opacity:1 !important}
}