/* Seen pattern test visuals (test/visuals.js). Night palette from brand/seen.css. One shared motion vocabulary:
   lines draw in (.vz-draw), nodes and pills fade up (--d is the delay), everything calm. */
.vz{position:relative;width:100%;margin:0 auto}
.vz-canvas{display:block;width:100%}
.vz.wait *, .vz.wait *::before, .vz.wait *::after{animation-play-state:paused!important}
.vz-hand{display:block;font:400 22px/1.1 'Caveat',cursive;color:var(--n-blue)}

/* shared motion */
.vz-draw{fill:none;stroke:var(--n-fg);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:vzDraw 1.8s var(--ease) var(--d,0s) forwards}
.vz-node{opacity:0;transform-box:fill-box;transform-origin:center;animation:vzPop .6s var(--ease) var(--d,0s) forwards}
.vz-pulse{fill:none;stroke:#3ee07a;stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;animation:vzPulse 2.4s ease-out calc(var(--d,0s) + .4s) infinite}
@keyframes vzDraw{to{stroke-dashoffset:0}}
@keyframes vzPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes vzFade{to{opacity:1}}
@keyframes vzUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes vzPulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3)}}
.still .vz-draw{animation:none;stroke-dashoffset:0}
.still .vz-pill,.still .vz-fuel{animation:none;opacity:1}
.still .vz-node,.still .vz-chip,.still .vz-stage,.still .vz-arrow,.still .vz-again,.still .w,.still .vz-note span{animation:none;opacity:1;transform:none}
.still .vz-pulse{display:none}

/* interstitial and question placement */
.inter-vz{width:100%;max-width:400px;margin:0 auto 26px}
.q-vz{max-width:420px;margin:4px auto 6px}
.reading .vz{max-width:340px;margin:0 auto 18px}

/* pitstop */
.vz-pit{position:relative;aspect-ratio:340/220;margin-bottom:14px}
.vz-pit svg{position:absolute;inset:0;width:100%;height:100%}
.vz-pit-grid{stroke:rgba(255,255,255,.06);stroke-width:1;fill:none}
.vz-pit .vz-draw{stroke:rgba(230,226,218,.75)}
.vz-pill{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;white-space:nowrap;
  background:rgba(20,20,20,.88);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 10px 24px -12px #000;font:500 12.5px var(--sans);color:var(--n-fg);opacity:0;animation:vzFade .8s ease var(--d) forwards}
.vz-pill i{width:7px;height:7px;border-radius:50%;flex:none}

/* fingerprint */
.vz-fp svg{display:block;width:min(220px,62vw);margin:0 auto}
.vz-fp .vz-draw{stroke-width:1.3;opacity:.85;animation-duration:2.4s}

/* tried more */
.vz-tried{text-align:center}
.vz-tried .vz-hand{margin-bottom:8px}
.vz-pile{display:flex;flex-wrap:wrap-reverse;justify-content:center;gap:7px;min-height:220px;align-content:flex-start}
.vz-chip{display:inline-block;padding:6px 11px;border-radius:999px;font:500 12.5px var(--sans);color:#d6d2ca;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  opacity:0;transform:translateY(-120px) rotate(var(--r));animation:vzFall .9s cubic-bezier(.3,1.25,.5,1) var(--d) forwards}
@keyframes vzFall{from{opacity:0;transform:translateY(-120px) rotate(0)}40%{opacity:1}to{opacity:1;transform:translateY(0) rotate(var(--r))}}

/* five fuels */
.vz-fuels{position:relative;aspect-ratio:1/1;margin-bottom:-24px!important;max-width:330px;margin:0 auto}
.vz-fuels svg{position:absolute;inset:0;width:100%;height:100%}
.vz-fuels .vz-draw{stroke-width:.5;opacity:.7}
.vz-core{fill:var(--n-fg);opacity:.9;transform-box:fill-box;transform-origin:center;animation:vzBreath 3s ease-in-out infinite}
@keyframes vzBreath{50%{transform:scale(1.25);opacity:.6}}
.vz-fuel{position:absolute;width:112px;opacity:0;animation:vzFade .8s ease var(--d) forwards;line-height:1.15}
.vz-fuel b{display:block;font:400 21px 'Caveat',cursive}
.vz-fuel small{display:block;font:400 11.5px var(--sans);color:#b5b1a9}
.vz-fuel.c{transform:translate(-50%,-125%);text-align:center}
.vz-fuel.b{transform:translate(-50%,14%);text-align:center}

/* five fuels as felt orbs: size, glow and pulse, one word each */
.vz-orbs{position:relative;aspect-ratio:1/1;max-width:330px;margin:0 auto -18px}
.vz-orbs svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vz-orb{opacity:0;transform-box:fill-box;transform-origin:center;animation:vzFade 1.4s ease var(--d) forwards,vzOrb var(--p) ease-in-out calc(var(--d) + 1.4s) infinite}
@keyframes vzOrb{50%{transform:scale(var(--s))}}
.vz-orb-l{position:absolute;transform:translate(-50%,0);font:400 21px/1 'Caveat',cursive;color:var(--n-fg);white-space:nowrap;animation:vzFadeTo 1.2s ease var(--d) backwards}
@keyframes vzFadeTo{from{opacity:0}}
.still .vz-orb{animation:none;opacity:1}
/* words instead of scores in the profile */
.vz-words{display:grid;gap:14px;margin-top:8px}
.vz-words small{display:block;margin-bottom:8px;font:500 12.5px var(--sans);color:var(--n-dim)}
.vz-word{display:inline-block;margin:0 6px 6px 0;padding:7px 12px;border-radius:999px;font:500 14px var(--sans);color:var(--n-fg);opacity:0;animation:vzFade .8s ease var(--d) forwards}
.vz-word.up{background:rgba(62,224,122,.08);box-shadow:inset 0 0 0 1px rgba(62,224,122,.35),0 0 18px -8px rgba(62,224,122,.6)}
.vz-word.down{background:rgba(227,181,68,.07);box-shadow:inset 0 0 0 1px rgba(227,181,68,.32)}
.still .vz-word{animation:none;opacity:1}

/* 30 and 90 day arc */
.vz-arc svg{display:block;width:100%}
.vz-base{stroke:rgba(255,255,255,.12);stroke-width:1}
.vz-arc .vz-draw{stroke:#3ee07a;stroke-width:2}
.vz-t{font:500 11px var(--sans);fill:var(--n-dim)}
.vz-h{font:400 20px 'Caveat',cursive;fill:var(--n-fg)}

/* pattern profile */
.vz-prof{display:grid;gap:12px;margin-top:40px}
.vz-card{padding:22px 20px;border-radius:20px;background:linear-gradient(rgba(255,255,255,.045),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.vz-card .vz-hand{color:var(--accent)}
.vz-name{margin:6px 0 20px;font:400 26px/1.2 var(--serif)}
.vz-meters{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vz-meter small,.vz-note small{display:block;font:500 12.5px var(--sans);color:var(--n-dim)}
.vz-meter b{display:block;margin:3px 0 10px;font:500 15px/1.3 var(--sans);color:var(--n-fg)}
.vz-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.vz-bar i{display:block;height:100%;width:calc(var(--v) * 100%);border-radius:6px;background:var(--c,var(--n-fg));transform-origin:left;transform:scaleX(0);animation:vzGrow 1.2s var(--ease) var(--d) forwards}
@keyframes vzGrow{to{transform:scaleX(1)}}
.still .vz-bar i{animation:none;transform:none}
.vz-ends{display:flex;justify-content:space-between;margin-top:5px;font:400 11px var(--sans);color:#6f6c67}
.vz-note{margin:0 0 6px;font:400 19px/1.45 var(--serif);color:var(--n-fg)}
.vz-note small{margin-bottom:6px}
.vz-note span{display:inline-block;opacity:0;animation:vzUp .5s ease var(--d) forwards}
.vz-spider{display:block;width:min(260px,78%);margin:8px auto 4px;overflow:visible}
.vz-sgrid{fill:none;stroke:rgba(255,255,255,.08);stroke-width:.8}
.vz-poly{fill:var(--accent);fill-opacity:.16;stroke:var(--accent);stroke-width:1.4;transform-origin:110px 110px;transform:scale(0);animation:vzPoly 1.3s var(--ease) .8s forwards}
@keyframes vzPoly{to{transform:scale(1)}}
.still .vz-poly{animation:none;transform:none}
.vz-slabel{font:500 9.5px var(--sans);fill:#a8a49c}
.vz-traits{display:grid;gap:12px;margin-top:10px}
.vz-trait > div:first-child{display:flex;justify-content:space-between;margin-bottom:6px;font:500 14px var(--sans);color:#d6d2ca}
.vz-trait b{font-weight:600;font-variant-numeric:tabular-nums}
.vz-trait.up{--c:#3ee07a}.vz-trait.down{--c:#e3b544}
.vz-foot{margin:18px 0 0;font:400 20px 'Caveat',cursive;color:var(--n-blue);text-align:center}

/* the cycle */
.vz-cycle{margin-top:6px}
.vz-stage{display:flex;gap:14px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);opacity:0;animation:vzUp .6s var(--ease) var(--d) forwards}
.vz-stage .n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--sans);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.vz-stage b{display:block;margin:3px 0 4px;font:500 16.5px/1.35 var(--sans);color:var(--n-fg)}
.vz-stage p{margin:0;font-size:15.5px;line-height:1.55;color:#b5b1a9}
.vz-arrow{display:flex;justify-content:center;padding:6px 0;color:var(--accent);opacity:0;animation:vzUp .4s ease var(--d) forwards}
.vz-arrow svg{width:12px;height:18px}
.vz-again{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font:400 21px 'Caveat',cursive;color:var(--accent);opacity:0;animation:vzUp .6s ease var(--d) forwards}
.vz-again svg{width:20px;height:20px}

/* the belief underneath */
.vz-belief{margin:30px 0;padding:24px 22px;border-radius:18px;background:radial-gradient(120% 90% at 100% 0%,rgba(195,168,240,.1),transparent 60%),rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.vz-belief small{display:block;margin-bottom:10px;font:500 13px var(--sans);color:var(--n-dim)}
.vz-belief p{margin:0;font:400 21px/1.55 var(--serif);color:var(--n-fg)}
.vz-belief .w{display:inline-block;opacity:0;animation:vzUp .5s ease var(--d) forwards}
.vz-belief .em{background:linear-gradient(transparent 64%,color-mix(in srgb,var(--accent) 40%,transparent) 64%) no-repeat;background-size:0 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:vzMark 1.2s var(--ease) 2.4s forwards}
@keyframes vzMark{to{background-size:100% 100%}}
.still .em{background-size:100% 100%}
@media (prefers-reduced-motion:reduce){.vz-belief .em{background-size:100% 100%}}

@media (prefers-reduced-motion:reduce){.vz *{animation:none!important;opacity:1!important}.vz .vz-orb-l{opacity:.9!important}.vz .vz-pulse{display:none}.vz .vz-chip,.vz .vz-stage,.vz .vz-note span,.vz .w,.vz .vz-node{transform:none!important}.vz .vz-draw{stroke-dashoffset:0}.vz-bar i,.vz-poly{transform:none!important}}