/* The forest is an opening scene, never a numbered research slide. */
#forest-intro[hidden]{display:none!important}
#forest-intro{position:fixed;inset:0;z-index:100;background:#050908;color:#eff3e4;overflow:hidden;font-family:inherit}
.intro-active #app{visibility:hidden}.intro-active #page-cat,.cover-page #page-cat{display:none!important}
.forest-backdrop{position:absolute;inset:0;background:#10231d url('assets/opening/forest.webp') center 62%/cover no-repeat;opacity:1}
.forest-vignette{position:absolute;inset:0;background:linear-gradient(#07110c33,transparent 35%,#07110c33),radial-gradient(ellipse at 48% 45%,transparent 25%,#03090666 100%);pointer-events:none}
.forest-top,.forest-bottom{position:absolute;left:3.5vw;right:3.5vw;display:flex;align-items:center;justify-content:space-between;z-index:3}
.forest-top{top:28px;font-family:Arial,sans-serif;font-size:22px;letter-spacing:-1px;font-weight:700}.opening-dot{color:#d0f96b}.forest-top small{font-size:9px;letter-spacing:2px;font-weight:400;margin-left:24px;color:#a8b99e}
#forest-intro button{font-family:inherit;cursor:pointer}.intro-skip{border:1px solid #cad8be55;padding:12px 16px;font-size:11px;color:#d4dfc8;background:#0e1b14aa}
.opening-content{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:min(700px,92vw);text-align:center;z-index:2}
.opening-kicker{font:9px Arial,sans-serif;letter-spacing:3px;color:#bfceae;margin:0 0 12px}.opening-content h1{font-size:clamp(19px,2.1vw,29px);font-weight:400;letter-spacing:-.5px;margin:0 0 30px}
.qr-island{position:relative;width:clamp(200px,24vh,270px);margin:0 auto 26px;transform:translateX(-25px)}
.qr-entrance{position:relative;z-index:1}.opening-qr{display:block;padding:17px;background:#f3f5e9;border:1px solid #ffffffbb;border-radius:8px;box-shadow:0 20px 70px #0009,0 0 55px #c1e28a13;line-height:0}
.opening-qr img{display:block;width:100%;height:auto;background:white;border-radius:2px}.opening-qr:focus-visible{outline:3px solid #d0f96b;outline-offset:6px}
.opening-cat{position:absolute;width:145px;left:calc(100% - 11px);bottom:-8px;z-index:2;transform-origin:50% 95%;filter:drop-shadow(0 8px 5px #0007)}.opening-cat svg{width:100%;height:auto;overflow:visible;display:block}.cat-settle{transform-origin:50% 95%}
.intro-tail{transform-origin:100px 137px}.intro-head{transform-origin:71px 90px}.intro-wave{transform-origin:98px 126px}.intro-eyes{transform-origin:70px 66px}.intro-happy{opacity:0}
.cat-hello{position:absolute;right:-24px;top:16px;background:#e3edce;color:#243324;border-radius:16px 16px 16px 2px;padding:8px 14px;font-size:13px;opacity:1;transform:rotate(5deg)}
.opening-copy p{font-size:14px;color:#e1e9d7;margin:0 0 9px}.opening-copy span{font-size:11px;color:#a4b79b;letter-spacing:.3px}
.opening-start{margin-top:28px;padding:14px 22px;background:#d0f96b;color:#142017;font-size:13px;border:0;min-width:190px;display:inline-flex;justify-content:space-between;gap:40px}.opening-start:hover{background:#e3ff9b}
.forest-bottom{bottom:26px;font:9px Arial,sans-serif;letter-spacing:3px;color:#a5b694}.forest-bottom button{background:#0d1c14aa;border:1px solid #9fb38f55;color:#cbd8be;font-size:10px;padding:10px 13px;letter-spacing:.3px}
.fireflies{position:absolute;inset:0;pointer-events:none}.fireflies i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#d0f96b;box-shadow:0 0 10px 3px #b8de6955;animation:forest-firefly var(--duration) var(--delay) ease-in-out infinite}
.is-playing .forest-backdrop{animation:forest-reveal 2.5s ease-out both}.is-playing .qr-entrance{animation:qr-arrive 1.6s .65s cubic-bezier(.16,1,.3,1) both}.is-playing .opening-cat{animation:cat-approach 2.7s 1s cubic-bezier(.25,.65,.4,1) both}.is-playing .cat-settle{animation:cat-breathe 4.8s 3.8s ease-in-out infinite}.is-playing .intro-tail{animation:intro-tail 4s 3.7s ease-in-out infinite}.is-playing .intro-wave{animation:cat-wave 3.8s 3.8s ease-in-out infinite}.is-playing .intro-eyes{animation:cat-eyes 7s 4s infinite}.is-playing .intro-happy{animation:cat-happy 7s 4s infinite}.is-playing .cat-hello{animation:cat-hello 7s 3.7s both infinite}.is-playing .opening-kicker,.is-playing .opening-content h1,.is-playing .opening-copy{animation:intro-copy 1.4s .6s both}
@keyframes forest-reveal{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
@keyframes qr-arrive{0%{opacity:0;transform:scale(.08) translateY(-80px)}65%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes cat-approach{0%{opacity:0;transform:translate(-56vw,-10vh) scale(.18) rotate(-15deg)}15%{opacity:1;transform:translate(-43vw,8vh) scale(.28) rotate(8deg)}37%{transform:translate(-30vw,-18vh) scale(.5) rotate(-12deg)}57%{transform:translate(-19vw,5vh) scale(.65) rotate(7deg)}79%{transform:translate(-7vw,-17vh) scale(.9) rotate(-10deg)}94%{transform:translate(0,0) scale(1.08,.88) rotate(0)}100%{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes cat-breathe{50%{transform:scale(1.015,.985)}}
@keyframes intro-tail{50%{transform:rotate(-12deg)}}
@keyframes cat-wave{0%,70%,100%{transform:rotate(0)}15%,40%{transform:rotate(-20deg)}28%,53%{transform:rotate(5deg)}}
@keyframes cat-eyes{0%,6%,80%,100%{opacity:1}10%,75%{opacity:0}}
@keyframes cat-happy{0%,6%,80%,100%{opacity:0}10%,75%{opacity:1}}
@keyframes cat-hello{0%{opacity:0;transform:scale(.6) rotate(5deg)}8%,60%{opacity:1;transform:scale(1) rotate(5deg)}76%,100%{opacity:0;transform:scale(.96) rotate(5deg)}}
@keyframes forest-firefly{0%,100%{opacity:.15;transform:translate(0,0)}50%{opacity:.85;transform:translate(14px,-20px)}}
@keyframes intro-copy{from{opacity:0}to{opacity:1}}
.motion-off #forest-intro *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){#forest-intro *{animation:none!important}.intro-happy{opacity:1}.intro-eyes{opacity:0}}
@media(max-width:700px){.forest-top{top:20px;font-size:17px}.forest-top small{display:none}.intro-skip{font-size:10px;padding:10px}.opening-content{top:48%}.opening-content h1{font-size:20px;margin-bottom:24px}.opening-kicker{font-size:7px;letter-spacing:1.8px}.qr-island{width:195px;transform:translateX(-26px)}.opening-cat{width:103px;bottom:0}.cat-hello{font-size:10px;right:0;top:-18px;padding:6px 10px}.opening-qr{padding:13px}.opening-copy p{font-size:12px}.forest-bottom>span{font-size:7px;letter-spacing:1px}.forest-bottom{bottom:20px}.opening-start{margin-top:22px}.forest-backdrop{background-position:48% center}}
@media(max-height:620px) and (min-width:701px){.opening-content{top:51%}.opening-content h1{font-size:20px;margin-bottom:14px}.qr-island{width:170px;margin-bottom:12px}.opening-cat{width:105px}.opening-start{margin-top:14px;padding:10px 18px}.forest-top{top:16px}.forest-bottom{bottom:12px}}

/* Nine-second opening: fixed-facing leaps, a front-side landing and the original greeting. */
#forest-intro{--story:9s;--run-in:clamp(240px,54vw,740px)}
.qr-island{isolation:isolate;margin-bottom:30px}.qr-entrance{z-index:2}
.opening-content h1{margin-bottom:40px}
.opening-cat{width:145px;left:calc(100% - 11px);z-index:3;pointer-events:none}
.cat-settle{position:relative;transform-origin:50% 95%}
.opening-cat .cat-leaping{position:absolute;inset:0;opacity:0}
.cat-ground{position:absolute;bottom:0;left:22%;width:60%;height:9px;background:#02080699;border-radius:50%;filter:blur(3px);opacity:.28}
.qr-halo{position:absolute;inset:-35%;border-radius:50%;background:radial-gradient(ellipse,#c7ef7c16,transparent 65%);pointer-events:none;z-index:-1}
.intro-foot{transform-box:fill-box;transform-origin:center}.intro-arm{transform-origin:43px 115px}
.cat-hello{right:-24px;top:16px;white-space:nowrap;opacity:0}
.chase-flight{position:absolute;left:calc(100% + 60px);bottom:95px;width:10px;height:10px;z-index:4;pointer-events:none;opacity:0}
.firefly-core{position:absolute;inset:1px;border-radius:50%;background:#fffbdc;box-shadow:0 0 9px 4px #e8f7a1,0 0 28px 10px #d6f17788,0 0 70px 22px #b5d56d33;animation:firefly-pulse .65s ease-in-out infinite alternate}
.firefly-trail{position:absolute;right:3px;top:4px;width:65px;height:2px;transform-origin:right center;transform:rotate(-12deg);background:linear-gradient(90deg,transparent,#c9e87b88,#f7ffd2);border-radius:50%;filter:blur(.5px)}
.firefly-trail:before{content:'';position:absolute;border-radius:50%;width:3px;height:3px;background:#e4f6aa;right:25px;top:-6px;box-shadow:-18px 9px 0 #e4f6aa88,-35px -4px 0 #e4f6aa44}
.firefly-wing{position:absolute;width:12px;height:6px;border:1px solid #f6ffd599;border-radius:90% 20%;background:#f6ffd533;top:-6px;left:-8px;transform-origin:100% 100%;animation:firefly-wing .12s ease-in-out infinite alternate}.wing-right{left:7px;animation-direction:alternate-reverse}
.is-playing .forest-backdrop{animation:forest-reveal .8s ease-out both}
.is-playing .qr-entrance{animation:qr-arrive 1s .45s cubic-bezier(.16,1,.3,1) both}
.is-playing .opening-cat{animation:cat-travel var(--story) both linear}
.is-playing .cat-settle{animation:cat-leap-height var(--story) both linear,cat-breathe 4.8s 9s ease-in-out infinite}
.is-playing .cat-standing{animation:standing-pose var(--story) both linear}
.is-playing .cat-leaping{animation:leaping-pose var(--story) both linear}
.is-playing .cat-ground{animation:leap-shadow var(--story) both linear}
.is-playing .intro-foot{animation:none}
.is-playing .intro-tail{animation:intro-tail 4s 4.5s ease-in-out infinite}
.is-playing .intro-wave{animation:cat-wave 3.8s 4.6s ease-in-out infinite}
.is-playing .intro-head,.is-playing .jump-face{animation:none;transform:none}
.is-playing .intro-eyes{animation:cat-eyes 7s 4.8s infinite}
.is-playing .intro-happy{animation:cat-happy 7s 4.8s infinite}
.is-playing .cat-hello{animation:cat-hello 7s 4.5s both infinite}
.is-playing .chase-flight{animation:firefly-dart 4.1s .1s both linear}
.is-playing .qr-halo{animation:halo-breathe 5s 1.2s both ease-in-out infinite}
.is-playing .opening-kicker,.is-playing .opening-content h1{animation:intro-copy .65s 1.05s both}
.is-playing .opening-copy{animation:intro-copy .7s .9s both}
@keyframes cat-travel{
 0%,5%{transform:translateX(calc(0px - var(--run-in)))}
 18%,22%{transform:translateX(calc(0px - var(--run-in)*.55))}
 35%{transform:translateX(8px)}
 43%,100%{transform:translateX(0)}
}
@keyframes cat-leap-height{
 0%{transform:translateY(90px) scale(.8)}
 5%{transform:translateY(96px) scale(.96,.6);animation-timing-function:cubic-bezier(.16,.7,.36,1)}
 11%{transform:translateY(-30px) scale(.88,.94);animation-timing-function:cubic-bezier(.65,0,.84,.3)}
 17%{transform:translateY(78px) scale(.86,.97)}
 18%{transform:translateY(96px) scale(1,.61)}
 20%{transform:translateY(90px) scale(.84)}
 22%{transform:translateY(96px) scale(1,.62);animation-timing-function:cubic-bezier(.16,.7,.36,1)}
 30%{transform:translateY(-195px) scale(.95,1);animation-timing-function:cubic-bezier(.65,0,.84,.3)}
 42%{transform:translateY(-7px) scale(.94,1.04)}
 43%{transform:translateY(5px) scale(1.13,.77)}
 47%,100%{transform:translateY(0) scale(1)}
}
/* Keep the same side view through both jumps; face the audience only after landing. */
@keyframes standing-pose{0%,48%{opacity:0}50%,100%{opacity:1}}
@keyframes leaping-pose{0%,48%{opacity:1}50%,100%{opacity:0}}
@keyframes leap-shadow{0%,5%,18%,22%{opacity:.4;transform:translateY(90px) scale(.8)}11%,30%{opacity:.09;transform:translateY(90px) scale(.35)}35%{opacity:.1;transform:scale(.35)}43%{opacity:.45;transform:scale(1.15)}47%,100%{opacity:.28;transform:scale(1)}}
@keyframes firefly-dart{0%{opacity:0;transform:translate(calc(40px - var(--run-in)),125px)}8%{opacity:1;transform:translate(calc(70px - var(--run-in)),85px)}26%{transform:translate(calc(0px - var(--run-in)*.55),-20px)}40%{transform:translate(calc(35px - var(--run-in)*.55),100px)}62%{transform:translate(-20px,-135px)}75%{opacity:1;transform:translate(12vw,-160px)}100%{opacity:0;transform:translate(70vw,-30vh)}}
@keyframes firefly-pulse{to{opacity:.7;transform:scale(.78)}}
@keyframes firefly-wing{to{transform:rotate(-60deg) scaleY(.45)}}
@keyframes halo-breathe{50%{opacity:.55;transform:scale(1.06)}}
#forest-intro.story-still *{animation:none!important}.story-still .intro-happy{opacity:1}.story-still .intro-eyes{opacity:0}.story-still .cat-hello{opacity:1}
@media(prefers-reduced-motion:reduce){#forest-intro *{animation:none!important}.cat-hello{opacity:1}}
@media(max-width:700px){.opening-content h1{margin-bottom:36px}.opening-cat{width:103px;bottom:0;left:calc(100% - 11px)}.cat-hello{right:0;top:-18px}.chase-flight{bottom:70px;left:calc(100% + 38px)}}
@media(max-height:620px) and (min-width:701px){.opening-content h1{margin-bottom:24px}.opening-cat{width:105px}}

/* A short, quiet grooming beat between the original greeting cycles. */
.intro-tongue{opacity:0;transform-origin:78px 93px}
.is-playing.is-grooming .intro-wave{animation:cat-groom-paw 3.2s both ease-in-out}
.is-playing.is-grooming .intro-head{animation:cat-groom-head 3.2s both ease-in-out}
.is-playing.is-grooming .intro-eyes{animation:none;opacity:0}
.is-playing.is-grooming .intro-happy{animation:none;opacity:1}
.is-playing.is-grooming .intro-mouth{animation:cat-groom-mouth 3.2s both linear}
.is-playing.is-grooming .intro-tongue{animation:cat-groom-tongue 3.2s both ease-in-out}
.is-playing.is-grooming .cat-hello{opacity:0!important}
@keyframes cat-groom-paw{
 0%,100%{transform:translateY(0) rotate(0)}
 24%{transform:translateY(10px) rotate(-57deg)}
 33%,49%,65%{transform:translateY(11px) rotate(-59deg)}
 41%,57%,72%{transform:translateY(10px) rotate(-57deg)}
 84%{transform:translateY(5px) rotate(-24deg)}
}
@keyframes cat-groom-head{
 0%,16%,100%{transform:translate(0,0) rotate(0)}
 28%,43%,59%,73%{transform:translate(2px,3px) rotate(5deg)}
 36%,51%,67%{transform:translate(3px,5px) rotate(7deg)}
 86%{transform:translate(1px,1px) rotate(2deg)}
}
@keyframes cat-groom-tongue{
 0%,28%,43%,60%,100%{opacity:0;transform:scale(.5)}
 33%,38%,50%,55%{opacity:1;transform:scale(1)}
}
@keyframes cat-groom-mouth{0%,22%,82%,100%{opacity:1}28%,74%{opacity:.15}}