/* Hi-Whyders landing logo: build animation (TCH-016 AP8 / D-010)
 *
 * Drop-in: put hw-logo-inline.html inside an element with class "hw-logo"
 * (on the landing page that is the <h1>). Link this file in <head>.
 * The build is pure CSS. logo-build.js adds the idle moments, replay and once-per-session.
 * Every selector for the logo's inner parts is scoped under .hw-logo (AP18 / R16): the sprite
 * names (.hw-lead, .hw-painter, .hw-lane, ...) are generic, and unscoped they once hid a site
 * paragraph of the same name. Keep new rules scoped the same way.
 * The background scene (code-rain layers, star events) is separate: hw-scene.css/js.
 *
 * The mark itself is completely white. Blue lives only in the light around it:
 * the edge glow, the halo and the horizontal beam behind it.
 *
 * Timeline (about 6.6 s; the mark is whole at 4.5 s). Every light moves on a long horizontal line:
 *   0.8 s       a star arrives at the logo centre (hw-scene.js, if present)
 *   0.85-1.7 s  construction lines: cap line, baseline and rail edges shoot out
 *               from the centre; four slanted guides draw along the italic
 *   1.1-2.8 s   sweep 1: a star flare glides left to right along the seam under the top
 *               rail; the top rail and the letter outlines appear behind it, and the W fills
 *               whole as the flare passes it (TCH-016 D-120: the W first, the rest in sweep 2)
 *   2.65-4.35 s sweep 2: a star flare glides right to left along the seam over the bottom
 *               rail; the bottom rail appears and each face fades in as it passes
 *   3.9-4.9 s   the outlines and guides fade
 *   4.5 s       ignition: glow flare, the beam shoots across, the halo bursts
 *   4.5-6.6 s   the glow settles; from 6.4 s the halo and beam pulse (idle)
 *   Each flare lives only on the mark: it starts at the mark's first edge and ends at its
 *   last, and a span mask (#hw-span) fades its rays out at the two ends, as if the text itself
 *   were glaring. Nothing shows before a flare arrives. The sweep timing is generated with
 *   the geometry (see @geometry).
 *
 * Every flare is a soft 4-point star whose rays (.hw-glint) turn a little as it travels.
 *
 * Idle moments (directed by logo-build.js every 9-15 s, like a trailer logo): a star flare
 * (.hw-painter) glides along an outer rail edge (.hw-lane), end to end and masked to the
 * mark's width like the build flares, and leaves a brief white trace,
 * or the whole mark flashes with light (.hw-logo--flash plus a glow swell). This file only
 * styles them; without JS the logo simply rests.
 * The non-animated values ARE the final state, so prefers-reduced-motion
 * (or the .hw-logo-seen root class) simply switches the build off.
 */

/* --- Colour tokens ----------------------------------------------------------------------
   The shared values come from the canonical set, outputs/design/tokens.css (design, sprint-1),
   by name: --hw-bg-0 (page black), --hw-electric (the logo blue), --hw-ink, --hw-accent-2
   (orange: countdown), plus --hw-sans / --hw-mono. Link that file BEFORE this one.
   This block holds only what the logo lane adds, derived from those names. --- */
:root {
  --hw-white: #ffffff;   /* the logo: completely white (D-L4); not in the canonical set */
  /* derived, so a token swap carries through. Mixed in srgb: an oklab mix of this blue with
     white lands just outside the sRGB gamut (blue 1.015), which Chromium's filter path can
     wrap instead of clamp, turning the logo glow yellow-green. */
  --hw-electric-hi: color-mix(in srgb, var(--hw-electric) 45%, white);
  --hw-dim: color-mix(in oklab, var(--hw-ink) 62%, var(--hw-bg-0));
  --hw-line: color-mix(in oklab, var(--hw-electric) 32%, transparent);
}

/* --- Final state ------------------------------------------------------- */
.hw-logo {
  --hw-logo-glow: drop-shadow(0 0 .25cqw color-mix(in srgb, var(--hw-electric-hi) 85%, transparent))
             drop-shadow(0 0 1.6cqw color-mix(in srgb, var(--hw-electric) 55%, transparent));
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  margin: 0;
  line-height: 0;
  color: var(--hw-white);
}

.hw-logo::before,                       /* halo: a blue light cloud behind the mark */
.hw-logo::after {                       /* beam: a thin horizontal light streak through it */
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.hw-logo::before {
  inset: -70% -14%;
  background: radial-gradient(50% 50% at 50% 50%,
              color-mix(in srgb, var(--hw-electric) 42%, transparent),
              color-mix(in srgb, var(--hw-electric) 12%, transparent) 45%, transparent 72%);
  opacity: .8;
}
.hw-logo::after {
  inset: 38% -55%;
  background: radial-gradient(50% 50% at 50% 50%,
              color-mix(in srgb, var(--hw-electric-hi) 80%, transparent),
              color-mix(in srgb, var(--hw-electric) 40%, transparent) 30%, transparent 70%);
  opacity: .5;
  mix-blend-mode: screen;
}

.hw-logo__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: var(--hw-logo-glow);
}

.hw-logo .hw-rail,
.hw-logo .hw-glyph { fill: currentColor; }

.hw-logo .hw-glyph {
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linejoin: round;
  stroke-opacity: 0;
}

/* build-only helpers, invisible in the final state */
.hw-logo .hw-guide {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0;
}
.hw-logo .hw-guide--h { transform-box: fill-box; transform-origin: center; }
.hw-logo .hw-guide--s { stroke-dasharray: 100 100; }

.hw-logo .hw-lane {                    /* the lines the idle flares sweep along */
  fill: none;
  stroke: currentColor;
  stroke-width: 10;
  stroke-linecap: round;
  opacity: 0;
}
.hw-logo .hw-stop-white { stop-color: var(--hw-white); }
.hw-logo .hw-stop-hi    { stop-color: var(--hw-electric-hi); }
.hw-logo .hw-stop-blue  { stop-color: var(--hw-electric); }
.hw-logo .hw-lead,
.hw-logo .hw-painter { opacity: 0; }
.hw-logo .hw-fx,
.hw-logo .hw-painters { mix-blend-mode: screen; }   /* flares add light; they never tint the white face */

/* --- Build ------------------------------------------------------------ */
/* The two sweeps (rail wipes, the outline wipe on .hw-face, the lead flares) and each face's
   fade-in start --m come from @geometry below. */
.hw-logo .hw-guide--h {
  animation: hw-guide-out .7s cubic-bezier(.2, .7, .2, 1) .85s both,
             hw-guide-fade 1s ease-in 3.9s both;
}
.hw-logo .hw-guide--s {
  animation: hw-guide-draw .7s ease-out 1s both,
             hw-guide-fade 1s ease-in 3.9s both;
}

.hw-logo .hw-glyph {
  animation:
    hw-face-in .6s cubic-bezier(.25, .6, .3, 1) var(--m, 3s) both,
    hw-unstroke 1s ease-in-out 3.9s both;
}

.hw-logo__svg { animation: hw-glow 6.6s ease-out both; }

.hw-logo::before {
  animation: hw-halo-ignite 1.9s cubic-bezier(.2, .7, .3, 1) 4.5s both,
             hw-halo-pulse 4.2s ease-in-out 6.4s infinite alternate;
}
.hw-logo::after {
  animation: hw-beam-ignite 1.9s cubic-bezier(.2, .7, .3, 1) 4.5s both,
             hw-beam-pulse 3.1s ease-in-out 6.4s infinite alternate;
}

@keyframes hw-guide-out {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes hw-guide-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
@keyframes hw-guide-fade {               /* also holds the guides at .45 until it runs */
  from { opacity: .45; }
  to   { opacity: 0; }
}
@keyframes hw-face-in {                 /* holds the face hidden until its flare passes */
  from { fill-opacity: 0; }
  to   { fill-opacity: 1; }
}
@keyframes hw-unstroke {                /* holds the outline visible until it runs */
  from { stroke-opacity: 1; }
  to   { stroke-opacity: 0; }
}
@keyframes hw-glow {
  from, 68% { filter: drop-shadow(0 0 .3cqw color-mix(in srgb, var(--hw-electric-hi) 90%, transparent))
                      drop-shadow(0 0 1.4cqw color-mix(in srgb, var(--hw-electric) 45%, transparent)); }
  72.5%     { filter: drop-shadow(0 0 .9cqw var(--hw-white))
                      drop-shadow(0 0 6cqw var(--hw-electric)); }
  to        { filter: var(--hw-logo-glow); }
}
@keyframes hw-halo-ignite {
  from { opacity: 0; transform: scale(.6); }
  25%  { opacity: 1; transform: scale(1.12); }
  to   { opacity: .8; transform: scale(1); }
}
@keyframes hw-halo-pulse {
  from { opacity: .8; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.05); }
}
@keyframes hw-beam-ignite {
  from { opacity: 0; transform: scaleX(0); }
  20%  { opacity: 1; transform: scaleX(1.5); }
  to   { opacity: .5; transform: scaleX(1); }
}
@keyframes hw-beam-pulse {
  from { opacity: .5; transform: scaleX(1); }
  to   { opacity: .85; transform: scaleX(1.12); }
}

/* --- Idle moments ------------------------------------------------------- */
/* logo-build.js moves the .hw-painter flare and sets the painted trace on the lanes inline
   (CSSOM, CSP-safe). For the flash it swells the mark's glow through the Web Animations API
   and sets .hw-logo--flash briefly (see the end of this file). */
@keyframes hw-glint-spin {              /* the star's rays turn a little as it travels */
  from { transform: rotate(-15deg); }
  to   { transform: rotate(15deg); }
}

/* @geometry: generated by build_logo.py, do not edit by hand */
.hw-logo .hw-rail--top    { animation: hw-rail-top-wipe 1.7s cubic-bezier(.4, .05, .4, .95) 1.1s both; }
.hw-logo .hw-face         { animation: hw-face-wipe 1.7s cubic-bezier(.4, .05, .4, .95) 1.1s both; }
.hw-logo .hw-lead--top    { animation: hw-lead-top 1.7s cubic-bezier(.4, .05, .4, .95) 1.1s both; }
.hw-logo .hw-rail--bottom { animation: hw-rail-bottom-wipe 1.7s cubic-bezier(.4, .05, .4, .95) 2.65s both; }
.hw-logo .hw-lead--bottom { animation: hw-lead-bottom 1.7s cubic-bezier(.4, .05, .4, .95) 2.65s both; }
@keyframes hw-rail-top-wipe {
  from { clip-path: inset(0 107.26% 0 0); }
  to   { clip-path: inset(0 0.00% 0 0); }
}
@keyframes hw-face-wipe {               /* the outline edge rides with the top flare */
  from { clip-path: inset(-10% 100.15% -10% 0); }
  to   { clip-path: inset(-10% -0.10% -10% 0); }
}
@keyframes hw-rail-bottom-wipe {
  from { clip-path: inset(0 0 0 104.32%); }
  to   { clip-path: inset(0 0 0 0.00%); }
}
@keyframes hw-lead-top {
  from { transform: translateX(0px); opacity: 0; }
  8%, 90% { opacity: 1; }
  to   { transform: translateX(2997px); opacity: 0; }
}
@keyframes hw-lead-bottom {
  from { transform: translateX(2997px); opacity: 0; }
  8%, 90% { opacity: 1; }
  to   { transform: translateX(0px); opacity: 0; }
}
.hw-logo .hw-lead--top .hw-glint    { animation: hw-glint-spin 1.7s linear 1.1s both; }
.hw-logo .hw-lead--bottom .hw-glint { animation: hw-glint-spin 1.7s linear 2.65s both reverse; }
.hw-logo .hw-glyph--h1 { --m: 3.94s; }
.hw-logo .hw-glyph--i { --m: 3.76s; }
.hw-logo .hw-glyph--dash { --m: 3.68s; }
.hw-logo .hw-glyph--w { --m: 1.65s; }
.hw-logo .hw-glyph--hyd { --m: 3.35s; }
.hw-logo .hw-glyph--e { --m: 3.17s; }
.hw-logo .hw-glyph--r { --m: 3.06s; }
.hw-logo .hw-glyph--s { --m: 2.88s; }
/* @geometry end */

/* --- Off switches ------------------------------------------------------ */
/* Reduced motion: final logo straight away, no pulse, no idle moments. */
@media (prefers-reduced-motion: reduce) {
  .hw-logo::before,
  .hw-logo::after,
  .hw-logo__svg,
  .hw-logo__svg * { animation: none !important; }
}

/* Already built this session (set by logo-build.js): skip the build; the pulse and the
   idle moments stay. */
.hw-logo-seen .hw-logo__svg,
.hw-logo-seen .hw-logo .hw-guide,
.hw-logo-seen .hw-logo .hw-face,
.hw-logo-seen .hw-logo .hw-glyph,
.hw-logo-seen .hw-logo .hw-rail,
.hw-logo-seen .hw-logo .hw-lead,
.hw-logo-seen .hw-logo .hw-lead .hw-glint { animation: none !important; }
.hw-logo-seen .hw-logo::before { animation: hw-halo-pulse 4.2s ease-in-out infinite alternate; }
.hw-logo-seen .hw-logo::after  { animation: hw-beam-pulse 3.1s ease-in-out infinite alternate; }

/* A scene event (hw-scene.js, "beat") flares the light: brightness and the individual
   `scale` property, so the running pulse animations (on `transform`) are left alone. */
.hw-logo::before,
.hw-logo::after { transition: filter 1.6s ease-out, scale 1.6s cubic-bezier(.2, .7, .3, 1); }
.hw-logo--beat::before { filter: brightness(3); scale: 1.35; transition-duration: .1s; }
.hw-logo--beat::after  { filter: brightness(3.4); scale: 2.2 1.7; transition-duration: .1s; }
/* The idle flash (logo-build.js): a softer swell of the same light, as the glow peaks. */
.hw-logo--flash::before { filter: brightness(1.9); scale: 1.12; transition-duration: .3s; }
.hw-logo--flash::after  { filter: brightness(2.3); scale: 1.5 1.25; transition-duration: .3s; }

/* Used by HWLogo.replay() to restart the light. */
.hw-logo--reset::before,
.hw-logo--reset::after { animation: none !important; }