/* ==========================================================================
   Gold phase banners (js/banner.js)
   Transparent SVG — no plate, no background box. The metal ramp is driven by
   custom properties so one markup shape serves both tones.
   ========================================================================== */

/* Noto Sans SC Black, subset to only the glyphs these banners use (~3.6 KB).
   SIL Open Font License, so it ships with the app. The system CJK stack tops
   out around semibold, which is why the lettering read thin and generic next to
   the live app's carved logotype — this is the single biggest lever on that. */
@font-face {
  font-family: 'KFNN Display';
  src: url('/fonts/kfnn-display.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.phase-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- finished artwork (start_bet / stop_grab) ----------------------------- */

/* Shipped as transparent WebP, so it needs the same "floating plaque" treatment
   the SVG gets from its own <filter>: a drop-shadow that follows the alpha
   silhouette rather than a box shadow, which would draw a rectangle around it.
   width/height are on the element too, so the log reserves the right box before
   the image decodes. */
.phase-art {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55));
}

/* The lettering carries the brand, so it gets the display face explicitly —
   SVG text does not inherit a font stack the way HTML does in every engine. */
.pb-main, .pb-kicker, .pb-brand {
  font-family: 'KFNN Display', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: 900;
}

/* Warm imperial gold — opening / striking phases. */
.phase-svg.tone-gold {
  --m0: #fffdf2;
  --m1: #ffe9a8;
  --m2: #e8b64a;
  --m3: #a9711a;
  --m4: #f4d78d;
  --ink: #3a1d02;
  --glow: #e8b64a;
  --p0: #5c2410;
  --p1: #2a0d05;
}

/* Cooler jade-and-steel for the closing phases, so "stop" reads differently
   from "go" at a glance rather than relying on the text alone. */
.phase-svg.tone-jade {
  --m0: #f4fffb;
  --m1: #bff0dc;
  --m2: #52b98d;
  --m3: #1d6b4d;
  --m4: #9fe3c6;
  --ink: #04231a;
  --glow: #52b98d;
  --p0: #0d3a2c;
  --p1: #05170f;
}

/* On the halt phases the whole plaque is jade, so the character tints with it —
   a gold bull inside a green frame reads as the wrong asset. Gold sits around
   40deg, jade around 140deg. */
.tone-jade .pb-mascot image,
.tone-jade .pb-crest image { filter: hue-rotate(98deg) saturate(.8); }

/* Mascot lands a beat after the plate, so the banner assembles rather than
   appearing all at once. */
@keyframes pb-mascot-in {
  0%   { opacity: 0; transform: translateX(26px) scale(.9); }
  100% { opacity: 1; transform: none; }
}
.pb-mascot {
  transform-origin: 645px 120px;
  animation: pb-mascot-in 560ms var(--ease-spring) 140ms both;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6));
}

@keyframes pb-plate-in {
  0%   { opacity: 0; transform: scaleX(.5); }
  100% { opacity: 1; transform: none; }
}
.pb-plate { transform-origin: 292px 132px; animation: pb-plate-in 560ms var(--ease-out) both; }

/* --- entrance ------------------------------------------------------------ */

@keyframes pb-in {
  0%   { opacity: 0; transform: scale(.86) translateY(10px); }
  60%  { opacity: 1; transform: scale(1.03) translateY(0); }
  100% { opacity: 1; transform: none; }
}
.gold-phase-banner { animation: pb-in 520ms var(--ease-spring) both; }

@keyframes pb-kicker-in {
  0%   { opacity: 0; letter-spacing: 30px; }
  100% { opacity: 1; letter-spacing: 12px; }
}
.pb-kicker { animation: pb-kicker-in 640ms var(--ease-out) 90ms both; }

@keyframes pb-brand-in {
  0%   { opacity: 0; }
  100% { opacity: .9; }
}
.pb-brand { animation: pb-brand-in 500ms var(--ease-out) 320ms both; }

/* --- sheen sweep ---------------------------------------------------------- */

@keyframes pb-sheen {
  0%   { transform: skewX(-18deg) translateX(0); }
  100% { transform: skewX(-18deg) translateX(1100px); }
}
.pb-sheen {
  animation: pb-sheen 1400ms cubic-bezier(.35, 0, .25, 1) 460ms 2 both;
}

@media (prefers-reduced-motion: reduce) {
  .gold-phase-banner,
  .pb-plate, .pb-mascot, .pb-kicker, .pb-brand { animation: none; }
  .pb-sheen { display: none; }
}