/* TRIAG FX — "video game feel", ported from the Glass dashboard (praxis-web-landing/src, read only) to plain CSS.
   Sources: styles.css  (fx-react "toon pop" + .fx-burst, .triag-cursor-grid / .triag-cursor-reticle, DEPLOY-logo
   .dh-glitch "turbo" glitch), glass-ui-pass.css (x1.18 hover numbers). Transform / opacity / clip-path only for motion.
   No reduced-motion opt-out (owner's call). Everything here is decorative: pointer-events none, aria-hidden layers. */
:root{
  --fx-spring:cubic-bezier(.34,1.56,.64,1);
  --fx-press:cubic-bezier(.3,0,.6,1);
  --cable-or:#d9691f; --cable-bl:#2f72c4; --cable-gr:#2f9a4c;
}

/* ---------- 1. Logo glitch (Glass .dh-glitch: chroma ghosts + 3 slices + tracking line), short one-shot burst ---------- */
.logo-fx{display:flex;flex-direction:column;align-items:center}
.gl{position:relative;display:inline-block;line-height:0;isolation:isolate}
.gl > img{position:relative;z-index:0}
.gl--tree{animation:float 6s ease-in-out infinite;margin-bottom:-6px}
.gl--tree .ttree{animation:none;margin-bottom:0}
.dh-glitch{position:absolute;inset:0;pointer-events:none;z-index:1}
.dh-glitch i{position:absolute;inset:0;display:block;opacity:0;will-change:transform,opacity}
.gl--tree .dh-ghost,.gl--tree .dh-track{-webkit-mask:url(/assets/img/ttree-keyed.webp) 0 0/100% 100% no-repeat;mask:url(/assets/img/ttree-keyed.webp) 0 0/100% 100% no-repeat}
.gl--word .dh-ghost,.gl--word .dh-track{-webkit-mask:url(/assets/img/wordmark-keyed.webp) 0 0/100% 100% no-repeat;mask:url(/assets/img/wordmark-keyed.webp) 0 0/100% 100% no-repeat}
.gl--tree .dh-slice{background:url(/assets/img/ttree-keyed.webp) 0 0/100% 100% no-repeat,linear-gradient(90deg,transparent,rgba(244,241,232,.92) 8%,rgba(244,241,232,.92) 92%,transparent)}
.gl--word .dh-slice{background:url(/assets/img/wordmark-keyed.webp) 0 0/100% 100% no-repeat,linear-gradient(90deg,transparent,rgba(244,241,232,.92) 8%,rgba(244,241,232,.92) 92%,transparent)}
.dh-ghost{mix-blend-mode:multiply;transition:opacity 320ms ease,transform 420ms cubic-bezier(.16,1,.3,1)}
.dh-ghost--r{background:#e2412f}
.dh-ghost--c{background:#1aa7c9}
.dh-slice{clip-path:inset(40% 0 58% 0)}
.dh-track{background:linear-gradient(180deg,transparent 0,transparent 46%,rgba(226,65,47,.55) 48.6%,rgba(255,248,228,.95) 50%,rgba(26,167,201,.55) 51.4%,transparent 54%,transparent 100%);
  background-size:100% 240%;background-position:0 100%}
.gl > img{transition:filter 360ms ease}
/* held while hovered (Glass): hairline RGB split + a little contrast */
.logo-fx:hover .gl > img{filter:contrast(1.06) saturate(1.08)}
.logo-fx:hover .dh-ghost{opacity:.42;transition:opacity 140ms ease,transform 420ms cubic-bezier(.16,1,.3,1)}
.logo-fx:hover .dh-ghost--r{transform:translate3d(-1.2px,0,0)}
.logo-fx:hover .dh-ghost--c{transform:translate3d(1.2px,0,0)}
/* the burst (fx.js adds .is-glitch on pointer enter / tap, ~620ms): jitter split + slice shift + one tracking sweep */
.logo-fx.is-glitch .dh-ghost--r{animation:fxg-ghost-r 620ms steps(1,end) 1 both}
.logo-fx.is-glitch .dh-ghost--c{animation:fxg-ghost-c 620ms steps(1,end) 1 both}
.logo-fx.is-glitch .dh-slice--a{animation:fxg-slice-a 620ms cubic-bezier(.22,1,.36,1) 1 both}
.logo-fx.is-glitch .dh-slice--b{animation:fxg-slice-b 620ms cubic-bezier(.22,1,.36,1) 40ms 1 both}
.logo-fx.is-glitch .dh-slice--c{animation:fxg-slice-c 620ms cubic-bezier(.22,1,.36,1) 80ms 1 both}
.logo-fx.is-glitch .dh-track{animation:fxg-track 620ms cubic-bezier(.45,0,.25,1) 1 both}
.logo-fx.is-glitch .gl--word > img{animation:fxg-jolt 620ms steps(1,end) 1}
/* Glass dh-ghost-r/c peaks (3.6px) pushed to a punchier stepped jitter */
@keyframes fxg-ghost-r{0%{opacity:0;transform:translate3d(0,0,0)}8%{opacity:.7;transform:translate3d(-4.5px,.5px,0)}18%{opacity:.6;transform:translate3d(2px,0,0)}
  30%{opacity:.7;transform:translate3d(-3.6px,-.4px,0)}44%{opacity:.55;transform:translate3d(-1px,0,0)}60%{opacity:.6;transform:translate3d(-2.4px,.3px,0)}100%{opacity:.42;transform:translate3d(-1.2px,0,0)}}
@keyframes fxg-ghost-c{0%{opacity:0;transform:translate3d(0,0,0)}8%{opacity:.7;transform:translate3d(4.5px,-.5px,0)}18%{opacity:.6;transform:translate3d(-2px,0,0)}
  30%{opacity:.7;transform:translate3d(3.6px,.4px,0)}44%{opacity:.55;transform:translate3d(1px,0,0)}60%{opacity:.6;transform:translate3d(2.4px,-.3px,0)}100%{opacity:.42;transform:translate3d(1.2px,0,0)}}
/* Glass dh-slice-a/b/c, compressed from a 2.6s loop into one burst */
@keyframes fxg-slice-a{0%{opacity:0;transform:translate3d(0,0,0);clip-path:inset(15% 0 78.5% 0)}12%{opacity:1;transform:translate3d(12px,0,0)}
  28%{opacity:1;transform:translate3d(-8px,0,0);clip-path:inset(17.5% 0 76% 0)}46%{opacity:.85;transform:translate3d(3px,0,0)}64%,100%{opacity:0;transform:translate3d(0,0,0);clip-path:inset(19% 0 74.5% 0)}}
@keyframes fxg-slice-b{0%{opacity:0;transform:translate3d(0,0,0);clip-path:inset(40% 0 55% 0)}12%{opacity:1;transform:translate3d(-12px,0,0)}
  32%{opacity:.9;transform:translate3d(6px,0,0);clip-path:inset(42% 0 53.5% 0)}56%,100%{opacity:0;transform:translate3d(0,0,0);clip-path:inset(43% 0 52.5% 0)}}
@keyframes fxg-slice-c{0%{opacity:0;transform:translate3d(0,0,0);clip-path:inset(62% 0 31% 0)}14%{opacity:1;transform:translate3d(10px,0,0)}
  34%{opacity:.9;transform:translate3d(-5px,0,0);clip-path:inset(64% 0 29.5% 0)}58%,100%{opacity:0;transform:translate3d(0,0,0);clip-path:inset(65% 0 28.5% 0)}}
@keyframes fxg-track{0%{opacity:0;background-position:0 100%}8%{opacity:1}78%{opacity:1}92%,100%{opacity:0;background-position:0 0}}
@keyframes fxg-jolt{0%{transform:none}10%{transform:translate3d(2px,0,0)}20%{transform:translate3d(-2px,0,0)}30%{transform:translate3d(1px,0,0)}40%,100%{transform:none}}

/* ---------- 2. Punchy hovers: Glass fx-react "toon pop" with the glass-ui-pass x1.18 numbers ----------
   lift -2px -> -2.36px; outline 2px @72% -> 2.36px @85%; drop shadow 0 6px 10px @32% -> 0 7.08px 11.8px @38%;
   scale deltas x1.18 (chips/tiles 1.04 -> 1.0472, wide controls 1.025 -> 1.0295, base 1.05 -> 1.059). */
:is(.opt,.cta,.ia-go,.inv-go,.ghost,.link,.card,.ia-panel,.inv-ok){
  --fx-c:var(--navy);--fx-s:1.059;--fx-sq:.94;
  transition:transform 220ms var(--fx-spring),color 140ms ease,background-color 140ms ease,border-color 140ms ease,
    box-shadow 180ms ease,outline-color 140ms ease,outline-offset 140ms ease,filter 180ms ease}
.opt{--fx-c:var(--cable-bl);--fx-s:1.0472}
:is(.cta,.ia-go,.inv-go){--fx-c:var(--orange)}
.ia-go{--fx-s:1.0295}
/* big panels: same lift, outline and glow; scale kept small so text under the pointer barely moves */
:is(.card,.ia-panel,.inv-ok){--fx-c:var(--navy);--fx-s:1.006;--fx-sq:1}
@media (hover:hover) and (pointer:fine){
  :is(.opt,.cta,.ia-go,.inv-go,.ghost,.link):not(:disabled):hover{
    transform:translate3d(0,-2.36px,0) scale(var(--fx-s));
    outline:2.36px solid color-mix(in oklab,var(--fx-c) 85%,transparent);outline-offset:2px;
    filter:drop-shadow(0 7.08px 11.8px color-mix(in oklab,var(--fx-c) 38%,transparent));
    animation:fxr-tick 170ms linear 1}
  :is(.cta,.ia-go,.inv-go):not(:disabled):hover{animation:fxr-tick 170ms linear 1,fxr-charge 900ms cubic-bezier(.2,.7,.2,1) forwards}
  /* answer options: Glass chip/tile scanline sweep */
  .opt:hover{background-image:linear-gradient(180deg,transparent 42%,color-mix(in oklab,var(--fx-c) 20%,transparent) 49%,color-mix(in oklab,#fffaf0 70%,transparent) 50%,color-mix(in oklab,var(--fx-c) 20%,transparent) 51%,transparent 58%);
    background-size:100% 300%;background-repeat:no-repeat;animation:fxr-tick 170ms linear 1,fxr-sweep 420ms cubic-bezier(.3,0,.3,1) 1}
  :is(.card,.ia-panel,.inv-ok):hover{
    transform:translate3d(0,-2.36px,0) scale(var(--fx-s));
    outline:2.36px solid color-mix(in oklab,var(--fx-c) 85%,transparent);outline-offset:2px;
    box-shadow:0 7.08px 11.8px color-mix(in oklab,var(--fx-c) 38%,transparent),3px 3px 0 rgba(27,34,48,.08);
    animation:fxr-tick 170ms linear 1}
  /* while someone is typing in a card, keep it lifted but drop the outline flash so the field focus ring reads first */
  :is(.card,.ia-panel):focus-within:hover{outline-color:color-mix(in oklab,var(--fx-c) 35%,transparent)}
}
:is(.opt,.cta,.ia-go,.inv-go,.ghost,.link):not(:disabled):active{
  transform:translate3d(0,0,0) scale(var(--fx-sq));transition-duration:90ms;transition-timing-function:var(--fx-press)}
.opt[aria-pressed="true"]{animation:fxr-lock 320ms var(--fx-spring) 1}
@keyframes fxr-tick{0%{text-shadow:-1.5px 0 rgba(226,65,47,.55),1.5px 0 rgba(26,167,201,.55)}100%{text-shadow:none}}
@keyframes fxr-charge{0%{box-shadow:0 0 0 0 transparent,0 0 0 0 transparent}
  55%{box-shadow:0 0 0 3px color-mix(in oklab,var(--fx-c) 38%,transparent),0 0 24px 4px color-mix(in oklab,var(--fx-c) 50%,transparent)}
  100%{box-shadow:0 0 0 2px color-mix(in oklab,var(--fx-c) 30%,transparent),0 0 16px 2px color-mix(in oklab,var(--fx-c) 34%,transparent)}}
@keyframes fxr-sweep{from{background-position:0 100%}to{background-position:0 0}}
@keyframes fxr-lock{0%{transform:scale(.94)}55%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ---------- 3. Grid reveal behind the cursor (Glass .triag-cursor-grid; lines a touch stronger for the lighter cream) ---------- */
.fx-cursor-layer{position:fixed;inset:0;z-index:95;overflow:hidden;pointer-events:none}
.fx-grid{position:absolute;left:0;top:0;width:208px;height:208px;opacity:0;transition:opacity 320ms ease;will-change:transform;
  --cg-cell:9px;--cg-major:36px;
  -webkit-mask-image:radial-gradient(circle closest-side,#000 0,rgba(0,0,0,.78) 22%,rgba(0,0,0,.42) 52%,rgba(0,0,0,.14) 78%,transparent 100%);
  mask-image:radial-gradient(circle closest-side,#000 0,rgba(0,0,0,.78) 22%,rgba(0,0,0,.42) 52%,rgba(0,0,0,.14) 78%,transparent 100%)}
.fx-grid[data-on="1"]{opacity:1}
.fx-grid__lines{position:absolute;inset:0;mix-blend-mode:multiply;
  background-image:linear-gradient(180deg,rgba(217,105,31,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(47,114,196,.17) 1px,transparent 1px),
    linear-gradient(180deg,rgba(31,42,58,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(31,42,58,.1) 1px,transparent 1px);
  background-size:var(--cg-major) var(--cg-major),var(--cg-major) var(--cg-major),var(--cg-cell) var(--cg-cell),var(--cg-cell) var(--cg-cell)}

/* ---------- 4. Crosshair reticle (Glass .triag-cursor-reticle, 41px SVG hairlines, exactly on the pointer) ---------- */
.fx-reticle{position:fixed;left:0;top:0;z-index:97;width:41px;height:41px;margin:-20.5px 0 0 -20.5px;pointer-events:none;opacity:0;will-change:transform;contain:strict}
.fx-reticle[data-on="1"]{opacity:1}
.fx-reticle svg{display:block;overflow:visible;transition:transform 160ms var(--fx-spring)}
.fx-reticle path,.fx-reticle circle{fill:none;vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision}
.fx-reticle__halo{stroke:rgba(250,247,238,.55);stroke-width:3;stroke-linecap:round}
.fx-reticle__hair{stroke:rgba(31,42,58,.72);stroke-width:1}
.fx-reticle__ring{stroke:rgba(217,105,31,.8);stroke-width:1;transition:stroke 140ms ease}
.fx-reticle .fx-reticle__dot{fill:rgba(31,42,58,.85)}
/* over something clickable: the reticle tightens and the ring goes full orange (stands in for the hand cursor) */
.fx-reticle[data-hot="1"] svg{transform:scale(.8)}
.fx-reticle[data-hot="1"] .fx-reticle__ring{stroke:#d9691f}
/* the reticle is the cursor on fine pointers; text fields keep the system caret and the reticle hides there */
html.fx-cursor,html.fx-cursor *{cursor:none}
html.fx-cursor :is(input,textarea,select,[contenteditable],iframe){cursor:auto}
html.fx-cursor :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),textarea){cursor:text}
@media (pointer:coarse){.fx-cursor-layer,.fx-reticle{display:none}}

/* ---------- 5. Click: Glass Cat6 spark burst + ring (.fx-burst), tuned for cream ---------- */
.fx-spark-layer{position:fixed;inset:0;z-index:96;overflow:hidden;pointer-events:none}
.fx-burst{position:absolute;left:0;top:0;width:0;height:0}
.fx-burst::before{content:"";position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid #fffdf6;
  box-shadow:0 0 0 1.5px #f08a3c,inset 0 0 0 1px rgba(240,138,60,.9),0 0 6px 1px rgba(255,176,96,.85),0 0 0 3px rgba(31,42,58,.18);
  animation:fxr-burst-ring 440ms cubic-bezier(.15,.7,.2,1) forwards}
.fx-burst i{position:absolute;left:0;top:-1px;width:12px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--c),color-mix(in oklab,var(--c) 45%,#fff) 70%,#fff);box-shadow:0 0 4px var(--c);
  transform-origin:0 50%;animation:fxr-spark 560ms cubic-bezier(.15,.7,.2,1) forwards}
@keyframes fxr-spark{0%{transform:rotate(var(--a)) translateX(5px) scaleX(.3);opacity:1}65%{opacity:1}100%{transform:rotate(var(--a)) translateX(var(--d)) scaleX(1);opacity:0}}
@keyframes fxr-burst-ring{0%{transform:scale(.4);opacity:1}55%{opacity:1}100%{transform:scale(2.2);opacity:0}}

/* ---------- 6. Info cards (form question cards, verdict): press "hit" = Glass toon pop scaled for big panels + the CTA charge ring in navy/orange.
   Uses the individual `scale` property so it stacks on the hover lift transform instead of fighting it. Added by fx.js on pointerdown. ---------- */
.card.fx-hit{animation:fxr-tick 170ms linear 1,fxr-card-hit 380ms var(--fx-spring) 1,fxr-card-ring 440ms cubic-bezier(.2,.7,.2,1) 1}
@keyframes fxr-card-hit{0%{scale:.986}55%{scale:1.008}100%{scale:1}}
@keyframes fxr-card-ring{0%{box-shadow:0 0 0 0 transparent}35%{box-shadow:0 0 0 3px color-mix(in oklab,var(--orange) 50%,transparent),0 0 26px 4px color-mix(in oklab,var(--orange) 38%,transparent)}
  100%{box-shadow:0 0 0 0 transparent,0 1px 0 rgba(27,34,48,.06),3px 3px 0 rgba(27,34,48,.07)}}
/* a card with a focused text field: keep the hover lift still (no scale wobble under the caret) */
@media (hover:hover) and (pointer:fine){.card:focus-within:hover{transform:translate3d(0,-2.36px,0)}}