/* ==========================================================================
   avocloud · CAD construction-reveal wordmark — companion CSS
   Mirrored from brand/motion/wordmark-reveal.css. The .hw-* rules are the
   canonical ones; the two text-size classes at the bottom are AvoLink's
   placements (hero + post-login splash).
   ========================================================================== */

.hw { position: relative; display: inline-block; }
.hw-ch { position: relative; display: inline-block; }

/* `pre` so a space in a multi-word wordmark survives: each character is its
   own inline-block, and one holding nothing but whitespace collapses to zero
   width. Keeps the real space in textContent, unlike swapping in an  . */
.hw-fill { display: inline-block; position: relative; z-index: 1; white-space: pre; }
.hw-ch.coral .hw-fill { color: var(--avo-coral-500, #FF6B4A); }

/* Outline layer — the glyph comes from a pseudo-element so it is NOT counted
   as page text. The real text lives only in .hw-fill, so textContent stays a
   single clean "AVOLINK.NET" however many decorative layers sit on top. */
.hw-stroke {
  position: absolute; inset: 0; z-index: 2;
  opacity: 0;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.2px rgba(255,255,255,0.55);
  pointer-events: none;
}
.hw-stroke::before { content: attr(data-ch); white-space: pre; }
.hw-ch.coral .hw-stroke { -webkit-text-stroke-color: rgba(255,107,74,0.7); }

/* Construction guides — an SVG sized 1:1 to the wordmark box, geometry
   measured from the real glyphs at runtime. Overflow visible so guide lines
   can run a touch past the letters. */
.hw-guides {
  position: absolute;
  top: 0; left: 0;
  overflow: visible;
  z-index: 0;
  pointer-events: none;
}
.hw-line { stroke: rgba(255,255,255,0.30); stroke-width: 1; opacity: 0; }
.hw-line.coral { stroke: rgba(255,107,74,0.5); }
.hw-circ {
  fill: none;
  stroke: rgba(255,255,255,0.26);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
  opacity: 0;
}
.hw-circ.coral { stroke: rgba(255,107,74,0.55); }

/* ---- Placements ---------------------------------------------------------- */
.hero-wordmark {
  font-family: var(--avo-font-brand, 'Syne', sans-serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 6vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
  position: relative;
  z-index: 1;
}
.splash-wordmark {
  font-family: var(--avo-font-brand, 'Syne', sans-serif);
  font-weight: 800;
  font-size: clamp(1.5rem, 7vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}

/* ==========================================================================
   Post-login splash — BRANDING.md §5 "Splash screen".
   Black canvas, the wordmark builds itself, then it lifts away. Nothing else
   on screen: no spinner, no tagline, no version string.

   Armed by an inline head script before first paint, and ONLY when motion is
   allowed — with JS off or reduced motion the overlay is never displayed at
   all, so there is nothing for JS to have to remove.
   ========================================================================== */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000;
  will-change: transform;
}
html.splashing .splash { display: flex; }
html.splashing { overflow: hidden; }