/* ============================================================
   TURBULENT — MOTION LAYER
   Additive. Every effect is removed under prefers-reduced-motion.
   ============================================================ */

/* ---------- scroll progress ---------- */
.sprog{position:fixed;top:68px;left:0;height:1px;width:0;z-index:51;
  background:var(--signal);transition:width .1s linear;pointer-events:none}

/* ---------- staggered reveal ---------- */
.reveal.stagger > *{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.stagger.in > *{opacity:1;transform:none}
.reveal.stagger.in > *:nth-child(1){transition-delay:.02s}
.reveal.stagger.in > *:nth-child(2){transition-delay:.09s}
.reveal.stagger.in > *:nth-child(3){transition-delay:.16s}
.reveal.stagger.in > *:nth-child(4){transition-delay:.23s}
.reveal.stagger.in > *:nth-child(5){transition-delay:.30s}
.reveal.stagger.in > *:nth-child(6){transition-delay:.37s}

/* ---------- section index ---------- */
.shead{align-items:flex-end}
.sx{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  color:var(--fg-3);margin-bottom:16px}
.sx::after{content:'';display:inline-block;width:0;height:1px;background:var(--line-2);
  vertical-align:middle;margin-left:14px;transition:width .9s cubic-bezier(.2,.7,.3,1) .15s}
.reveal.in .sx::after,section.in .sx::after{width:clamp(40px,7vw,110px)}

/* ---------- hero life ---------- */
.ihero-frame::before{animation:gdrift 40s linear infinite}
@keyframes gdrift{to{background-position:0 0,0 0,0 64px,64px 0}}

.ihero-art img{animation:afloat 11s ease-in-out infinite;will-change:transform}
@keyframes afloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.scan{position:absolute;left:0;right:0;top:0;height:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(198,80,30,.55),transparent);
  animation:scanmv 7s cubic-bezier(.5,0,.5,1) infinite}
@keyframes scanmv{0%{top:-2%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:102%;opacity:0}}

.corner{position:absolute;width:18px;height:18px;z-index:3;pointer-events:none;
  border:0 solid var(--line-2)}
.corner.tl{top:14px;left:14px;border-top-width:1px;border-left-width:1px}
.corner.tr{top:14px;right:14px;border-top-width:1px;border-right-width:1px}
.corner.bl{bottom:14px;left:14px;border-bottom-width:1px;border-left-width:1px}
.corner.br{bottom:14px;right:14px;border-bottom-width:1px;border-right-width:1px}

/* ---------- figures ---------- */
.specgrid .s{transition:background .25s,transform .35s cubic-bezier(.2,.7,.3,1)}
.specgrid .s:hover{background:var(--ink-3)}
.specgrid .s b{font-variant-numeric:tabular-nums}
.specgrid .s::after{content:'';display:block;width:0;height:1px;background:var(--signal);
  margin-top:16px;transition:width .5s cubic-bezier(.2,.7,.3,1)}
.specgrid .s:hover::after{width:34px}

/* ---------- layer list ---------- */
.stack .layer{position:relative;overflow:hidden}
.stack .layer::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--signal);transform:scaleY(0);transform-origin:top;
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.stack .layer:hover::before{transform:scaleY(1)}

/* ---------- capability blocks ---------- */
.cap{position:relative;transition:background .25s}
.cap:hover{background:var(--ink-3)}
.cap::before{content:'';position:absolute;top:0;left:0;width:0;height:1px;
  background:var(--signal);transition:width .4s cubic-bezier(.2,.7,.3,1)}
.cap:hover::before{width:100%}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;transition:background .25s,color .25s}
.btn.ghost::after{content:'';position:absolute;inset:0;background:var(--fg);
  transform:translateY(101%);transition:transform .3s cubic-bezier(.2,.7,.3,1);z-index:-1}

/* ---------- status ticker ---------- */
.tick{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:0;background:var(--ink-2)}
.tick-row{display:flex;gap:0;width:max-content;animation:tkr 46s linear infinite}
.tick:hover .tick-row{animation-play-state:paused}
.tick span{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fg-3);padding:16px 32px;white-space:nowrap;display:flex;align-items:center;gap:14px}
.tick span i{width:4px;height:4px;background:var(--line-2);display:block;flex:none}
.tick span.on i{background:var(--signal)}
.tick span.on{color:var(--fg-2)}
@keyframes tkr{to{transform:translateX(-50%)}}

/* ---------- media reveal ---------- */
.media--plain img{transition:transform .8s cubic-bezier(.2,.7,.3,1),opacity .8s}
.reveal .media--plain img{opacity:0;transform:scale(.985)}
.reveal.in .media--plain img{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .sprog,.scan{display:none}
  .ihero-frame::before,.ihero-art img,.tick-row{animation:none!important}
  .reveal.stagger > *{opacity:1;transform:none;transition:none}
  .sx::after{width:clamp(40px,7vw,110px);transition:none}
  .reveal .media--plain img{opacity:1;transform:none}
}

/* ---------- specification figures ----------
   style.css styles ANY span inside .specgrid .s as the small mono label.
   The count-up number is also a span, so it must opt back out. */
.specgrid .s b{font-size:clamp(24px,3.4vw,44px);line-height:1;display:block}
.specgrid .s b span{display:inline;margin:0;font-family:inherit;font-size:inherit;
  letter-spacing:inherit;text-transform:none;color:inherit}
.specgrid .s{padding:30px 24px 26px}
.specgrid .s > span{margin-top:14px}

/* larger comparison figures on the product page */
.cmp td{font-size:clamp(15px,1.8vw,21px)}

/* ============================================================
   SPLASH — first visit of a session, home page only.
   Injected by an inline head script so it never flashes over painted
   content, and never exists at all without JS. The lockup is the real
   .wm .mark markup, so it can fly into the nav position and land exactly
   on top of the real one.
   ============================================================ */
/* armed synchronously in <head>, before <body> exists, so the real page
   never paints before the splash does; released once the splash removes
   itself in finish() */
html.splash-armed body{visibility:hidden}
html.splash-armed .splash{visibility:visible}

.splash{position:fixed;inset:0;z-index:9999;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .38s ease}
.splash.out{opacity:0;pointer-events:none}

.splash-lock{line-height:1}
.splash-lock .wm{font-size:clamp(30px,6vw,58px);color:var(--fg);display:inline-flex;
  transform-origin:0 0;will-change:transform}
.splash-lock .glyph i{opacity:0;transform:translateX(-30px)}
.splash-lock .glyph i:nth-child(1){animation:spStep .38s cubic-bezier(.2,.7,.3,1) .04s forwards}
.splash-lock .glyph i:nth-child(2){animation:spStep .38s cubic-bezier(.2,.7,.3,1) .16s forwards}
.splash-lock .glyph i:nth-child(3){animation:spStep .38s cubic-bezier(.2,.7,.3,1) .28s forwards}
@keyframes spStep{to{opacity:1;transform:none}}

.splash-lock .txt{opacity:0;animation:spWord .4s ease .46s forwards}
@keyframes spWord{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* the flight into the nav */
.splash.fly{background:transparent;transition:background .5s ease}
.splash-veil{position:fixed;inset:0;background:var(--ink);z-index:-1;
  transition:opacity .5s ease}
.splash.fly .splash-veil{opacity:0}

/* hide the real nav wordmark until the flying one lands on it */
html.splash-flying .tnav .wm{opacity:0}

@media(prefers-reduced-motion:reduce){.splash{display:none}}