/* ============================================================
   TORQ — advanced motion styles (Apple-style scroll pins + hero HUD).
   Loads AFTER torq-site.css. Transforms are driven by --p / --hp set
   in torq-anim.js. Base styles are the final, fully-visible state so
   print / no-JS / reduced-motion always look correct; the animated
   states only switch on under html.anim-ready + motion preference.
   ============================================================ */

/* ---------- HERO: live 6-axis monitor (motorsport HUD) ---------- */
.hud-mon{
  position:absolute;right:var(--edge);bottom:26px;z-index:3;
  display:flex;align-items:center;gap:13px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(245,245,243,.52);
}
.hud-mon__dot{width:6px;height:6px;border-radius:50%;background:var(--accent-bright);box-shadow:0 0 10px var(--accent-bright)}
.hud-mon__bars{display:flex;align-items:flex-end;gap:4px;height:30px}
.hud-mon__bars i{
  display:block;width:3px;height:100%;border-radius:2px;transform-origin:bottom;transform:scaleY(.28);
  background:linear-gradient(180deg,var(--accent-bright),color-mix(in srgb,var(--accent-bright) 22%,transparent));
}
@media(prefers-reduced-motion:no-preference){
  html.anim-ready .hud-mon__dot{animation:hudPulse 1.6s var(--ease) infinite}
  html.anim-ready .hud-mon__bars i{animation:axOsc 1.9s ease-in-out infinite}
  html.anim-ready .hud-mon__bars i:nth-child(1){animation-duration:1.7s;animation-delay:-.30s}
  html.anim-ready .hud-mon__bars i:nth-child(2){animation-duration:2.3s;animation-delay:-.80s}
  html.anim-ready .hud-mon__bars i:nth-child(3){animation-duration:1.5s;animation-delay:-.10s}
  html.anim-ready .hud-mon__bars i:nth-child(4){animation-duration:2.6s;animation-delay:-.55s}
  html.anim-ready .hud-mon__bars i:nth-child(5){animation-duration:1.9s;animation-delay:-1.1s}
  html.anim-ready .hud-mon__bars i:nth-child(6){animation-duration:2.1s;animation-delay:-.40s}
}
@keyframes axOsc{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}
@keyframes hudPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media(max-width:760px){ .hud-mon{display:none} }
.phero__price{white-space:nowrap}

/* ---------- HERO: gentle on-load lift for the monitor ---------- */
@media(prefers-reduced-motion:no-preference){
  html.anim-ready .hud-mon{animation:hudRise 1s var(--ease) .7s both}
}
@keyframes hudRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- 6DOF PRODUCT REVEAL ---------- */
.prodpin{position:relative;background:#f2f2f0;color:#15171a;padding:clamp(72px,10vw,150px) 0;overflow:hidden}
.prodpin__sticky{position:static;display:block}
.prodpin__inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--edge);
  display:flex;flex-direction:column;align-items:center;gap:clamp(22px,3vw,40px);
}
.prodpin__eye{font-family:var(--f-mono);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin:0;width:100%;text-align:center}
.prodpin__title{
  font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:-.015em;
  font-size:clamp(40px,6vw,88px);line-height:.92;text-align:center;margin:0;width:100%;
}
.prodpin__stage{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:
    "l1 img r1"
    "l2 img r2"
    "l3 img r3";
  align-items:start;
  column-gap:clamp(18px,3.5vw,64px);
  row-gap:clamp(20px,3.2vh,38px);
  width:100%;
}
.prodpin__imgwrap{grid-area:img;align-self:center;justify-self:center;display:block;will-change:transform,opacity}
.prodpin__img{height:clamp(400px,70vh,760px);width:auto;object-fit:contain;display:block;transform-origin:center center}
.ax2{display:flex;flex-direction:column;gap:4px}
.a-l1{grid-area:l1}.a-l2{grid-area:l2}.a-l3{grid-area:l3}
.a-r1{grid-area:r1}.a-r2{grid-area:r2}.a-r3{grid-area:r3}
.a-l1,.a-l2,.a-l3{align-items:flex-end;text-align:right;--rxh:-34px}
.a-r1,.a-r2,.a-r3{align-items:flex-start;text-align:left;--rxh:34px}
.ax2 i{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-style:normal;display:block;margin-bottom:4px;white-space:nowrap}
.ax2 b{font-family:var(--f-display);font-size:clamp(26px,2.6vw,40px);font-weight:600;text-transform:uppercase;line-height:.95;display:inline-block;white-space:nowrap}
.ax2 b small{font-size:.5em;font-weight:400;color:rgba(21,23,26,.5);font-family:var(--f-mono);margin-left:8px;letter-spacing:.02em;text-transform:none;white-space:nowrap}
.ax2 em{font-family:var(--f-mono);font-size:11px;color:rgba(21,23,26,.46);font-style:normal;letter-spacing:.04em;display:block;margin-top:6px;line-height:1.7;white-space:pre-line}
.prodpin__cap{
  font-family:var(--f-display);font-weight:500;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(20px,2.8vw,42px);line-height:1;text-align:center;margin:0;color:#15171a;width:100%;
}

@media(max-width:860px){
  .prodpin__stage{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "img img"
      "l1 r1"
      "l2 r2"
      "l3 r3";
    column-gap:clamp(16px,4vw,34px);
    row-gap:clamp(18px,4vw,28px);
  }
  .a-l1,.a-l2,.a-l3,.a-r1,.a-r2,.a-r3{align-items:flex-start;text-align:left}
  .prodpin__imgwrap{margin-bottom:clamp(6px,2vw,18px)}
  .prodpin__img{height:52vh;min-height:340px;max-height:540px}
  .ax2 i{white-space:nowrap;font-size:10px;letter-spacing:.08em}
  .ax2 b{font-size:clamp(19px,5.2vw,24px)}
  .ax2 b small{display:block;margin-left:0;margin-top:2px}
  .ax2 em{font-size:10.5px;line-height:1.6}
}

/* per-element scroll-linked reveal: each element animates in based on its OWN
   position in the viewport (torq-anim.js toggles .in via IntersectionObserver),
   so slow scrolling reveals the axes progressively (Surge/Pitch → Sway/Roll →
   Heave/Yaw) instead of all at once. Axes combine reveal (--rx side offset) and
   parallax (--sp drift) in a single transform; title/cap fade only. */
@media(prefers-reduced-motion:no-preference){
  html.anim-ready .prodpin [data-rise]{
    transition:opacity .7s var(--ease), transform .8s var(--ease);will-change:opacity,transform;
  }
  html.anim-ready .prodpin__eye[data-rise]{opacity:0;transform:translateY(16px)}
  html.anim-ready .prodpin__title[data-rise]{opacity:0}
  html.anim-ready .prodpin__cap[data-rise]{opacity:0}
  html.anim-ready .prodpin__imgwrap[data-rise]{opacity:0;transform:scale(1.1)}

  html.anim-ready .prodpin__eye[data-rise].in{opacity:1;transform:none}
  html.anim-ready .prodpin__title[data-rise].in{opacity:1}
  html.anim-ready .prodpin__cap[data-rise].in{opacity:1}
  html.anim-ready .prodpin__imgwrap[data-rise].in{opacity:1;transform:none}

  /* axes: reveal slides in from the side (--rx), parallax drifts vertically (--sp) */
  html.anim-ready .ax2[data-rise]{
    --rx:var(--rxh,0px);opacity:0;
    transform:translate3d(var(--rx),calc(var(--sp,0) * 22px),0);
    transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .7s var(--ease);
  }
  html.anim-ready .ax2[data-rise].in{--rx:0px;opacity:1}

  @media(max-width:860px){
    html.anim-ready .ax2[data-rise]{--rxh:0px;transform:translate3d(0,calc(18px + var(--sp,0) * 16px),0)}
    html.anim-ready .ax2[data-rise].in{transform:translate3d(0,calc(var(--sp,0) * 16px),0)}
  }
}

/* gentle scroll-linked parallax (Apple-style depth, --sp set in torq-anim.js).
   Image floats up; axes drift down (in the reveal rule above); title/cap drift
   subtly. Image and axes move opposite for depth. */
@media(prefers-reduced-motion:no-preference){
  html.anim-ready .prodpin__img{
    transform:translate3d(0,calc(var(--sp,0) * -26px),0) scale(calc(1.04 + var(--sp,0) * 0.1));
    transition:transform .3s cubic-bezier(.22,.61,.36,1);will-change:transform;
  }
  html.anim-ready .prodpin__title{
    transform:translate3d(0,calc(var(--sp,0) * 10px),0);transition:transform .5s cubic-bezier(.22,.61,.36,1);
  }
  html.anim-ready .prodpin__cap{
    transform:translate3d(0,calc(var(--sp,0) * -8px),0);transition:transform .5s cubic-bezier(.22,.61,.36,1);
  }
}

/* ---------- statement: word-by-word brighten (Apple-style) ---------- */
.statement-lead{
  font-family:var(--f-body);font-weight:500;
  font-size:clamp(24px,3.2vw,46px);line-height:1.25;letter-spacing:-.005em;
  color:var(--fg);max-width:20ch;text-wrap:balance;margin:0;
}
.statement-lead .w{transition:opacity .5s var(--ease)}

/* ---------- statement: turquoise speed WAVES (scroll-linked, --sp), stronger on the left ---------- */
.stmt{position:relative;overflow:hidden}
.stmt > .wrap{position:relative;z-index:1}
.stmt-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* soft turquoise glow anchored to the LEFT, intensifies with scroll */
.stmt-fx::before{
  content:"";position:absolute;inset:-10% 0;left:-10%;width:70%;
  background:radial-gradient(60% 75% at 20% 50%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%);
  opacity:calc(.3 + var(--sp,0) * var(--sp,0) * .5);
  transform:translateX(calc(var(--sp,0) * -50px));
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.stmt-waves{
  position:absolute;inset:0;width:100%;height:100%;
}
.stmt-shift{
  transform:translate3d(calc(var(--sp,0) * -70px),0,0);
  transition:transform .35s var(--ease);will-change:transform;
}
.stmt-waves .tr{
  fill:none;stroke:url(#stmtWaveGrad);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
/* hero "reference" lap: starts identical to the others, then stands out as you
   scroll down — same gradient, but width grows, opacity rises and a turquoise
   glow + brightness ramp in (all driven by --sp via the section). */
.stmt-waves .tr--hero{
  stroke:url(#stmtWaveGrad);
  stroke-width:calc(1.4px + (var(--sp,0) + 1) * 0.75px);
  opacity:calc(0.6 + (var(--sp,0) + 1) * 0.2);
  filter:drop-shadow(0 0 calc((var(--sp,0) + 1) * 3px) rgba(47,240,230,calc((var(--sp,0) + 1) * 0.32)))
         saturate(calc(1 + (var(--sp,0) + 1) * 0.5))
         brightness(calc(1 + (var(--sp,0) + 1) * 0.28));
  transition:stroke-width .35s var(--ease), opacity .35s var(--ease), filter .35s var(--ease);
}
.stmt-grid line{stroke:url(#stmtGridGrad);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:2 8}
/* subtle "data streaming" sway, layered on top of the scroll shift */
@media(prefers-reduced-motion:no-preference){
  html.anim-ready .stmt-waves .tr{animation:teleScan 8s ease-in-out infinite alternate;animation-delay:var(--ph,0s)}
}
@keyframes teleScan{from{transform:translateX(0)}to{transform:translateX(-18px)}}
@media(prefers-reduced-motion:reduce){ .stmt-waves{opacity:.55} }

/* ---------- two-tier pricing ---------- */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media(max-width:760px){ .tiers{grid-template-columns:1fr} }
.tier{
  position:relative;display:flex;flex-direction:column;gap:14px;
  padding:clamp(28px,3vw,46px);border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);overflow:hidden;transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s;
}
.tier:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.tier--feat{background:color-mix(in srgb,var(--accent) 7%,var(--card));border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}
.tier .eyebrow{margin:0}
.tier__price{
  font-family:var(--f-display);font-size:clamp(34px,4vw,54px);font-weight:600;line-height:1;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.tier__price small{font-size:.26em;font-weight:400;color:var(--fg-faint);font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tier__desc{font-size:15px;color:var(--fg-dim);margin:0;max-width:42ch;line-height:1.5;flex:1}
.tier .pillar__link{color:var(--accent)}
.tier:hover .pillar__link i{transform:translateX(4px)}