/* ==================================================================
   Chrome star sprites.
   ==================================================================

   Rotation sheets built by scripts/build-star-sprites.py. This file is
   the engine only -- per-product placement rules (sizes, delays, which
   element spins on hover) belong in the product's own stylesheet.

   Sheets are They exist
   because a CSS rotateY() on the flat art keeps the highlights welded
   where they were painted -- the star turns, but the metal never
   catches the light, so it reads as spinning paper. The flash as the
   star goes edge-on is baked into the frames instead.

   Sizing is driven by --star-size, so one sheet serves a 13px bullet
   and a 200px hero without a second export. The step count has to be a
   literal in steps(), so each sheet gets its own timing rule.
   ================================================================== */

.cs-star {
    display: inline-block;
    flex: none;
    width: var(--star-size, 16px);
    height: var(--star-size, 16px);
    background-repeat: no-repeat;
    /* The strip is --star-frames boxes wide; one frame fills the box. */
    background-size: calc(var(--star-size, 16px) * var(--star-frames)) var(--star-size, 16px);
    background-position-x: 0;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Frame 0 is face-on, so anything that is not playing rests on the pose
   the static artwork always had. */
@keyframes cs-star-play {
    to { background-position-x: calc(var(--star-size, 16px) * var(--star-frames) * -1); }
}

.cs-star--5 {
    --star-frames: 32;
    background-image: url("../assets/stars/star5-spin.webp?v=dfc76a4f");
}
.cs-star--4 {
    --star-frames: 24;
    background-image: url("../assets/stars/star4-spin.webp?v=b0679ecc");
}

/* ---------------- playback ----------------
   is-playing loops; spin-once is the celebratory single turn a result
   makes as it is pinned, after which it settles back on frame 0. */
.cs-star.is-playing,
.cs-star.spin-once {
    animation-name: cs-star-play;
    animation-duration: var(--star-dur, 2.4s);
    animation-fill-mode: none;
}
.cs-star.is-playing { animation-iteration-count: infinite; }
.cs-star.spin-once  { animation-iteration-count: 1; }

.cs-star--5.is-playing,      .cs-star--5.spin-once      { animation-timing-function: steps(32); }
.cs-star--4.is-playing,      .cs-star--4.spin-once      { animation-timing-function: steps(24); }

/* Seating shadow, so a sprite sits on the void like the static art. */
.cs-star--seated {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.85))
            drop-shadow(0 0 5px rgba(142,220,255,.5));
}

/* No reduced-motion gate on the sheets, deliberately.

   The stars are the brand mark, and the sheets are the only thing that
   makes flat painted art read as metal -- a star stopped on frame 0 is
   not a still version of the mark, it is a dull one. The site chooses to
   show them turning for everyone.

   This block also used to be unterminated: it opened @media and the file
   ended before the closing brace, which browsers forgive at EOF and
   tooling does not. Removing it settles that too -- the braces balance. */