/* =============================================================
   Violet Tek | Animations
   Motion primitives, marquee, word reveal, pinned reel, boot, back-to-top.
   Ported verbatim from vt2.css - source is the visual authority.
   ============================================================= */

/* motion primitives / marquee / word reveal / sticky list / pinned reel (79-119) */
/* motion primitives */
.mask{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.mask>span{display:block;transform:translateY(135%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.mask.in>span{transform:none}
.fu{opacity:0;transform:translateY(20px);transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1)}
.fu.in{opacity:1;transform:none}
.fl{opacity:0;transition:opacity 1.1s ease}
.fl.in{opacity:1}
.scale-in{clip-path:inset(14% 14% 14% 14% round 20px);transition:clip-path 1.2s cubic-bezier(.16,1,.3,1)}
.scale-in.in{clip-path:inset(0 0 0 0 round 20px)}
html.reveal-off .mask>span{transform:none}
html.reveal-off .fu,html.reveal-off .fl{opacity:1;transform:none}
html.reveal-off .scale-in{clip-path:inset(0 0 0 0 round 20px)}
html[data-motion=system] .mask>span{transform:none}
html[data-motion=system] .fu,html[data-motion=system] .fl{opacity:1;transform:none;transition:none}
html[data-motion=system] .scale-in{clip-path:inset(0 0 0 0 round 20px)}
@media (prefers-reduced-motion:reduce){.mask>span{transform:none!important}.fu,.fl{opacity:1!important;transform:none!important}.scale-in{clip-path:inset(0 0 0 0 round 20px)!important}.mq-track{animation:none!important}}
/* marquee */
.mq{overflow:hidden;border-top:1px solid var(--dark-hairline);border-bottom:1px solid var(--dark-hairline);padding:20px 0}
.mq-track{display:flex;gap:56px;width:max-content;animation:mq 42s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{display:flex;align-items:center;gap:56px;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark)}
.mq-item b{width:5px;height:5px;border-radius:50%;flex:none}
/* word reveal */
.wr{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.6vw,58px);line-height:1.16;letter-spacing:-.028em}
.wr span{transition:color .5s ease,opacity .5s ease}
/* sticky practice list */
.sticky-col{position:sticky;top:120px;align-self:start}
.pr-panel{border-top:1px solid var(--dark-hairline);padding:var(--sec-y-sm) 0}
.pr-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em}
.pr-index a{display:flex;gap:16px;align-items:baseline;padding:12px 0;color:var(--on-dark-muted);font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.01em;transition:color .3s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.pr-index a.on{color:#fff;transform:translateX(8px)}
/* pinned reel */
.reel{position:relative}
.reel-vp{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:64px}
.reel-track{display:flex;gap:clamp(24px,3vw,56px);padding:0 max(56px,calc((100vw - 1560px) / 2 + 56px));will-change:transform}
.reel-card{flex:none;width:clamp(280px,42vw,620px)}
.reel-fallback{display:grid;grid-template-columns:repeat(2,1fr);gap:56px}
.reel-bar{position:absolute;left:max(56px,calc((100vw - 1560px) / 2 + 56px));right:max(56px,calc((100vw - 1560px) / 2 + 56px));bottom:28px;height:1px;background:rgba(255,255,255,.14)}
.reel-bar i{display:block;height:1px;background:var(--motif-gradient)}

/* boot sequence (192-213) */
/* ---- boot sequence ---- */
.boot{position:fixed;inset:0;z-index:9999;background:var(--ink);display:flex;align-items:center;justify-content:center;transition:transform .9s cubic-bezier(.76,0,.24,1),opacity .5s ease}
.boot-out{transform:translateY(-101%)}
.boot-quick{transition:opacity .38s ease}
.boot-quick.boot-out{transform:none;opacity:0}
.boot-in{display:flex;flex-direction:column;align-items:center;gap:26px}
.boot-mark{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(30px,5vw,58px);letter-spacing:-.035em;color:var(--text-inverse);opacity:0;animation:bootIn .7s cubic-bezier(.16,1,.3,1) .1s forwards}
.boot-mark span{color:var(--on-dark-muted)}
.boot-bars{display:flex;gap:6px}
.boot-bars i{display:block;width:34px;height:2px;background:var(--c);transform:scaleX(0);transform-origin:left;animation:bootBar .55s cubic-bezier(.16,1,.3,1) forwards}
.boot-bars i:nth-child(1){animation-delay:.30s}.boot-bars i:nth-child(2){animation-delay:.40s}
.boot-bars i:nth-child(3){animation-delay:.50s}.boot-bars i:nth-child(4){animation-delay:.60s}
.boot-bars i:nth-child(5){animation-delay:.70s}
.boot-meta{position:absolute;margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);opacity:0;animation:bootIn .6s ease .45s forwards}
.boot-tl{top:28px;left:34px}.boot-br{bottom:28px;right:34px}
.boot-quick .boot-mark,.boot-quick .boot-meta{animation-duration:.3s;animation-delay:0s}
.boot-quick .boot-bars i{animation-duration:.3s;animation-delay:0s}
@keyframes bootIn{to{opacity:1}}
@keyframes bootBar{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.boot-mark,.boot-meta{opacity:1;animation:none}.boot-bars i{transform:scaleX(1);animation:none}}
@media (max-width:640px){.boot-tl{left:22px}.boot-br{right:22px}.boot-bars i{width:26px}}


/* back to top (413-427) */
/* ---- back to top ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.to-top{position:fixed;left:24px;bottom:24px;z-index:75;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--text-inverse);color:var(--ink);border:1px solid var(--text-inverse);border-radius:var(--r-pill,999px);
  padding:12px 18px;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .35s ease,transform .35s cubic-bezier(.16,1,.3,1),background .18s ease,color .18s ease,border-color .18s ease}
.to-top.in{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--on-dark);border-color:var(--on-dark)}
.to-top:active{background:var(--muted-slate);color:var(--text-inverse);border-color:var(--muted-slate)}
.to-top:focus-visible{outline:2px solid var(--focus-blue);outline-offset:4px}
.tt-arrow{font-size:13px;line-height:1}
@media (max-width:640px){.to-top{left:16px;bottom:16px;padding:11px 14px}.tt-label{display:none}}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .2s ease}}