/* the hero board's scenes: one at a time, each drawing itself when shown */
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s; }
.scene.on { opacity: 1; visibility: visible; transition: opacity .6s var(--ease); }
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-tabs { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.scene-tabs button { font: 600 .78rem/1 var(--f-body); color: var(--chalk-3); background: color-mix(in srgb, var(--ground) 72%, transparent); border: 1px solid var(--rule); border-radius: 999px; padding: 7px 11px; cursor: pointer; position: relative; overflow: hidden; }
.scene-tabs button:hover { color: var(--chalk); }
.scene-tabs button[aria-selected="true"] { color: var(--chalk); border-color: var(--rule-2); }
.scene-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--saffron); transform-origin: left; animation: tick var(--dur, 7s) linear forwards; }
.board.paused .scene-tabs button::after { animation-play-state: paused; }
@keyframes tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.board-cap, .board-note { top: auto; bottom: 12px; }
.board-cap { left: 18px; } .board-note { right: 14px; }
.board.has-v .board-cap, .board.has-v .board-note { display: none; }
.grow-x { transform-box: fill-box; transform-origin: right center; transform: scaleX(0); }
.scene.go .grow-x { animation: growx .5s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes growx { to { transform: scaleX(1); } }
.scene.go .draw { animation: chalk 1.4s var(--ease) forwards; animation-delay: var(--d, 0s); }
.scene.go .fade { animation: fadein .6s var(--ease) forwards; animation-delay: var(--d, 0s); }
.scene.go .grow { animation: grow .45s var(--ease) forwards; animation-delay: var(--d, 0s); }
.scene .verdict { opacity: 0; transform: translateY(14px); }
.scene.go .verdict { animation: land .7s var(--ease) forwards; animation-delay: 3.6s; }
.scene.go .v-tag::after { animation: shine 1.1s var(--ease) forwards; animation-delay: 4.2s; }
.v-tag { font-size: 1.15rem; padding: 8px 14px; }
@media (prefers-reduced-motion: reduce) { .grow-x { transform: none; } .scene-tabs button[aria-selected="true"]::after { animation: none; transform: none; } }