/* ==========================================================================
   CINEMATIC SCROLL HERO — replaces the V-shaped 3D Hero Gallery (#gal) as
   the homepage's default Hero. Two stacked, scroll-pinned stages:

     1. .cinema-intro   — black stage, DesignHaus logo motion + the site's
                           real headline (same copy the old .gal__title
                           used), pinned then fades on the first scroll.
     2. .cinema-rail     — horizontal-scroll hero, 6 slides (device-mockup
                           imagery from images/hero-cinematic/), each
                           slide's copy animates in only while centered.

   Classic industry timeline (#hero-timeline) and the toggle button are
   untouched — see js/hero-toggle.js. This stylesheet only styles the new
   markup inside #gal (class changed cinema-hero); it never touches
   .gal__* rules in hero-gallery.css, so nothing there leaks in or out.
   ========================================================================== */

.cinema-hero{
  position: relative;
  overflow: hidden;
  background: #050606;
}
/* the shared .hero-toggle-btn rule (inline <style> in index.html) is
   `position: absolute`, which worked when #gal was a single 100svh
   section — now #gal wraps two pinned/scrubbed stages many viewports
   tall, so an absolute bottom-anchor would sit far below the fold.
   Pin it to the viewport instead, matching .cinema-cue/.cinema-progress. */
#gal .hero-toggle-btn{ position: fixed; }

/* ---------------- INTRO ---------------- */
.cinema-intro{
  position: relative; height: 100vh; width: 100%; overflow: hidden;
  background: #050606;
  display: flex; align-items: center; justify-content: center;
}
/* Layered CSS-only grid backdrop (fine base grid + a 4x major grid), with
   a slow autonomous drift plus a small mouse-driven parallax offset (set
   in JS via --gx/--gy, in px) — so it reads as a surface that responds to
   the cursor, not just an idle looping texture. Masked to fade toward the
   section edges so it never competes with the logo/heading. */
.cinema-intro__grid{
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 82%);
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 82%);
  transform: translate(calc(var(--gx, 0) * 1px), calc(var(--gy, 0) * 1px));
}
.cinema-intro__grid::before, .cinema-intro__grid::after{ content: ""; position: absolute; inset: -144px; }
.cinema-intro__grid::before{
  background-image:
    linear-gradient(to right, rgba(215,222,232,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(215,222,232,0.06) 1px, transparent 1px);
  background-size: 36px 36px;
  animation: cinemaGridDrift 32s linear infinite;
}
.cinema-intro__grid::after{
  background-image:
    linear-gradient(to right, rgba(175,190,210,0.09) 1.2px, transparent 1.2px),
    linear-gradient(to bottom, rgba(175,190,210,0.09) 1.2px, transparent 1.2px);
  background-size: 144px 144px;
  animation: cinemaGridDrift 32s linear infinite;
}
@keyframes cinemaGridDrift{ from{ background-position: 0 0, 0 0; } to{ background-position: 144px 144px, 144px 144px; } }
@media (prefers-reduced-motion: reduce){
  .cinema-intro__grid::before, .cinema-intro__grid::after{ animation: none; }
  .cinema-intro__grid{ transform: none; }
}

/* cursor glow — set on .cinema-intro itself (--sx/--sy, 0-100%, from JS)
   so it's inherited by both the ambient light behind the logo AND the
   grid-reveal glow below, one shared source of truth. Cool silver/graphite
   only, never a literal spotlight — reads as atmosphere, not a UI effect. */
.cinema-intro__spotlight{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(560px circle at calc(var(--sx, 50) * 1%) calc(var(--sy, 42) * 1%), rgba(150,170,195,0.09), transparent 62%);
}
/* brightens the grid lines specifically near the cursor, layered on top of
   the always-on base/major grid rather than replacing it. */
.cinema-intro__grid-glow{
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at calc(var(--sx, 50) * 1%) calc(var(--sy, 45) * 1%),
    rgba(150,170,195,0.16) 0%, rgba(150,170,195,0.06) 18%, transparent 42%);
}
.cinema-intro__logo{ position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; transform-origin: center; }
.cinema-intro__lockup{ display: flex; align-items: flex-start; gap: 28px; }
.cinema-intro__mark-wrap{ position: relative; width: 114px; height: 114px; flex: 0 0 auto; }
.cinema-intro__halo{
  position: absolute; inset: -45%; border-radius: 50%;
  background: radial-gradient(circle, rgba(180,190,196,0.14) 0%, rgba(120,130,138,0.03) 46%, transparent 72%);
  filter: blur(18px); opacity: 0;
  animation: cinemaHaloIn 2.2s ease-out forwards; animation-delay: .9s;
}
@keyframes cinemaHaloIn{ to{ opacity: 1; } }
svg.cinema-intro__mark-svg{
  position: relative; z-index: 2; width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 2px 16px rgba(0,0,0,0.6)) drop-shadow(0 0 10px rgba(170,180,186,0.14));
}
svg.cinema-intro__mark-svg path{
  stroke: #f4f6f6; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
  /* fill is set to the gradient from the start but invisible (fill-opacity:0)
     — fill:none -> fill:url(...) can't be interpolated by the browser (not
     an animatable value type) and just snaps instantly regardless of
     duration, which read as a jump/lag. fill-opacity is a plain number, so
     it eases smoothly instead. */
  fill: url(#cinemaTitaniumSheen); fill-opacity: 0;
  animation: cinemaDrawPath 2.2s cubic-bezier(.65,0,.35,1) forwards, cinemaFillIn .8s ease-out forwards;
  animation-delay: .1s, 2s;
}
svg.cinema-intro__mark-svg path:nth-child(2){ animation-delay: .4s, 2.3s; }
@keyframes cinemaDrawPath{ to{ stroke-dashoffset: 0; } }
@keyframes cinemaFillIn{ to{ fill-opacity: 1; stroke: rgba(230,234,236,0.5); stroke-width: 0.4; } }
.cinema-intro__sheen-rect{ animation: cinemaSheenTravel 6.5s ease-in-out infinite; animation-delay: 2.6s; }
@keyframes cinemaSheenTravel{
  0%{ transform: translateX(-140%) rotate(18deg); }
  45%{ transform: translateX(160%) rotate(18deg); }
  100%{ transform: translateX(160%) rotate(18deg); }
}
.cinema-intro__divider{
  width: 1px; align-self: stretch;
  background: linear-gradient(180deg, transparent 0%, rgba(180,188,192,0.28) 50%, transparent 100%);
  opacity: 0; animation: cinemaDividerIn 1s ease-out forwards; animation-delay: 1.6s;
}
@keyframes cinemaDividerIn{ to{ opacity: 1; } }
.cinema-intro__wordlock{
  text-align: left; opacity: 0; --brandSize: 60px; margin-top: 2px;
  transform: translateX(14px);
  animation: cinemaSlideIn 1.3s cubic-bezier(.16,1,.3,1) forwards; animation-delay: 1.5s;
}
@keyframes cinemaSlideIn{ to{ opacity: 1; transform: translateX(0); } }
.cinema-intro__wordlock .brand{
  font-family: 'Roboto','Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-size: var(--brandSize); font-weight: 800; letter-spacing: -0.005em;
  line-height: 1.2; margin-top: -0.1em; padding-bottom: 0.06em;
  background: linear-gradient(180deg, #ffffff 0%, #dde1e3 40%, #8f979c 58%, #d8dcdf 76%, #f6f7f7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap;
}
.cinema-intro__wordlock .sub{
  display: block; margin-top: -0.18em; position: relative; top: -3px;
  font-family: 'Roboto','Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-size: calc(var(--brandSize) * 0.62); font-weight: 500; letter-spacing: -0.005em; color: #7c868d;
}

.cinema-intro__heading{ margin-top: 46px; max-width: 720px; padding: 0 24px; text-align: center; }
.cinema-intro__heading h1{
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(20px, 2.4vw, 32px); line-height: 1.4; letter-spacing: 0.003em;
  color: #eef0f1;
  opacity: 0; transform: translateY(14px);
  animation: cinemaTitleIn 1s cubic-bezier(.16,1,.3,1) forwards; animation-delay: 2.5s;
}
.cinema-intro__heading h1 .line1{ display: inline-block; font-size: 1.35em; }
.cinema-intro__heading h1 .accent{
  display: inline-block; margin-top: 8px; font-size: 0.82em;
  background: linear-gradient(180deg, #ffffff 0%, #dde1e3 40%, #8f979c 58%, #d8dcdf 76%, #f6f7f7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cinema-intro__heading p{
  margin-top: 20px; font-family: 'Roboto',sans-serif; font-weight: 400;
  font-size: clamp(12.5px, 1vw, 14.5px); letter-spacing: .02em; line-height: 1.65; color: #8b9297;
  opacity: 0; transform: translateY(10px);
  animation: cinemaTitleIn 1s cubic-bezier(.16,1,.3,1) forwards; animation-delay: 2.85s;
}
@keyframes cinemaTitleIn{ to{ opacity: 1; transform: translateY(0); } }

.cinema-intro__cue{
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; animation: cinemaCueIn .6s ease-out forwards; animation-delay: 3.9s;
}
.cinema-intro__cue .line{
  width: 1px; height: 34px;
  background: linear-gradient(180deg, rgba(196,203,206,0) 0%, #7c868d 60%, rgba(196,203,206,0) 100%);
  position: relative; overflow: hidden;
}
.cinema-intro__cue .line::after{
  content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
  background: #f4f6f6; animation: cinemaTravel 2.6s ease-in-out infinite;
}
@keyframes cinemaTravel{ 0%{ top: -40%; } 100%{ top: 100%; } }
@keyframes cinemaCueIn{ to{ opacity: 1; } }
.cinema-intro__cue span{ font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #7f8890; }

/* ---------------- HORIZONTAL SCROLL RAIL ---------------- */
.cinema-track{ position: relative; }
.cinema-stage{ position: relative; height: 100vh; width: 100%; overflow: hidden; background: #0a0a0a; }
.cinema-rail{ position: relative; width: 100%; height: 100%; }

/* Each panel is stacked full-bleed on top of the previous one (not laid
   out side by side) — panels[i]'s img/scrim wipe in from the right and
   cover panels[i-1] entirely, so no horizontal rail translation is
   needed; z-index (set in JS, ascending with index) keeps later panels
   on top. The panel itself never moves — only its __img/__scrim do —
   so __copy's position is completely unaffected by the wipe. */
.cinema-panel{
  position: absolute; inset: 0; height: 100%; width: 100%;
  overflow: hidden; display: flex; align-items: center;
}
.cinema-panel__img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; will-change: transform;
  /* cast shadow on whichever edge is currently exposed mid-slide (the
     panel's own overflow:hidden clips the rest), giving the swap a sense
     of physical depth instead of a flat cut between the two images.
     Alpha only, driven by --edgeA (set in JS) — 0 at rest so a fully
     settled image shows no shadow at all, only visible while its own
     enter/exit motion is actually happening and for a brief moment after. */
  box-shadow: 0 0 70px 24px rgba(0,0,0,var(--edgeA, 0));
}
.cinema-panel__scrim{ position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.cinema-panel--text-left .cinema-panel__scrim{ background: linear-gradient(90deg, var(--scrim-c) 0%, transparent 46%); }
.cinema-panel--text-right .cinema-panel__scrim{ background: linear-gradient(270deg, var(--scrim-c) 0%, transparent 46%); }

.cinema-panel__copy{
  position: relative; z-index: 5; max-width: min(540px, 44vw);
  padding: 0 clamp(5vw, 6vw, 7vw);
  opacity: 0; transform: translateY(22px);
}
.cinema-panel--text-right .cinema-panel__copy{ margin-left: auto; text-align: left; }
.cinema-panel--text-left .cinema-panel__copy{ margin-right: auto; }

.cinema-panel__eyebrow{
  font-family: 'Roboto Condensed',sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.cinema-panel__badge{
  display: inline-flex; align-items: center;
  font-family: 'Roboto',sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  padding: 7px 11px 6px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.cinema-panel__title{
  font-size: clamp(34px, 4.1vw, 64px); font-weight: 800; line-height: .96;
  letter-spacing: -0.035em; color: var(--ink); margin-bottom: 16px;
  max-width: 9ch;
}
.cinema-panel__sub{
  font-size: clamp(15px, 1.15vw, 17px); font-weight: 400; line-height: 1.58;
  color: var(--ink-dim); max-width: 34ch; margin-bottom: 30px;
}
.cinema-panel__cta{
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 500; letter-spacing: .03em;
  color: var(--ink); text-decoration: none;
  padding-bottom: 7px; border-bottom: 1px solid var(--accent);
}
.cinema-panel__cta svg{ width: 14px; height: 14px; transition: transform .3s ease; }
.cinema-panel__cta:hover svg{ transform: translateX(4px); }

/* ---------------- PROGRESS / NAV ---------------- */
/* position:fixed has to track the viewport while the slider is pinned, but
   that also meant it never went away once the visitor scrolled past the
   hero into the rest of the page — it just sat there over Industries, the
   footer, everywhere. Hidden by default now; js/hero-cinematic-scroll.js
   toggles .is-visible on for exactly the window the #cinemaTrack
   ScrollTrigger is active (onEnter/onEnterBack -> onLeave/onLeaveBack). */
.cinema-progress{
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  z-index: 50; display: flex; gap: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity 240ms ease;
}
.cinema-progress.is-visible{ opacity: 1; pointer-events: auto; }
.cinema-progress__dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: background .35s ease, transform .35s ease;
}
.cinema-progress__dot.is-active{ background: #fff; transform: scale(1.5); }

.cinema-cue{
  position: fixed; right: 34px; bottom: 34px; z-index: 50;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.55); writing-mode: vertical-rl;
  display: flex; align-items: center; gap: 10px;
  opacity: 1; transition: opacity .3s ease;
}
.cinema-cue::after{ content: ''; width: 1px; height: 34px; background: rgba(255,255,255,.3); }
.cinema-cue.hide{ opacity: 0; }

/* ---------------- MOBILE ----------------
   Portrait: the 6-slide horizontal rail is hidden — a horizontally-
   scrollable element nested inside a vertically-scrolling page tends to
   trap touch-drag gestures (a swipe that starts on it reads as a
   horizontal pan instead of continuing the page's vertical scroll), and
   there's no rework of it into a native swipeable/scroll-snap layout yet.
   No rotate-device prompt either — since portrait can't show the rail at
   all, asking the visitor to rotate just to hit the same "no rail" wall
   bought nothing. The intro logo plays normally and the page continues
   straight to the next section. Landscape: the rail comes back with
   native scroll-snap (no scroll-jacking, so no gesture conflict — the
   whole page is short enough in landscape that this section is the only
   thing worth swiping through horizontally anyway). */
.cinema-rotate-prompt{ display: none !important; }

@media (max-width: 820px) and (orientation: portrait){
  .cinema-track, .cinema-progress, .cinema-cue{ display: none; }

  /* was position:absolute;bottom:40px against a fixed 100vh intro — with
     the intro now auto-height (content + padding) that would drift into
     the middle of the page instead of sitting at the bottom, and there's
     no scroll-jacking left for it to hint at anyway. */
  .cinema-intro__cue{ display: none; }

  .cinema-intro{ height: auto; min-height: 100svh; padding: 96px 24px 64px; }
  /* mark (114px) and wordlock (--brandSize: 60px) scale down together at
     the same ratio as desktop (114:60 = 1.9) — tuning them to different
     ratios is what made the mark read as mismatched/too-small or too-big
     against the text. Doubled from 42/22 per request. */
  .cinema-intro__lockup{ gap: 20px; }
  .cinema-intro__mark-wrap{ width: 84px; height: 84px; }
  .cinema-intro__wordlock{ --brandSize: 44px; margin-top: 2px; }
  .cinema-intro__heading{ margin-top: 30px; padding: 0 4px; }
  .cinema-intro__heading h1{ font-size: 17px; line-height: 1.35; }
  .cinema-intro__heading h1 .line1{ font-size: 1.3em; }
  .cinema-intro__heading p{ margin-top: 14px; font-size: 12.5px; }
}

@media (max-width: 926px) and (orientation: landscape) and (max-height: 500px){
  .cinema-intro__cue{ display: none; }
  .cinema-intro{ height: auto; min-height: 100svh; padding: 40px 24px 26px; }
  .cinema-intro__lockup{ gap: 16px; }
  .cinema-intro__mark-wrap{ width: 68px; height: 68px; }
  .cinema-intro__wordlock{ --brandSize: 36px; margin-top: 2px; }
  .cinema-intro__heading{ margin-top: 14px; padding: 0 4px; }
  .cinema-intro__heading h1{ font-size: 14px; line-height: 1.3; }
  .cinema-intro__heading h1 .line1{ font-size: 1.25em; }
  .cinema-intro__heading p{ margin-top: 8px; font-size: 11px; }

  .cinema-stage{ height: auto; overflow: visible; }
  .cinema-rail{
    position: static; height: auto; display: flex;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .cinema-panel{ position: relative; inset: auto; width: 100vw; flex: 0 0 100vw; height: 92vh; scroll-snap-align: center; align-items: flex-end; }
  .cinema-panel__copy{ opacity: 1 !important; transform: none !important; padding: 0 6vw 6vh; max-width: min(440px, 60vw) !important; margin: 0 !important; }
  .cinema-panel__scrim{ background: linear-gradient(0deg, var(--scrim-c) 0%, transparent 55%) !important; }
  .cinema-panel__title{ font-size: clamp(22px, 4.2vw, 32px); max-width: 11ch; }
  .cinema-panel__sub{ font-size: 12.5px; max-width: 28ch; }
  .cinema-progress, .cinema-cue{ display: none; }
}