/**
 * Hero illustration animations — Claude Design, 2026-08-19.
 *
 * Every rule is gated by .playing on the <svg>, so a story is inert until the
 * sequencer (assets/js/hero-deco.js) starts it. .frozen pauses rather than
 * resets, so the held frame is the last animated one. prefers-reduced-motion
 * kills all of it and shows the assembled artwork.
 *
 * ONE CHANGE FROM THE DESIGN, AND IT MATTERS. The original opens with a bare
 *   svg [class] { transform-box: fill-box; transform-origin: center }
 * which is not scoped to anything — it would set a transform origin on every
 * classed element inside every SVG on the site: header icons, channel glyphs,
 * the share row, the lightbox chrome. Anything of ours that is positioned or
 * rotated inside an SVG would quietly shift. Scoped to .wg-hero here, as is
 * every other selector in this file.
 */

.wg-hero svg [class] { transform-box: fill-box; transform-origin: center; }

@keyframes il-deal { 0% { opacity: 0; translate: 24px 16px; rotate: -8deg } 14%, 100% { opacity: 1; translate: 0 0; rotate: 0deg } }
.wg-hero .playing .deal { animation: il-deal 8s cubic-bezier(.25, .9, .3, 1) infinite; }

@keyframes il-sign { 0%, 18% { stroke-dashoffset: 130 } 36%, 100% { stroke-dashoffset: 0 } }
.wg-hero .playing .sign { stroke-dasharray: 130; animation: il-sign 8s ease-in-out infinite; }

@keyframes il-write { 0%, 20% { opacity: 0; translate: -9px 6px } 34% { opacity: 1; translate: 0 0 } 100% { translate: 15px -3px; opacity: 1 } }
.wg-hero .playing .write { animation: il-write 8s ease-in-out infinite; }

@keyframes il-stamp { 0%, 40% { opacity: 0; scale: 2 } 50% { opacity: 1; scale: .92 } 56%, 100% { opacity: 1; scale: 1 } }
.wg-hero .playing .stamp { animation: il-stamp 8s ease-out infinite; }

@keyframes il-stamp7 { 0%, 40% { opacity: 0; scale: 2 } 50% { opacity: 1; scale: .92 } 56%, 100% { opacity: 1; scale: 1 } }
.wg-hero .playing.e-story .stamp { animation: il-stamp7 7s ease-out infinite; }

@keyframes il-pop { 0%, 52% { opacity: 0; scale: .3 } 62% { opacity: 1; scale: 1.2 } 68%, 100% { opacity: 1; scale: 1 } }
.wg-hero .playing .pop { animation: il-pop 8s ease-out infinite; }

@keyframes il-tw { 0%, 100% { opacity: .74; scale: .95 } 50% { opacity: 1; scale: 1.05 } }
.wg-hero .playing .tw { animation: il-tw 3.6s ease-in-out infinite; }

@keyframes il-sway { 0%, 100% { rotate: -3deg } 50% { rotate: 3deg } }
.wg-hero .playing .sway { animation: il-sway 4.8s ease-in-out infinite; }

@keyframes il-chip { 0% { opacity: 0; scale: .45 } 12% { opacity: 1; scale: 1.1 } 18%, 100% { opacity: 1; scale: 1 } }
.wg-hero .playing .chip { animation: il-chip 7.5s cubic-bezier(.3, 1.4, .4, 1) infinite; }

@keyframes il-spin { to { rotate: 360deg } }
.wg-hero .playing .spin { animation: il-spin 28s linear infinite; }

@keyframes il-march { to { stroke-dashoffset: -100 } }
.wg-hero .playing .march { animation: il-march 5s linear infinite; }

@keyframes il-drop { 0% { opacity: 0; translate: 0 -60px } 16% { opacity: 1; translate: 0 7px } 22%, 100% { translate: 0 0; opacity: 1 } }
.wg-hero .playing .drop { animation: il-drop 7.5s cubic-bezier(.3, 1.2, .4, 1) infinite; }

@keyframes il-lid { 0%, 8% { opacity: 0; translate: 0 -90px; rotate: -7deg } 26% { opacity: 1; translate: 0 5px; rotate: 0deg } 32%, 100% { translate: 0 0; opacity: 1 } }
.wg-hero .playing .lid { animation: il-lid 7.5s cubic-bezier(.3, 1.2, .4, 1) infinite; }

@keyframes il-bow { 0%, 32% { opacity: 0; scale: .4 } 42% { opacity: 1; scale: 1.14 } 48%, 100% { opacity: 1; scale: 1 } }
.wg-hero .playing .bow { animation: il-bow 7.5s cubic-bezier(.3, 1.5, .4, 1) infinite; }

@keyframes il-burst { 0%, 42% { opacity: 0; scale: .2; translate: 0 0 } 54% { opacity: 1; scale: 1 } 100% { opacity: 1; translate: 0 8px } }
.wg-hero .playing .burst { animation: il-burst 7.5s ease-out infinite; }

@keyframes il-swing { 0%, 100% { rotate: -5deg } 50% { rotate: 7deg } }
.wg-hero .playing .swing { animation: il-swing 3.6s ease-in-out infinite; }

@keyframes il-float { 0%, 100% { translate: 0 0; rotate: -1.3deg } 50% { translate: 0 -15px; rotate: 1.3deg } }
.wg-hero .playing .float { animation: il-float 4s ease-in-out infinite; }

@keyframes il-flag { 0%, 100% { rotate: -7deg } 50% { rotate: 7deg } }
.wg-hero .playing .flag { animation: il-flag 2.6s ease-in-out infinite; }

@keyframes il-strsway { 0%, 100% { rotate: -2.5deg } 50% { rotate: 2.5deg } }
.wg-hero .playing .strsway { animation: il-strsway 4.4s ease-in-out infinite; }

@keyframes il-slideout { 0% { opacity: 0; translate: -34px 52px } 20% { opacity: 1 } 42%, 100% { opacity: 1; translate: 0 0 } }
.wg-hero .playing .slideout { animation: il-slideout 7s cubic-bezier(.3, .9, .3, 1) infinite; }

@keyframes il-rise { 0%, 44% { opacity: 0; translate: 0 12px; scale: .5 } 58% { opacity: 1; scale: 1 } 100% { opacity: 1; translate: 0 -12px } }
.wg-hero .playing .rise { animation: il-rise 7s ease-out infinite; }

@keyframes il-wave { 0%, 3% { opacity: 0; scale: .6 } 12%, 100% { opacity: 1; scale: 1 } }
.wg-hero .playing .wave { animation: il-wave 7.5s ease-out infinite; }

@keyframes il-markpop { 0%, 14% { opacity: 0; scale: .35 } 26% { opacity: 1; scale: 1.22 } 32%, 100% { opacity: 1; scale: 1 } }
.wg-hero .playing .markpop { animation: il-markpop 7.5s cubic-bezier(.3, 1.5, .4, 1) infinite; }

@keyframes il-pulse { 0%, 16% { opacity: 0; scale: .8 } 30% { opacity: 1; scale: 1.3 } 44%, 100% { opacity: .5; scale: 1 } }
.wg-hero .playing .pulse { animation: il-pulse 7.5s ease-out infinite; }

@keyframes il-blink { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
.wg-hero .playing .blink { animation: il-blink 2.8s ease-in-out infinite; }

@keyframes il-nudge { 0%, 100% { translate: 0 0 } 50% { translate: 3px 0 } }
.wg-hero .playing .nudge { animation: il-nudge 3.2s ease-in-out infinite; }

@keyframes il-curl { 0%, 100% { translate: 0 0; rotate: 0deg } 50% { translate: -3px -3px; rotate: -2deg } }
.wg-hero .playing .curl { animation: il-curl 5.5s ease-in-out infinite; }

@keyframes il-floatline { 0%, 100% { translate: 0 0 } 50% { translate: 0 -15px } }
.wg-hero .playing .floatline { animation: il-floatline 4s ease-in-out infinite; }

@keyframes il-swapout { 0%, 3% { opacity: 0; scale: .6 } 12%, 20% { opacity: 1; scale: 1 } 30%, 100% { opacity: 0; scale: .85 } }
.wg-hero .playing .swapout { animation: il-swapout 7.5s ease-in-out infinite; }

/* Armed but not yet playing: hold the pieces hidden so a story never flashes
   assembled before its entrance runs. */
.wg-hero .slot.arm .deal, .wg-hero .slot.arm .chip, .wg-hero .slot.arm .slideout,
.wg-hero .slot.arm .rise, .wg-hero .slot.arm .stamp, .wg-hero .slot.arm .pop,
.wg-hero .slot.arm .wave, .wg-hero .slot.arm .swapout, .wg-hero .slot.arm .markpop,
.wg-hero .slot.arm .pulse, .wg-hero .slot.arm .burst, .wg-hero .slot.arm .bow,
.wg-hero .slot.arm .drop, .wg-hero .slot.arm .lid, .wg-hero .slot.arm .write { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .wg-hero svg [class] {
    animation: none !important;
    opacity: 1 !important;
    scale: 1 !important;
    translate: 0 0 !important;
    rotate: 0deg !important;
    stroke-dashoffset: 0 !important;
  }
}