/* Animated hero for the stage and outdoors guide, loaded only by the page
   that shows it. */

/* -------------------------------------------------- Stage and outdoors hero */
/* Animated hero on /stage-and-outdoors: a tablet on a music stand goes from
   the sun (glare washing over the music), to the brightness turned up (the
   glare clears), to a dark stage under a spotlight (the music switches to
   light notes on black and the brightness comes down). Art is drawn at
   1200x600; public/hero.js scales it via --so-scale. */
.so-hero{--so-accent:#4f8cff;--so-dur:9s;--so-bg:#f3f5fa;--so-line:rgba(22,33,58,0.22);--so-stand:#3b4870;--so-stand-dark:#26314d;--so-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--so-bg)}
.so-hero.so-dark{--so-bg:#0e1626;--so-line:rgba(255,255,255,0.22);--so-stand:#56668c;--so-stand-dark:#7a89ad}
.so-hero > .so-scn{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--so-scale))}
/* The sun shines through the first two parts, then gives way to the spotlight. */
.so-scn .so-sun{animation:so-sun var(--so-dur) ease-in-out infinite}
@keyframes so-sun{0%,52%{opacity:1;transform:none}58%,94%{opacity:0;transform:translateY(40px) scale(.7)}100%{opacity:1;transform:none}}
.so-scn .so-rays{animation:so-rays var(--so-dur) linear infinite}
@keyframes so-rays{0%{transform:rotate(0deg)}100%{transform:rotate(90deg)}}
.so-scn .so-spot{opacity:0;animation:so-spot var(--so-dur) ease-in-out infinite}
@keyframes so-spot{0%,54%{opacity:0}60%,92%{opacity:1}97%,100%{opacity:0}}
/* Glare: a wash over the screen, with streaks sweeping across, until the brightness goes up. */
.so-scn .so-wash{animation:so-wash var(--so-dur) ease-in-out infinite}
@keyframes so-wash{0%,24%{opacity:.62}38%,100%{opacity:0}}
.so-scn .so-streak{animation:so-streak var(--so-dur) ease-in-out infinite}
@keyframes so-streak{0%{transform:translateX(-160%) rotate(18deg);opacity:1}14%{transform:translateX(260%) rotate(18deg);opacity:1}14.1%{transform:translateX(-160%) rotate(18deg);opacity:1}28%{transform:translateX(260%) rotate(18deg);opacity:1}28.1%,100%{transform:translateX(-160%) rotate(18deg);opacity:0}}
/* Brightness: half, then full in the sun, then down for the dark stage. */
.so-scn .so-fill{animation:so-fill var(--so-dur) ease-in-out infinite}
@keyframes so-fill{0%,22%{width:45%}36%,54%{width:100%}62%,94%{width:32%}100%{width:45%}}
/* Dark stage: the same page as light notes on black. */
.so-scn .so-dark-page{opacity:0;animation:so-darkpage var(--so-dur) ease-in-out infinite}
@keyframes so-darkpage{0%,56%{opacity:0}62%,92%{opacity:1}97%,100%{opacity:0}}
/* One label above the tablet for each part. */
.so-scn .so-chip-glare{animation:so-c1 var(--so-dur) ease-in-out infinite}
.so-scn .so-chip-bright{opacity:0;animation:so-c2 var(--so-dur) ease-in-out infinite}
.so-scn .so-chip-dark{opacity:0;animation:so-c3 var(--so-dur) ease-in-out infinite}
@keyframes so-c1{0%,22%{opacity:1}26%,96%{opacity:0}100%{opacity:1}}
@keyframes so-c2{0%,24%{opacity:0}28%,52%{opacity:1}56%,100%{opacity:0}}
@keyframes so-c3{0%,54%{opacity:0}58%,92%{opacity:1}96%,100%{opacity:0}}
.so-chip{background:#16213a;color:#ffffff}
/* Site integration, matching the other guide heroes. */
.legal .so-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1040 / 540;
  --so-bg: transparent;
  --so-view-w: 1040;
  --so-crop-x: -95px;
  --so-crop-y: -2px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent),
                      linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent),
              linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
.legal .so-hero > .so-scn { transform: scale(var(--so-scale)) translate(var(--so-crop-x), var(--so-crop-y)); }
/* !important because the art sets the chips' transform inline. */
.legal .so-hero .so-chip { transform: translateX(-50%) scale(1.5) !important; transform-origin: 50% 100%; }
.legal .so-hero .so-card { transform: scale(1.3); transform-origin: 0 50%; }
.js .so-hero:not(.pt-ready) > .so-scn { visibility: hidden; }
:root[data-theme="light"] .so-hero { --so-line: rgba(22, 33, 58, 0.22); --so-stand: #3b4870; --so-stand-dark: #26314d; }