/* Loader, the same as the previous site: a construction drawing on paper docks onto the 3D mark (or its still),
   the core pulses and a square wave from the core cuts the paper away. Homepage only; skipped on the "off" tier,
   shortened on repeat visits within a session, ?intro=0 skips it (checks, screenshots). */
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../../assets/fonts/jetbrains-mono-koty.woff2) format("woff2"); /* digits, R, ° and , only */
}
:root { --paper: #f4f5f6; --p-ink: #0e1116; --p-graphite: #59616c; --f-mono: "JetBrains Mono", ui-monospace, monospace; }
.intro-lock, .intro-lock body { overflow: hidden; }
.intro-lock { background: var(--paper); }

.intro, .wave-edge { display: none; }
.intro-on .intro {
  display: block; position: fixed; inset: 0; z-index: 100;
  background: var(--paper); overflow: hidden;
  animation: intro-failsafe .5s 7s both;
}
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }
.intro-on .wave-edge { display: block; }
.wave-edge {
  position: fixed; left: 0; top: 0; z-index: 101; pointer-events: none;
  width: 0; height: 0; opacity: 0;
  border: 2px solid var(--core);
  box-shadow: 0 0 26px 3px rgba(26, 92, 255, .55), inset 0 0 26px 3px rgba(26, 92, 255, .38);
}
.intro-dwg {
  position: absolute; left: 50%; top: 50%;
  width: min(82vw, 88vh, 640px); height: auto;
  transform: translate(-50%, -50%); transform-origin: 50% 50%;
  overflow: visible; --sw: 1;
}
.intro-dwg text { font-family: var(--f-mono); font-size: 13px; fill: var(--p-graphite); text-anchor: middle; }
.intro-dwg .cl { fill: none; stroke: var(--p-graphite); stroke-width: calc(.8px * var(--sw)); stroke-dasharray: 22 5 3 5; }
.intro-dwg .dg { stroke-dasharray: 7 6; }
.intro-dwg .cc { fill: none; stroke: var(--p-graphite); stroke-width: calc(.8px * var(--sw)); }
.intro-dwg .bl { fill: var(--p-ink); stroke: var(--p-ink); stroke-width: calc(1.4px * var(--sw)); stroke-linejoin: miter; }
.intro-dwg .ex { fill: none; stroke: var(--p-graphite); stroke-width: calc(.6px * var(--sw)); }
.intro-dwg .dl { fill: none; stroke: var(--p-graphite); stroke-width: calc(.8px * var(--sw)); }
.intro-dwg .halo { paint-order: stroke; stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round; }
.intro-dwg .core { fill: var(--core); }
.intro-dwg .core-glow { fill: var(--core); opacity: 0; }
.intro-dwg .k-con { opacity: .55; transition: opacity .4s ease; }
.intro-dwg .k-dim { opacity: .9; transition: opacity .4s ease; }
.intro.docked .k-con { opacity: .18; }
.intro.docked .k-dim { opacity: 0; }

@keyframes i-grow { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes i-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes i-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes i-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes i-core { 0% { transform: scale(0); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes i-pulse { 0% { opacity: 0; transform: scale(1); } 35% { opacity: .95; transform: scale(1.5); } 100% { opacity: .55; transform: scale(1.25); } }
@keyframes i-breathe { from { opacity: .15; } to { opacity: .6; } }
@keyframes i-kick { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

.intro-on .intro-dwg .cl { animation: i-grow .55s var(--d) cubic-bezier(.7, 0, .2, 1) both; }
.intro-on .intro-dwg .cc { stroke-dasharray: 1 1; animation: i-draw .6s var(--d) cubic-bezier(.6, 0, .2, 1) both; }
.intro-on .intro-dwg .bl {
  stroke-dasharray: 1 1;
  animation: i-draw .62s var(--d) cubic-bezier(.55, 0, .25, 1) both, i-fill .4s var(--f) ease-out both;
}
.intro-on .intro-dwg .dm { animation: i-fade .3s var(--d) ease-out both; }
.intro-dwg .core, .intro-dwg .core-glow { transform-box: fill-box; transform-origin: center; }
.intro-on .intro-dwg .core { animation: i-core .35s 1.45s cubic-bezier(.3, 0, .2, 1) both; }
.intro.wait .core-glow { animation: i-breathe .9s ease-in-out infinite alternate; }
.intro.pulse .core-glow { animation: i-pulse .45s ease-out both; }
.intro.pulse .core { animation: i-kick .32s cubic-bezier(.3, 0, .2, 1) both; }
.intro-short .intro-dwg { opacity: 0; transition: opacity .12s; }
.intro-short .intro-dwg * { animation: none !important; }
.intro-short .intro.pulse .core-glow { animation: i-pulse .3s ease-out both !important; }
.intro-short .intro-dwg.shown { opacity: 1; }

@media (max-width: 1080px) {
  .intro-dwg { width: min(92vw, 70vh); --sw: 1.5; }
  .intro-dwg text { font-size: 18px; }
}

/* the page waits under the paper, then comes in as the wave opens */
.intro-on:not(.intro-done) .bar { opacity: 0; }
.intro-done .bar { animation: intro-bar 1s ease .8s both; }
@keyframes intro-bar { from { opacity: 0; } }