/* intro.css: the "blueprint plotter" loading animation (js/intro.js). Docs: Doc/Elements/Intro Animation.md
   html.intro is set by the inline script in <head> (so nothing flashes before the scripts run).
   Each block below stays hidden, with every animation inside it paused, until intro.js gives it
   .inked; then it inks in and its own animations (name, icons, ticker…) start from there.
   html.intro-done = finished (or the 5s safety net in <head> fired): everything shows.
   Kept cheap for phones: no blur or glow filters anywhere, only opacity, movement and SVG strokes. */
html.intro :is(.ticker,.topbar,.left,.tech-card,.tile,.bottom){animation:inkIn .45s cubic-bezier(.2,.7,.2,1) both}
html.intro:not(.intro-done) :is(.ticker,.topbar,.left,.tech-card,.tile,.bottom):not(.inked),
html.intro:not(.intro-done) :is(.ticker,.topbar,.left,.tech-card,.tile,.bottom):not(.inked) *{animation-play-state:paused}

/* tile icons normally wait .4s+ for the page to settle; here the tile itself is the cue, so draw right away */
html.intro .gl :is(path,circle){animation-delay:.08s}

/* drafting-paper dot grid behind everything while it draws, fading out at the end */
html.intro body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(20,20,19,.13) 1px,transparent 1.4px) 0 0/22px 22px;
  transition:opacity .7s ease}
html.intro.intro-done body::before{opacity:0}

/* the pen layer: outlines, the glowing pen tip and the size labels */
.ink-layer{position:fixed;inset:0;width:100%;height:100%;z-index:50;pointer-events:none;overflow:visible}
.ink-layer path{fill:none;stroke:var(--pencil);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ink-pen{fill:var(--pencil)}
.ink-pen .halo{opacity:.22}
.ink-dim text{font:600 9px/1 var(--mono);letter-spacing:.08em;fill:var(--pencil)}
.ink-dim rect{fill:var(--paper)}
/* a finished outline (and its label) fades out; --ink-fade is set by js/intro.js */
.ink-layer .fade{opacity:0;transition:opacity var(--ink-fade,360ms) ease}