/* ZBIF motion & elevation layer. Loaded last. Everything visual here is
   opt-in via .is-cinematic on the hero, so removing the class (or this file)
   returns the page to its prior light design with zero side effects. */

/* ============================ Cinematic hero ========================== */
.hero-home.is-cinematic{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(4.5rem,10vw,8rem) 0 clamp(4rem,8vw,7rem);
  background:
    radial-gradient(120% 80% at 78% -10%,rgba(212,175,55,.16),transparent 55%),
    radial-gradient(90% 70% at 8% 110%,rgba(28,53,88,.55),transparent 60%),
    linear-gradient(165deg,#0A1220 0%,#0F1C30 55%,#050A14 100%);
  color:#fff;
}
/* Darkened city photo behind the node field: atmosphere, not decoration. */
.hero-home.is-cinematic .hero-photo{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("../img/hero-city.jpg");
  background-image:-webkit-image-set(url("../img/hero-city.webp") type("image/webp"),url("../img/hero-city.jpg") type("image/jpeg"));
  background-image:image-set(url("../img/hero-city.webp") type("image/webp"),url("../img/hero-city.jpg") type("image/jpeg"));
  background-size:cover;background-position:center 40%;opacity:.5;
}
.hero-home.is-cinematic .hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(168deg,rgba(10,18,32,.72) 0%,rgba(9,14,26,.84) 52%,rgba(5,10,20,.93) 100%);
}
/* Faint engineering grid, sits above the photo, below the nodes. */
.hero-home.is-cinematic::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 75%);
}
/* Soft top-edge highlight for depth. */
.hero-home.is-cinematic::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.5),transparent);
}
.hero-canvas{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;
  pointer-events:none;display:block;
}
.hero-home.is-cinematic .hero-home-grid{position:relative;z-index:3}

.hero-home.is-cinematic .eyebrow{color:var(--gold-500)}
.hero-home.is-cinematic h1{
  color:#fff;
  background:linear-gradient(180deg,#fff 55%,#cfd8e6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 1px 40px rgba(0,0,0,.25);
}
.hero-home.is-cinematic .lead{color:rgba(226,232,242,.82)}
.hero-home.is-cinematic .hero-meta>span{color:rgba(226,232,242,.62)}
.hero-home.is-cinematic .countdown strong{color:#fff!important}
.hero-home.is-cinematic .countdown span{color:rgba(226,232,242,.6)!important}

/* Right-hand card becomes glass on the dark field. */
.hero-home.is-cinematic .hero-panel-card{
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(3,7,18,.55),inset 0 1px 0 rgba(255,255,255,.12);
}
.hero-home.is-cinematic .hero-panel-card::before{
  background:radial-gradient(circle at 80% 15%,rgba(212,175,55,.4),transparent 50%);
}
.hero-home.is-cinematic .hero-panel-card .eyebrow{color:var(--gold-500)}

/* Primary button gets a moving sheen + gold ring on the dark hero. */
.hero-home.is-cinematic .btn-primary{position:relative;overflow:hidden}
.hero-home.is-cinematic .btn-primary::after{
  content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:none;
}
.hero-home.is-cinematic .btn-primary:hover::after{
  animation:zbif-sheen .9s ease;
}
@keyframes zbif-sheen{from{left:-140%}to{left:140%}}

.hero-home.is-cinematic .btn-outline{
  color:#fff;border-color:rgba(255,255,255,.35);
}
.hero-home.is-cinematic .btn-outline:hover{
  border-color:var(--gold-500);color:var(--gold-500);background:rgba(212,175,55,.08);
}

/* Scroll cue at the base of the hero. */
.hero-scroll-cue{
  position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);
  z-index:3;display:grid;place-items:center;gap:.4rem;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(226,232,242,.5);pointer-events:none;
}
.hero-scroll-cue span{width:1px;height:34px;background:linear-gradient(rgba(212,175,55,.9),transparent);
  animation:zbif-cue 1.8s var(--ease) infinite}
@keyframes zbif-cue{0%{transform:scaleY(.2);transform-origin:top;opacity:0}
  40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}

/* ======================= Section-level polish ========================= */
/* Slightly richer card hover; complements existing styles, no override risk. */
.glance-card,.process-card,.involve-card{
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.glance-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(212,175,55,.4)}
.process-card:hover{border-color:rgba(212,175,55,.35)}

/* GSAP handles [data-gsap] entrances; give a graceful no-JS/reduced fallback. */
@media (prefers-reduced-motion:reduce){
  .hero-home.is-cinematic [data-hero]{opacity:1!important;transform:none!important}
  .hero-scroll-cue{display:none}
}
/* If JS/GSAP never runs, ensure hero content is visible (opacity set only by JS). */
.no-js .hero-home.is-cinematic [data-hero]{opacity:1!important}

@media (max-width:720px){
  .hero-home.is-cinematic{padding-top:clamp(3rem,12vw,4.5rem)}
  .hero-scroll-cue{display:none}
}