/* ============================================================
   TEAM EQUIPMENT — FLAGSHIP LAYER
   Experiential upgrades (smooth scroll, intro, signature moments,
   micro-interactions). Kept separate from style.css so the whole
   revamp can be toggled/reverted by removing this file + flagship.js.
   ============================================================ */

/* ---- Lenis smooth scroll plumbing ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ============================================================
   INTRO / PRELOADER  ("systems check")
   ============================================================ */
#preloader{
  position:fixed;inset:0;z-index:2000;background:var(--dark);
  display:grid;place-items:center;
  /* safety net: if JS never runs, reveal the site after 4s */
  animation:plFail 0s linear 4s forwards;
}
#preloader::after{ /* faint steel texture, matches dark bands */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 30px),
    radial-gradient(700px 500px at 50% 42%,rgba(194,36,28,.14),transparent 65%);
}
#preloader .pl-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:20px;width:min(320px,72vw)}
#preloader .pl-logo{height:44px;width:auto;opacity:0;transform:translateY(8px);animation:plLogo .7s var(--ease,cubic-bezier(.22,.61,.36,1)) .1s forwards}
#preloader .pl-bar{position:relative;width:100%;height:2px;background:rgba(255,255,255,.14);overflow:hidden;border-radius:2px}
#preloader .pl-bar span{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--thermal,#C2241C);animation:plBar 1.35s cubic-bezier(.5,.02,.2,1) .25s forwards}
#preloader .pl-status{font-family:var(--ff-mono,sans-serif);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.5)}
#preloader .pl-status::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:#FF5A28;vertical-align:middle;animation:plPulse 1s ease-in-out infinite}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility .6s ease}
@keyframes plLogo{to{opacity:1;transform:none}}
@keyframes plBar{to{transform:scaleX(1)}}
@keyframes plPulse{50%{opacity:.25}}
@keyframes plFail{to{opacity:0;visibility:hidden;pointer-events:none}}
@media(prefers-reduced-motion:reduce){
  #preloader{animation:none;opacity:0;visibility:hidden;pointer-events:none}
  #preloader .pl-logo,#preloader .pl-bar span{animation:none}
}

/* ============================================================
   MAGNETIC BUTTONS  (subtle pull toward cursor)
   ============================================================ */
.btn.is-magnetic{will-change:transform}
@media(hover:none){ .btn.is-magnetic{transform:none!important} }

/* ============================================================
   HERO THERMAL LENS  (cursor = FLIR camera)
   ============================================================ */
/* hero background video (poster shows instantly; canvas renders it once WebGL is up) */
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(1.12) saturate(1.08) contrast(1.03)}
.hero-thermal{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;filter:brightness(1.1) saturate(1.06)}
/* mobile only: keep the firefighter (right side of the frame) in view when the
   hero image cover-crops on narrow screens. Desktop framing is unchanged. */
@media(max-width:640px){.hero-media img{object-position:68% center}}

/* ============================================================
   FLIR "SEE THROUGH SMOKE" REVEAL CHAPTER
   ============================================================ */
.flir-reveal{position:relative;height:230vh;background:var(--dark)}
.fr-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.fr-stage{position:absolute;inset:0}
.fr-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fr-normal{filter:brightness(1.05) contrast(1.02)}
.fr-thermal-wrap{position:absolute;inset:0;clip-path:inset(0 100% 0 0);will-change:clip-path}
.fr-thermal{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.08) saturate(1.15)}
.fr-scan{position:absolute;top:0;bottom:0;left:0;width:2px;transform:translateX(-1px);background:linear-gradient(180deg,transparent,rgba(255,120,40,.95) 20%,rgba(255,180,90,1) 50%,rgba(255,120,40,.95) 80%,transparent);box-shadow:0 0 28px 7px rgba(255,90,30,.5);opacity:0;mix-blend-mode:screen;z-index:2}
.fr-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%,transparent 55%,rgba(10,11,13,.72) 100%)}
.fr-caption{position:absolute;left:0;right:0;bottom:13%;text-align:center;padding:0 24px;z-index:3;pointer-events:none}
.fr-caption .eyebrow{justify-content:center;color:rgba(255,255,255,.85)}
.fr-caption .eyebrow::before{background:rgba(255,255,255,.6)}
.fr-caption h2{color:#fff;font-size:clamp(2.4rem,6.2vw,5rem);margin-top:14px;text-shadow:0 3px 30px rgba(0,0,0,.7)}
.fr-cap-2{opacity:0}
.fr-cap-2 .eyebrow{color:#FF8A3C}
.fr-cap-2 .eyebrow::before{background:#FF8A3C}
.fr-hint{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:9px;pointer-events:none}
.fr-hint svg{width:16px;height:16px;animation:frHint 1.8s ease-in-out infinite}
@keyframes frHint{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}

/* reduced-motion / no-scroll fallback: a clean static split, message intact */
@media(prefers-reduced-motion:reduce){
  .flir-reveal{height:auto}
  .fr-sticky{position:relative;height:auto}
  .fr-stage{position:relative;height:78vh}
  .fr-thermal-wrap{clip-path:inset(0 0 0 50%)}
  .fr-scan{left:50%;opacity:1}
  .fr-cap-1{opacity:0}
  .fr-cap-2{opacity:1}
  .fr-hint{display:none}
}
@media(max-width:620px){
  .flir-reveal{height:200vh}
  .fr-caption{bottom:16%}
}

/* ============================================================
   PAGE TRANSITIONS (native cross-document View Transitions)
   ============================================================ */
@view-transition{ navigation: auto; }
@media(prefers-reduced-motion:no-preference){
  /* thermal scan-in: the next page acquires top-to-bottom like a FLIR sweep */
  ::view-transition-old(root){animation:vtOut .3s ease both}
  ::view-transition-new(root){animation:vtScan .52s cubic-bezier(.4,0,.15,1) both}
  @keyframes vtOut{to{opacity:0;transform:scale(1.01)}}
  @keyframes vtScan{from{clip-path:inset(0 0 100% 0);opacity:.55}to{clip-path:inset(0 0 0 0);opacity:1}}
}

/* ============================================================
   INDUSTRIAL GRIT LAYER
   ============================================================ */

/* film grain / grit over the whole site (static, no blend — cheap to composite) */
.grain{position:fixed;inset:0;z-index:1500;pointer-events:none;opacity:.035;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px}

/* every section label gets a hazard-stripe stamp instead of a plain tick */
.eyebrow::before{width:22px!important;height:9px!important;background:repeating-linear-gradient(-45deg,var(--ember) 0 3px,var(--ink) 3px 6px)!important;opacity:.92!important}
/* keep it legible on dark bands (stripe of white + ember) */
.hero-eyebrow::before,.flir-spot .eyebrow::before,.fr-caption .eyebrow::before,.page-hero.ph-dark .eyebrow::before,.cta-inner .eyebrow::before{background:repeating-linear-gradient(-45deg,var(--ember) 0 3px,#fff 3px 6px)!important}

/* machined bolt rivets on the close-out tags (bolted metal price plates) */
.co-card::after{content:"";position:absolute;inset:6px;pointer-events:none;z-index:2;
  background:
    radial-gradient(circle 3px at 6px 6px, rgba(255,255,255,.6), rgba(28,26,22,.5) 58%, transparent 74%),
    radial-gradient(circle 3px at calc(100% - 6px) 6px, rgba(255,255,255,.6), rgba(28,26,22,.5) 58%, transparent 74%),
    radial-gradient(circle 3px at 6px calc(100% - 6px), rgba(255,255,255,.6), rgba(28,26,22,.5) 58%, transparent 74%),
    radial-gradient(circle 3px at calc(100% - 6px) calc(100% - 6px), rgba(255,255,255,.6), rgba(28,26,22,.5) 58%, transparent 74%);
  background-repeat:no-repeat}

/* ============================================================
   REVEAL POLISH
   ============================================================ */
.fx-lines>*{opacity:0;transform:translateY(18px)}
html.no-js .fx-lines>*{opacity:1;transform:none}

/* ============================================================
   CRAFT POLISH  (native scroll-driven, zero JS hijack)
   ============================================================ */

/* thermal scan-line scroll-progress meter, top of viewport.
   Pure CSS scroll timeline: fills as you scroll, no library, no scroll hijack.
   Degrades to invisible (scaleX 0) where animation-timeline is unsupported. */
.scroll-scan{position:fixed;top:0;left:0;right:0;height:3px;z-index:1600;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#C2241C 0%,#FF5A28 55%,#FFB25A 100%);
  box-shadow:0 0 10px rgba(255,90,40,.55)}
@supports (animation-timeline: scroll()){
  .scroll-scan{animation:scanGrow linear both;animation-timeline:scroll(root)}
  @keyframes scanGrow{to{transform:scaleX(1)}}
}

/* tabular figures so stats/prices line up like an instrument readout */
.hstat b,.vc-num,.co-price,.pc-price,.fs-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}