/* A readable, fourteen-second comic beat. Play only while the hero is visible. */
.hero-comic{--hero-cycle:14s}
.intro-controls{display:flex;align-items:center;gap:12px;flex:none}
.hero-replay{border:1px solid #bfd0c7;border-radius:3px;background:#fff;color:#345e50;padding:8px 12px;font:700 10px var(--body);min-height:38px;cursor:pointer}
.hero-replay:hover{background:#edf5ef}.hero-replay:disabled{display:none}
.hero-impact{position:absolute;z-index:2;pointer-events:none;left:42%;top:-12%;width:31%;height:75%;border-radius:50%;opacity:0;background:repeating-conic-gradient(from 8deg,transparent 0deg 18deg,#718f7f99 19deg 20deg,transparent 21deg 30deg);mask-image:radial-gradient(transparent 0% 31%,#000 35% 53%,transparent 62%)}
.hero-comic .intro-frame,.hero-comic .scene-actor img,.hero-comic .dialogue,.hero-comic .scene-sfx,.hero-comic .intro-question{animation:none}
.hero-comic.is-preparing .hero-friend img,.hero-comic.is-preparing .intro-stop,.hero-comic.is-preparing .intro-reaction,.hero-comic.is-preparing .intro-b,.hero-comic.is-preparing .intro-question{animation:none;opacity:0}
.hero-comic.is-playing .hero-customer img{animation:hero-customer-react var(--hero-cycle) linear infinite both}
.hero-comic.is-playing .hero-friend img{animation:hero-friend-arrive var(--hero-cycle) linear infinite both}
.hero-comic.is-playing .intro-frame-a{animation:hero-panel-jolt var(--hero-cycle) linear infinite both}
.hero-comic.is-playing .intro-frame-b{animation:hero-panel-arrive var(--hero-cycle) linear infinite both}
.hero-comic.is-playing .intro-a{animation:none;opacity:1}
.hero-comic.is-playing .intro-stop{animation:hero-stop-impact var(--hero-cycle) linear infinite both;transform-origin:50% 70%}
.hero-comic.is-playing .hero-impact{animation:hero-speed-lines var(--hero-cycle) linear infinite both}
.hero-comic.is-playing .intro-reaction{animation:hero-surprise var(--hero-cycle) linear infinite both}
.hero-comic.is-playing .intro-b{animation:hero-explanation var(--hero-cycle) linear infinite both}
.hero-comic.is-playing .intro-question{animation:hero-question var(--hero-cycle) linear infinite both}
@keyframes hero-friend-arrive{
 0%,14%{opacity:0;translate:115% 6%;rotate:9deg;scale:.94;animation-timing-function:cubic-bezier(.12,.78,.25,1)}
 20%{opacity:1;translate:-4% -1%;rotate:-3deg;scale:1.035;animation-timing-function:ease-out}
 23%,43%{opacity:1;translate:0 0;rotate:0deg;scale:1}
 60%{opacity:1;translate:0 -3px;rotate:-.35deg;scale:1}
 88%{opacity:1;translate:0 0;rotate:0deg;scale:1}
 96%,100%{opacity:0;translate:15% 0;rotate:3deg;scale:.98}
}
@keyframes hero-customer-react{
 0%,17%{translate:0 0;rotate:0deg;animation-timing-function:ease-out}
 20%{translate:-9px 2px;rotate:-2deg}
 23%{translate:3px 0;rotate:.6deg}
 27%,88%,100%{translate:0 0;rotate:0deg}
 60%{translate:0 -2px;rotate:0deg}
}
@keyframes hero-panel-arrive{
 0%,14%{opacity:.18;translate:24% 0;animation-timing-function:cubic-bezier(.12,.78,.25,1)}
 20%{opacity:1;translate:-1% 0}
 23%,88%{opacity:1;translate:0 0}
 96%,100%{opacity:.18;translate:15% 0}
}
@keyframes hero-panel-jolt{
 0%,19%,23%,100%{translate:0 0}
 20%{translate:-5px 2px}21%{translate:4px -1px}22%{translate:-2px 0}
}
@keyframes hero-stop-impact{
 0%,15%{opacity:0;scale:.08;rotate:-12deg;animation-timing-function:cubic-bezier(.12,.8,.28,1)}
 20%{opacity:1;scale:1.35;rotate:4deg}
 23%{opacity:1;scale:.96;rotate:-2deg}
 26%,47%{opacity:1;scale:1;rotate:0deg}
 50%{opacity:1;scale:1.06;rotate:1deg}
 54%,88%{opacity:1;scale:1;rotate:0deg}
 96%,100%{opacity:0;scale:.7;rotate:-5deg}
}
@keyframes hero-speed-lines{
 0%,16%{opacity:0;scale:.55}19%{opacity:.85;scale:1}24%,100%{opacity:0;scale:1.3}
}
@keyframes hero-surprise{
 0%,21%{opacity:0;scale:.1;translate:0 12px}
 25%{opacity:1;scale:1.25;translate:0 -5px}
 28%,83%{opacity:1;scale:1;translate:0 0}
 90%,100%{opacity:0;scale:.9;translate:0 0}
}
@keyframes hero-explanation{
 0%,28%{opacity:0;scale:.86;translate:0 12px}
 33%,88%{opacity:1;scale:1;translate:0 0}
 96%,100%{opacity:0;scale:.96;translate:0 0}
}
@keyframes hero-question{
 0%,40%{opacity:0;translate:0 8px}
 45%,88%{opacity:1;translate:0 0}
 96%,100%{opacity:0;translate:0 0}
}
@media(min-width:1001px){.intro-stop{font-size:28px}}
@media(max-width:650px){
 .intro-controls{flex-direction:column;gap:0;width:70px;align-items:stretch}
 .intro-controls .scene-motion-toggle{font-size:8px;min-height:30px;white-space:normal;line-height:1.5;padding:4px 0}
 .hero-replay{font-size:8px;padding:6px 3px;min-height:30px}
 .hero-impact{left:auto;right:-5%;top:-9%;width:59%;height:66%}
 .intro-stop{right:5%;top:-6%;font-size:18px}
}
@media(max-width:370px){.intro-stop{font-size:17px}}
@media(prefers-reduced-motion:reduce){.hero-comic *{animation:none!important}.hero-impact{display:none}}