/* 自動生成 — packages/ui/scripts/build-wp-theme.mjs が作る。手で編集しない。
   見た目を直すときは packages/ui の該当 CSS を直して、このスクリプトを流し直す。 */
/* ---- src/brand/AiIndicator.css ---- */
/* AI indicator chip (source: .aichip, .chipsvg, .ch, chip-breath). */
.andon-aiindicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--andon-muted);
  font-family: 'Sora', ui-monospace, monospace;
}

.andon-aiindicator__svg {
  display: block;
  /* Idle: barely-there ink. color-mix keeps this a token derivative instead
   * of a new literal — 35% of --andon-ink over transparent. */
  color: color-mix(in srgb, var(--andon-ink) 35%, transparent);
  transition:
    color 0.5s ease,
    filter 0.5s ease;
}

.andon-aiindicator--busy .andon-aiindicator__svg {
  color: var(--andon-accent);
  /* Same color-mix approach for the glow: 60% --andon-accent, which is what a
   * literal rgba(212,255,0,.6) would have meant, without hard-coding it. */
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--andon-accent) 60%, transparent));
}

.andon-aiindicator__hole {
  transform-box: fill-box;
  transform-origin: center;
}

.andon-aiindicator--busy .andon-aiindicator__hole {
  animation: andon-aiindicator-breath 2618ms ease-in-out infinite;
  animation-delay: calc((var(--x) + var(--y)) * -90ms);
}

@keyframes andon-aiindicator-breath {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.65);
  }
}

.andon-aiindicator__label {
  font-weight: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .andon-aiindicator__hole {
    animation: none;
  }
  .andon-aiindicator__svg {
    transition: none;
  }
}

/* ---- src/brand/DotLogo.css ---- */
/*
 * Dot-matrix hero logotype. Ports the source design's `.fx`/`.herofx` neon-
 * sign gimmick: `.dots`/`.d`, `.slab`, `.holes`/`.h`, and the keyframes
 * `fx-gather` `fx-slab` `fx-breath` `fx-tw` `neon-on` `neon-flash`
 * `neon-flash-slab`.
 *
 * Structural note: the base fill, the `think` filter/glow, and the `flash`
 * ignition animation are declared on the *group* elements (.andon-dotlogo__dots,
 * the slab, .andon-dotlogo__holes), not on each circle. Individual dots only
 * ever set their OWN fill during `armed`/`play` (the scattered/gathering
 * look) and while `--tw`/`--near`. Once a dot's gather animation and the
 * armed class are both gone (i.e. once `think` arrives), the dot has no fill
 * of its own left to win the cascade, so it falls through to the group's
 * shared near-white fill — which is what makes the settled dots read as one
 * lit tube instead of a scatter of the three palette colours.
 */

.andon-dotlogo {
  /* The settled dot colour, dimmed a notch toward ink so the AI slab stays
   * the single brightest thing in the logo (the lit dots and the lime sat
   * only 1.07:1 apart, so the slab read as the same light as the text). */
  --andon-dotlogo-lit: color-mix(in srgb, color-mix(in srgb, #eafcff 80%, var(--andon-accent)) 88%, var(--andon-text));
  position: relative;
  width: 100%;
  display: block;
}

.andon-dotlogo__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible; /* the glow blooms past the viewBox; SVG's default
                         overflow:hidden would clip it to a hard rectangle */
  touch-action: pan-y; /* keep pointer handling from blocking page scroll on touch */
}

.andon-dotlogo__dot,
.andon-dotlogo__hole {
  transform-box: fill-box;
  transform-origin: center;
}

/* Base fills (source: .herofx .dots / .slab / .holes) — unconditional, and
 * what shows once nothing more specific is fighting for the property. */
.andon-dotlogo__dots {
  fill: var(--andon-dotlogo-lit);
}
.andon-dotlogo__slab {
  fill: var(--andon-accent);
  transform-box: fill-box;
  transform-origin: left center;
}
.andon-dotlogo__holes {
  fill: var(--andon-text);
}

/* armed (persists through play too — see DotLogo.tsx): dots scattered to
 * their random start point, dim; the slab and its holes are hidden until
 * the dots have mostly gathered. A dot in flight is orange — the brand's
 * "something is moving" colour — goes grey once it has landed, and only
 * turns into lit tube when the scan line reaches it.
 *
 * Every duration is a φ step (382 / 618 / 1000 / 1618 / 2618ms) scaled by
 * --andon-k, so a return visit can replay the same sequence at 0.3×. */
.andon-dotlogo--armed .andon-dotlogo__dot {
  opacity: 0.55;
  transform: translate(var(--sx), var(--sy)) scale(0.8);
  fill: var(--andon-accent-2);
}
.andon-dotlogo--armed .andon-dotlogo__slab {
  opacity: 0;
  transform: scaleX(0);
}
.andon-dotlogo--armed .andon-dotlogo__holes {
  opacity: 0;
}

/* play: each dot arcs into place (accelerate then decelerate), staggered by
 * its own random delay, then lights up left to right in step with the scan
 * line (--x is the dot's grid column, 0–105). The slab grows out from its
 * left edge once the scan has passed, the holes punch through last. */
.andon-dotlogo--play .andon-dotlogo__dot {
  animation:
    andon-dotlogo-gather calc(var(--andon-k, 1) * 1618ms) forwards,
    andon-dotlogo-ignite calc(var(--andon-k, 1) * 382ms) ease-out forwards;
  animation-delay:
    calc(var(--andon-k, 1) * var(--r) * 618ms),
    calc(var(--andon-k, 1) * (1618ms + var(--x) * 9.43ms));
}
.andon-dotlogo--play .andon-dotlogo__slab {
  animation:
    andon-dotlogo-slab-in calc(var(--andon-k, 1) * 618ms) var(--andon-ease) forwards,
    andon-dotlogo-slab-pulse calc(var(--andon-k, 1) * 618ms) ease-out;
  animation-delay: calc(var(--andon-k, 1) * 2618ms), calc(var(--andon-k, 1) * 3236ms);
}
.andon-dotlogo--play .andon-dotlogo__holes {
  animation: andon-dotlogo-holes-in calc(var(--andon-k, 1) * 382ms) ease-out forwards;
  animation-delay: calc(var(--andon-k, 1) * 2900ms);
}

@keyframes andon-dotlogo-gather {
  0% {
    opacity: 0.55;
    transform: translate(var(--sx), var(--sy)) scale(0.8);
    fill: var(--andon-accent-2);
    animation-timing-function: ease-in;
  }
  55% {
    opacity: 0.85;
    transform: translate(var(--mx), var(--my)) scale(0.9);
    fill: var(--andon-accent-2);
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 1;
    transform: none;
    fill: #9aa0aa;
  }
}

/* Fill only — a dot can still be arriving when the scan reaches its column,
 * and animating transform here would yank it into place mid-flight. */
@keyframes andon-dotlogo-ignite {
  0% {
    fill: #9aa0aa;
  }
  40% {
    fill: #ffffff;
  }
  100% {
    fill: var(--andon-dotlogo-lit);
  }
}

@keyframes andon-dotlogo-slab-in {
  from {
    opacity: 1;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes andon-dotlogo-slab-pulse {
  40% {
    filter: drop-shadow(0 0 6px rgba(212, 255, 0, 0.95));
  }
}

@keyframes andon-dotlogo-holes-in {
  to {
    opacity: 1;
  }
}

/* The scan line: a lit tube sweeping left to right. Its first pass (1618ms
 * in) is what ignites the dots; after that it comes back once per 6854ms
 * (φ⁴). Only on a logo that actually played its entrance (`--live`), so a
 * static `animate={false}` logo stays still. */
.andon-dotlogo::after {
  content: '';
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: 0;
  width: 2px;
  background: var(--andon-accent);
  box-shadow: 0 0 12px var(--andon-accent);
  opacity: 0;
  pointer-events: none;
}
.andon-dotlogo--live::after {
  animation: andon-dotlogo-scan 6854ms linear infinite;
  animation-delay: calc(var(--andon-k, 1) * 1618ms);
}

@keyframes andon-dotlogo-scan {
  0% {
    left: 0;
    opacity: 0.9;
  }
  14.6% {
    left: 100%;
    opacity: 0.9;
  }
  16%,
  100% {
    left: 100%;
    opacity: 0;
  }
}

/*
 * think: settled. The dots group glows through the `melt` filter (its url()
 * supplied per-instance via the --andon-dotlogo-melt custom property set in
 * DotLogo.tsx — a global `#melt` id would break the moment two logos share a
 * page) plus a two-stage drop-shadow halo. The literal hexes/rgba below are
 * load-bearing: they ARE the tuned neon colour, not decoration a design
 * token could stand in for. The halo is deliberately softer than the
 * slab's own glow (the units are viewBox cells — at hero size 1 cell is
 * ~10px), so the AI slab stays the brightest light in the sign. Twinkles and
 * pointer-near dots flash white, never a palette colour: a lone orange dot
 * in a settled logo reads as a speck, not a spark.
 */
.andon-dotlogo--think .andon-dotlogo__dots {
  filter: var(--andon-dotlogo-melt) drop-shadow(0 0 0.8px rgba(212, 255, 0, 0.55)) drop-shadow(0 0 2px rgba(212, 255, 0, 0.3));
  animation: andon-dotlogo-neon-on 700ms ease-out;
}
.andon-dotlogo--think .andon-dotlogo__slab {
  filter: drop-shadow(0 0 2.4px rgba(212, 255, 0, 0.75));
}
.andon-dotlogo--think .andon-dotlogo__dot {
  transition:
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    fill 260ms;
}
.andon-dotlogo--think .andon-dotlogo__hole {
  animation: andon-dotlogo-breath 2618ms ease-in-out infinite;
  animation-delay: calc((var(--x) + var(--y)) * -90ms);
}
/* pointer-proximity dots (DotLogo.tsx sets this class + a scale transform
 * within 3.5 viewBox units of the pointer, only while `think`). */
.andon-dotlogo--think .andon-dotlogo__dot--near {
  fill: #ffffff;
}

@keyframes andon-dotlogo-neon-on {
  0%,
  18% {
    filter: none;
    opacity: 0.5;
  }
  10%,
  26% {
    filter: var(--andon-dotlogo-melt) drop-shadow(0 0 0.8px rgba(212, 255, 0, 0.55)) drop-shadow(0 0 2px rgba(212, 255, 0, 0.3));
    opacity: 1;
  }
  34% {
    filter: none;
    opacity: 0.7;
  }
  100% {
    filter: var(--andon-dotlogo-melt) drop-shadow(0 0 0.8px rgba(212, 255, 0, 0.55)) drop-shadow(0 0 2px rgba(212, 255, 0, 0.3));
    opacity: 1;
  }
}

@keyframes andon-dotlogo-breath {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.72);
  }
}

/* twinkle: DotLogo.tsx adds this to one random dot every 618ms, removing and
 * re-adding it (forcing reflow) to restart the animation each time. */
.andon-dotlogo__dot--tw {
  animation: andon-dotlogo-tw 618ms ease-in-out;
}
@keyframes andon-dotlogo-tw {
  50% {
    transform: scale(1.3);
    fill: #ffffff;
    opacity: 1;
  }
}

/*
 * full ignition: DotLogo.tsx toggles `--flash` on the root every 4.2-10.9s.
 * Two soft swells (24%, 66%) with a valley at 44% that only returns to the
 * base look, never dips below it. The dot core brightens to #eafcff — NOT
 * pure white; blowing out to white read as a harsh strobe in review. The
 * slab breathes glow width only, no white flare.
 */
.andon-dotlogo--flash.andon-dotlogo--think .andon-dotlogo__dots {
  animation: andon-dotlogo-neon-flash 2618ms ease-in-out;
}
.andon-dotlogo--flash.andon-dotlogo--think .andon-dotlogo__slab {
  animation: andon-dotlogo-neon-flash-slab 2618ms ease-in-out;
}

@keyframes andon-dotlogo-neon-flash {
  0% {
    fill: var(--andon-dotlogo-lit);
    filter: var(--andon-dotlogo-melt) drop-shadow(0 0 0.8px rgba(212, 255, 0, 0.55)) drop-shadow(0 0 2px rgba(212, 255, 0, 0.3));
  }
  24% {
    fill: #eafcff;
    filter: var(--andon-dotlogo-melt) drop-shadow(0 0 1.2px rgba(234, 252, 255, 0.7)) drop-shadow(0 0 3px rgba(212, 255, 0, 0.45));
  }
  44% {
    fill: var(--andon-dotlogo-lit);
    filter: var(--andon-dotlogo-melt) drop-shadow(0 0 0.9px rgba(212, 255, 0, 0.6)) drop-shadow(0 0 2.2px rgba(212, 255, 0, 0.35));
  }
  66% {
    fill: #eafcff;
    filter: var(--andon-dotlogo-melt) drop-shadow(0 0 1.3px rgba(234, 252, 255, 0.75)) drop-shadow(0 0 3.4px rgba(212, 255, 0, 0.5));
  }
  100% {
    fill: var(--andon-dotlogo-lit);
    filter: var(--andon-dotlogo-melt) drop-shadow(0 0 0.8px rgba(212, 255, 0, 0.55)) drop-shadow(0 0 2px rgba(212, 255, 0, 0.3));
  }
}

@keyframes andon-dotlogo-neon-flash-slab {
  0%,
  100% {
    filter: drop-shadow(0 0 2.4px rgba(212, 255, 0, 0.75));
  }
  24% {
    filter: drop-shadow(0 0 4.2px rgba(212, 255, 0, 0.9));
  }
  44% {
    filter: drop-shadow(0 0 2.6px rgba(212, 255, 0, 0.78));
  }
  66% {
    filter: drop-shadow(0 0 4.8px rgba(212, 255, 0, 0.92));
  }
}

.andon-dotlogo__log {
  margin-top: 12px;
  font-family: 'Sora', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Fixed "training log" lime, not --andon-accent-text: this line sits on the
   * same dark hero band the dots do, not on paper, so the paper-safe token
   * would be far too dim to read. */
  color: rgba(212, 255, 0, 0.78);
}

@media (prefers-reduced-motion: reduce) {
  .andon-dotlogo__dots,
  .andon-dotlogo__holes,
  .andon-dotlogo__dot,
  .andon-dotlogo__hole,
  .andon-dotlogo__slab {
    animation: none !important;
    transition: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .andon-dotlogo::after {
    display: none;
  }
}

/* ---- src/brand/Wordmark.css ---- */
.andon-wordmark {
  display: block;
  /* No explicit `color` here on purpose: fills are currentColor, so this logo
   * takes whatever text colour it is placed in — set `color` on this
   * element's className, on an inline style, or let it inherit from an
   * ancestor. Nothing here forces a colour, unlike the nav/footer instances
   * in the source design, which each pinned their own. */
}