/* ============================================================
   TOBIRA — WIREFRAME LOADER
   The AI drafts THIS page: structure boxes self-draw at the real
   DOM geometry, content silhouettes sketch inside the tiles, then
   everything crossfades to the live page. No text, no flash.
   ============================================================ */

/* page motion is held while the wireframe draws, so boxes stay registered */
html.wire-holding .featured-track,
html.wire-holding #b23-hero .wall {
  animation-play-state: paused !important;
}
/* scroll is locked for the whole draw — scrolling mid-entrance desyncs the
   wireframe from the real geometry and smears strokes over later sections.
   NOTE: input is blocked in JS (wheel/touch/key preventDefault), NOT via
   overflow:hidden — clamping the document here killed the browser's
   scroll restoration and every reload snapped back to the hero. */
html.wire-holding,
html.wire-holding body {
  overscroll-behavior: none;
  touch-action: none;
}

#wire-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #090909;
  opacity: 1;
  pointer-events: none;
}

/* reveal, stage 1 — ONLY the dark backdrop lifts: the page's colors
   flood in beneath the still-intact wireframe, so the lines appear to
   take on the color rather than being swapped out */
#wire-loader.wire-out {
  background: rgba(9, 9, 9, 0);
  transition: background 380ms ease-out;
}

#wire-loader svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* reveal, stage 2 — the strokes melt into the now-colored page.
   No transforms: the lines must stay locked on the real geometry. */
#wire-loader.wire-lines-out svg {
  opacity: 0;
  transition: opacity 280ms ease-out;
}

/* the real door leaf + knob stay hidden until the wireframe door has
   finished opening, then take over seamlessly at identical geometry.
   The frame surfaces with everything else in stage 1. */
html.wire-door-wait .display-title .dt-logo svg polygon,
html.wire-door-wait .display-title .dt-logo svg circle { opacity: 0; }

/* structure pass — containers, quiet and thin */
#wire-loader .wire-box {
  fill: none;
  stroke: rgba(255, 255, 255, .42);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

/* sketch pass — content silhouettes, brighter hand */
#wire-loader .wire-sil {
  fill: none;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* The single solid pastel-orange accent per silhouette (rabbit: sunglasses). */
#wire-loader .wire-accent {
  stroke: #ff8068;
}

/* display headings — real glyph outlines, drawn like the boxes */
#wire-loader .wire-glyph {
  fill: none;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

/* chrome labels (nav, auth) — same treatment at 12px, where the display
   heading's 1.5 pen would close the counters and read as solid text */
#wire-loader .wire-label {
  fill: none;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: .7;
  stroke-linejoin: round;
  paint-order: stroke;
}

/* wireframe text convention — short line strokes, never letters */
#wire-loader .wire-text {
  fill: none;
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}