/* NEHILIM Marketing — "Golden-Hour Autonomy" elevation layer (T1: zero new deps).
   Builds ON TOP of tokens/layout/components. Cinematic video hero, warm single-
   light art direction, scroll-driven line-draw, CSS-only micro-interactions.
   Every effect is progressive enhancement: reduced-motion + no-JS degrade to the
   existing static, accessible baseline. No external request, no CDN. */

:root{
  /* Golden-hour world: warm sun glow -> amber -> deep twilight navy. */
  --gh-sun:radial-gradient(120% 130% at 28% -8%,rgba(255,217,138,.45) 0%,rgba(245,166,35,.28) 26%,rgba(212,138,20,.10) 46%,transparent 66%);
  --gh-twilight:linear-gradient(168deg,#12263c 0%,#0d1b2a 46%,#060e16 100%);
  --gh-glow:radial-gradient(90% 120% at 26% 0%,rgba(245,166,35,.20),transparent 58%);
  /* Self-contained film grain (SVG turbulence, no asset). */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ============================ Cinematic hero ============================ */
.hero{position:relative;isolation:isolate;min-height:clamp(540px,80vh,752px);display:flex;align-items:center;
  padding-block:clamp(3rem,7vw,5rem);color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;
  /* golden-hour poster as an always-present background (LCP-safe, reduced-motion
     fallback), with the twilight gradient beneath if the still ever fails. */
  background:image-set(url("../assets/img/hero-poster.avif") type("image/avif"),
             url("../assets/img/hero-poster.webp") type("image/webp")) center/cover no-repeat,
             var(--gh-twilight)}
.hero__bg::after{content:"";position:absolute;inset:0;background:var(--grain);background-size:180px;
  opacity:.06;mix-blend-mode:soft-light;pointer-events:none}
/* Video sits on the still and fades in once it actually plays (no black flash,
   no duplicate poster fetch). Pre-play / reduced-motion → the .hero__bg still shows. */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:0;transition:opacity .9s ease}
.hero.is-video-on .hero__video{opacity:1}
/* Scrim: warm-dark on the left for headline contrast (WCAG); the golden-hour scene
   breathes on the right. Soft bottom fade into the stats band. */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(6,12,20,.93) 0%,rgba(6,12,20,.66) 34%,rgba(6,12,20,.20) 62%,rgba(6,12,20,.30) 100%),
    linear-gradient(to top,rgba(6,12,20,.72) 0%,transparent 44%),
    var(--gh-sun)}
/* Single confident cinematic idea: headline overlaid left over the full-bleed scene. */
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,640px);
  justify-content:start;align-items:center;width:100%}
.hero__copy{max-width:640px}
.hero__eyebrow{background:rgba(245,166,35,.14);border-color:rgba(245,166,35,.35)}
.hero__title{text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero__sub{color:rgba(255,255,255,.82)}

/* Signature Three.js particle-swarm accent: sits above the poster/video (z0) but
   below the scrim (z1) so left-side headline contrast is never reduced. Static
   poster / no-WebGL / reduced-motion → this canvas simply stays empty. */
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Signature amber flight-path line drawing across the hero (stroke-dashoffset). */
.hero__path{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.9}
.hero__path path{stroke-dasharray:1;stroke-dashoffset:0}
.js .hero__path path{stroke-dashoffset:1}
@media (prefers-reduced-motion:no-preference){
  .js .hero__path path{animation:gh-draw 2.6s .35s cubic-bezier(.22,.61,.36,1) forwards}
}
@keyframes gh-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.js .hero__path path{stroke-dashoffset:0}}
/* When GSAP is live it drives the flight-path via DrawSVG — retire the CSS keyframe
   so the two don't fight (wow.js adds .gh-gsap to <html> once GSAP has loaded). */
.gh-gsap .hero__path path{animation:none!important}
/* SplitText word wrappers: inline-block so the transform reveal works. No CLS —
   SplitText only wraps existing words, it doesn't reflow the headline. */
.gh-word{display:inline-block;will-change:transform}

@media (max-width:900px){
  .hero{text-align:center}
  .hero__inner{grid-template-columns:1fr;justify-content:stretch}
  .hero__copy{max-width:100%;margin-inline:auto}
  .hero__eyebrow{margin-inline:auto}
  .hero__sub{margin-inline:auto}
  .hero__ctas{justify-content:center}
  .hero__scrim{background:linear-gradient(to top,rgba(6,12,20,.9) 0%,rgba(6,12,20,.55) 55%,rgba(6,12,20,.78) 100%),var(--gh-sun)}
}

/* ===================== Golden-hour on the dark sections ===================== */
.page-hero,.cta-strip{position:relative;overflow:hidden}
.page-hero::before,.cta-strip::before{content:"";position:absolute;inset:0;background:var(--gh-glow);pointer-events:none;z-index:0}
.page-hero::after,.cta-strip::after{content:"";position:absolute;inset:0;background:var(--grain);background-size:180px;
  opacity:.05;mix-blend-mode:soft-light;pointer-events:none;z-index:0}
.page-hero>*,.cta-strip>*{position:relative;z-index:1}
.page-hero h1{text-wrap:balance}

/* Footer: faint grain + slow amber shimmer hairline at the top edge. */
.footer{position:relative}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,166,35,.5),transparent);background-size:220% 100%}
@media (prefers-reduced-motion:no-preference){.footer::before{animation:gh-shimmer 9s linear infinite}}
@keyframes gh-shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* Restrained warm grain on light surface sections for cinematic depth. */
.section--surface{position:relative}
.section--surface>.container{position:relative;z-index:1}

/* ===================== How-it-works connector line-draw ===================== */
.steps{position:relative}
.steps__line{position:absolute;top:50px;left:16.66%;right:16.66%;height:40px;z-index:0;pointer-events:none}
.steps__line path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.55}
.js .steps__line path{stroke-dashoffset:1;transition:stroke-dashoffset 1.5s ease}
.js .steps.is-drawn .steps__line path{stroke-dashoffset:0}
.steps>.step{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.js .steps__line path{stroke-dashoffset:0;transition:none}}
@media (max-width:900px){.steps__line{display:none}}

/* ===================== Scroll-driven crisis -> answer scrub ===================== */
/* Media warms + settles as it enters view. Chromium/Safari only; Firefox = static. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .split__media img{animation:gh-warm linear both;animation-timeline:view();animation-range:entry 8% cover 42%}
    @keyframes gh-warm{from{filter:saturate(.72) brightness(.92);transform:scale(1.045)}
      to{filter:saturate(1.05) brightness(1);transform:scale(1)}}
  }
}

/* ===================== Signature micro-interactions (CSS only) ===================== */
/* Magnetic-feel primary CTA: warm glow + light sweep + lift. */
.btn--primary{position:relative;overflow:hidden;box-shadow:0 6px 22px rgba(245,166,35,.28)}
.btn--primary::after{content:"";position:absolute;top:0;left:0;width:60%;height:100%;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);
  transform:translateX(-160%) skewX(-12deg);transition:transform .7s ease;pointer-events:none}
.btn--primary:hover{box-shadow:0 12px 34px rgba(245,166,35,.5)}
.btn--primary:hover::after{transform:translateX(320%) skewX(-12deg)}
/* Idle breathing glow only on the hero primary, gated. */
@media (prefers-reduced-motion:no-preference){
  .hero__ctas .btn--primary{animation:gh-pulse 3.4s ease-in-out infinite}
  @keyframes gh-pulse{0%,100%{box-shadow:0 6px 22px rgba(245,166,35,.30)}50%{box-shadow:0 10px 30px rgba(245,166,35,.5)}}
  .hero__ctas .btn--primary:hover{animation:none}
}
@media (prefers-reduced-motion:reduce){.btn--primary::after{display:none}}

/* Nav links: underline grows from the left on hover/focus + marks current page. */
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);
  border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .26s ease}
.nav__links a:hover::after,.nav__links a:focus-visible::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}

/* Feature / step cards: warm lift accent. */
.feature:hover{box-shadow:0 16px 42px rgba(9,17,28,.16),0 0 0 1px rgba(245,166,35,.25)}
.inline-link,.split__text .inline-link{background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s ease}
.inline-link:hover{background-size:100% 2px}

@media (prefers-reduced-motion:reduce){
  .hero__accent img,.footer::before,.hero__ctas .btn--primary{animation:none}
}