/* Cover art: styles for the code-drawn SVG that js/cover-art.js builds.
   Tokens only, per the shared contract, so a future dark-theme remap or a
   future palette change reaches this for free the same way css/style.css
   documents for the rest of the site.

   Default state (no is-playing class) is the composed, landed frame: tiles
   at rest, the ring complete, a quiet spark already lit. That default IS
   the "static composed frame under prefers-reduced-motion" the spec asks
   for, because js/cover-art.js never adds is-playing when the visitor has
   asked for reduced motion, and it's also what a slow connection or a
   disabled-JS page would see if this stylesheet ever loaded without the
   module (print, or the split second before the module runs). */

.cover {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
/* Card size is a wide banner, not a small icon: it sizes to whatever width
   its host gives it (a gcard, a teaser panel, a future host), and the host
   controls that width. js/cover-art.js draws a wider 240x120 viewBox for
   this size so the tiles stay legible at banner scale instead of shrinking
   the hero's own 120x120 drawing into a corner. A host that needs a
   different shape (see css/games-teaser.css) overrides aspect-ratio with a
   more specific selector rather than editing this rule. */
.cover--card { aspect-ratio: 2 / 1; }
.cover--hero { max-width: 380px; margin-inline: auto; }

.cover__art { display: block; width: 100%; height: 100%; overflow: visible; }

/* Ring: dasharray is fixed for r=50 (circumference = 2 * pi * 50 ~ 314.16).
   Depletes over a 7s loop, then jumps back to full at the wrap, echoing the
   game's own countdown resetting for the next round. */
.cover__ring {
  fill: none;
  stroke: var(--green-bright);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 314.16;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  opacity: .55;
}
.cover.is-playing .cover__ring { animation: coverRing 7s linear infinite; }
@keyframes coverRing {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 314.16; }
}

.cover__tile { transform-box: fill-box; transform-origin: center; }
.cover__tile-bg {
  fill: var(--paper);
  stroke: var(--line);
  stroke-width: 1.5;
}
.cover__tile-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  fill: var(--ink-2);
  letter-spacing: .01em;
}

/* Each tile starts scattered by its own offset and slides home in the same
   7s loop as the ring, landing (55%-75%) right as the ring bottoms out. */
.cover.is-playing .cover__tile--0 { animation: coverTile0 7s ease-in-out infinite; }
.cover.is-playing .cover__tile--1 { animation: coverTile1 7s ease-in-out infinite; }
.cover.is-playing .cover__tile--2 { animation: coverTile2 7s ease-in-out infinite; }
.cover.is-playing .cover__tile--3 { animation: coverTile3 7s ease-in-out infinite; }

@keyframes coverTile0 {
  0%, 100% { transform: translate(-36px, -24px) rotate(-9deg); }
  55%, 75% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes coverTile1 {
  0%, 100% { transform: translate(-15px, 22px) rotate(6deg); }
  55%, 75% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes coverTile2 {
  0%, 100% { transform: translate(17px, -19px) rotate(-6deg); }
  55%, 75% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes coverTile3 {
  0%, 100% { transform: translate(32px, 17px) rotate(7deg); }
  55%, 75% { transform: translate(0, 0) rotate(0deg); }
}

/* Spark: a small quiet star by default (the "locked in" cue in the composed
   frame), pulsing brighter right as the tiles land while playing. */
.cover__spark {
  fill: var(--sun-bright);
  opacity: .85;
  transform-box: fill-box;
  transform-origin: center;
}
.cover.is-playing .cover__spark { animation: coverSpark 7s ease-in-out infinite; }
@keyframes coverSpark {
  0%, 52%, 100% { opacity: 0; transform: scale(.4); }
  60%           { opacity: 1; transform: scale(1.2); }
  70%           { opacity: 0; transform: scale(.8); }
}

/* IntersectionObserver adds this when the box scrolls out of view; CSS just
   stops the clock where it is rather than resetting it. */
.cover.is-offscreen .cover__ring,
.cover.is-offscreen .cover__tile,
.cover.is-offscreen .cover__spark {
  animation-play-state: paused;
}