/* de-Frog's opening (intro.js; Andrew, 11-07): the old man on his porch, 9:16, scaled to fit. Moments are data-beat
   and past-* classes. Reduced motion (.calm): no rocking, no blinking; the same words. */
body.intro-on{overflow:hidden}
.intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#07060a;color:#eee4cf;
 -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation}
.intro-frame{position:relative;width:min(100vw,calc(100svh * 9 / 16));aspect-ratio:9/16;overflow:hidden;container-type:inline-size}
.intro-scene{display:block;width:100%;height:100%}
.intro-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#intro-skip{position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;min-width:64px;min-height:44px;padding:6px 14px;
 font:700 14px/1 system-ui,sans-serif;color:#eee4cf;background:#211b13cc;border:1px solid #79745b;border-radius:12px;cursor:pointer;z-index:2}
#intro-skip:focus-visible{outline:3px solid #c5aa70;outline-offset:2px}

/* The camera (Andrew, 11-07): far out on the whole house while the title cards show, then one slow push in to the
   porch as he starts to talk. Wide: centered at (165, 160), zoom 0.33; close: the porch shot, zoom 1. */
.intro-cam{transform-box:view-box;transform-origin:0 0;transform:translate(125.5px,267px) scale(.33)}
.intro.past-creak .intro-cam{animation:intro-cam 4.4s cubic-bezier(.45,0,.25,1) forwards}
@keyframes intro-cam{from{transform:translate(125.5px,267px) scale(.33)}to{transform:translate(0,0) scale(1)}}
.intro.calm .intro-cam{transform:none}

/* Title cards over the wide shot: each fades in, holds, fades out. */
.intro-card{position:absolute;top:30%;left:6%;right:6%;display:grid;justify-items:center;gap:10px;text-align:center;
 font:800 clamp(16px,6.4cqw,28px)/1.2 system-ui,sans-serif;color:#eee4cf;letter-spacing:.04em;text-shadow:0 3px 14px #000;
 animation:intro-card 2.4s ease-in-out both}
.intro-card.title{top:26%;font:900 clamp(40px,17cqw,76px)/1 system-ui,sans-serif;color:#fad66e;letter-spacing:.01em;animation-duration:2.6s}
.intro-frog{width:30%;height:auto;filter:drop-shadow(0 0 10px #ffaaa380)}
@keyframes intro-card{0%{opacity:0;transform:translateY(8px)}22%,78%{opacity:1;transform:none}100%{opacity:0}}
/* "VirtualHouseAudio.com Presents:" holds about 5 s (Andrew, 11-07): the same fades over a 6 s card. */
.intro-card.presents{animation:intro-card-long 6s ease-in-out both}
@keyframes intro-card-long{0%{opacity:0;transform:translateY(8px)}9%,91%{opacity:1;transform:none}100%{opacity:0}}
.intro.calm .intro-card{opacity:1}

/* The speech bubble, above his head. */
.intro-bubble{position:absolute;bottom:64%;left:7%;right:7%;padding:14px 16px;background:#f4efe6;color:#1a1020;border:3px solid #6b4a2b;border-radius:18px;
 font:800 clamp(14px,7cqw,30px)/1.25 system-ui,sans-serif;box-shadow:0 6px 20px #000a}
.intro-bubble::after{content:'';position:absolute;left:42%;bottom:-17px;border:14px solid transparent;border-top:16px solid #6b4a2b;border-bottom:0}
.intro-bubble span{display:block;min-height:1.25em}
/* A hidden copy of the whole line under the typed words sizes the bubble from the start (intro.js; scenes.js uses it too). */
.intro-bubble{display:grid}
.intro-bubble[hidden]{display:none}
.intro-bubble>span,.intro-ghost{grid-area:1/1}
.intro-ghost{visibility:hidden;font-style:normal}
/* EVIL in the red frog's own color (the in-play coral frog, #FFAAA3; Andrew, 11-07), outlined so it reads on the light bubble. */
.intro-evil{color:#ffaaa3;font-weight:900;letter-spacing:.04em;font-size:1.18em;text-transform:uppercase;-webkit-text-stroke:2px #1a1020;paint-order:stroke fill;text-shadow:0 2px 0 #1a1020}

/* Rocking: the chair and the man tip back and forth on the rockers the whole time, one continuous shot (Andrew,
   11-07); when he smells it only his eyes open and his brows go up. */
.intro-rock{transform-box:fill-box;transform-origin:50% 100%;animation:intro-rock 1.5s ease-in-out infinite}
@keyframes intro-rock{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.intro-awake{opacity:0;transition:opacity .25s}
.intro-sleepy{transition:opacity .25s}
/* His eyes open as soon as his first line comes up (Andrew, 11-07); on "EVIL" his brows go up. */
.intro.past-say1 .intro-awake{opacity:1}
.intro.past-say1 .intro-sleepy{opacity:0}
.intro-brows{transform-box:fill-box;transform-origin:50% 100%;transition:transform .2s}
.intro[data-beat="say2"] .intro-brows{transform:translateY(-5px)}
.intro-nose{transform-box:fill-box;transform-origin:50% 50%}
.intro[data-beat="say2"] .intro-nose{animation:intro-sniff .22s ease-in-out 4}
@keyframes intro-sniff{50%{transform:translateY(-2px) scale(1.12)}}

/* Frog eyes light up in the dark pond, one pair after another, and blink. */
.in-eye{opacity:0;animation:intro-eyes-on .4s ease-out forwards,intro-blink 3.2s steps(1) infinite}
.in-eye.e1{animation-delay:.3s,1.6s}.in-eye.e2{animation-delay:.8s,2.3s}.in-eye.e3{animation-delay:1.3s,2.9s}
.in-eye.e4{animation-delay:1.8s,1.9s}.in-eye.e5{animation-delay:2.3s,2.6s}
.in-eye.e6{animation-delay:1.1s,2.1s}.in-eye.e7{animation-delay:1.6s,2.7s}.in-eye.e8{animation-delay:2.6s,1.7s}
@keyframes intro-eyes-on{to{opacity:1}}
@keyframes intro-blink{0%,92%{transform:none}93%,96%{transform:scaleY(.1)}}
.in-eye{transform-box:fill-box;transform-origin:50% 50%}

.intro.calm *,.intro.calm{animation:none!important;transition:none!important}
.intro.calm .in-eye{opacity:1}