/* Gulpy and the Deep End: loaded after snug-and-the-dark.css, fullscreen.css and snug-v2.css (which give the reader, the name screen and the hero picker). */
body{background:#0E3A66}
.art{background:#2FA8FF;overflow:hidden}
.ctitle h1{color:var(--sun)}
.ctitle p{color:#fff}

/* the characters, painted on top of the scene */
.cast{position:absolute;inset:0;z-index:4;pointer-events:none;transition:opacity .4s}
.cast.gone{opacity:0}
.ch{position:absolute;background-repeat:no-repeat;pointer-events:none;transition:opacity .45s ease,transform .3s ease;transform-origin:50% 100%}
.ch>canvas{position:absolute;inset:0;width:100%;height:100%}
.ch.heroc{opacity:0}.ch.heroc.ready{opacity:1}
.ch.mir{transform:scaleX(-1)}
.ch.tappable{pointer-events:auto;cursor:pointer}
.ch.wait{opacity:0!important}
.ch.bob{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -4%;rotate:2deg}}
.ch.hop{animation:hop .6s ease}
@keyframes hop{0%,100%{translate:0 0}35%{translate:0 -8%}60%{translate:0 0}75%{translate:0 -3%}}
.ch.shake{animation:shake .9s ease}
@keyframes shake{0%,100%{rotate:0}15%{rotate:-6deg}30%{rotate:6deg}45%{rotate:-5deg}60%{rotate:5deg}75%{rotate:-2deg}}
.ch.puffy{animation:puffy .9s ease}
@keyframes puffy{0%,100%{scale:1}50%{scale:1.14}}
.ch.deflate{animation:deflate .9s ease}
@keyframes deflate{0%{scale:1.12}40%{scale:.86 1.08}70%{scale:1.04}100%{scale:1}}
.ch.mir.hop,.ch.mir.shake{transform:scaleX(-1)}

/* underwater pages: a blue tint and gentle wobble on the hero */
.art.uw .ch.heroc{filter:saturate(.85) hue-rotate(-6deg) brightness(.96)}
.art.uw .ch.heroc>canvas{animation:sway 4s ease-in-out infinite}
@keyframes sway{0%,100%{translate:0 0}50%{translate:0 -2%}}

/* effects layer */
.fx{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.fx .bub{position:absolute;bottom:-30px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(255,255,255,.15) 40%,rgba(255,255,255,.05));animation:rise linear infinite}
@keyframes rise{to{transform:translate(12px,-110cqh) scale(1.1);opacity:.2}}
.fx .note{position:absolute;font:400 clamp(20px,3.4cqw,46px)/1 var(--display);color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke;animation:notefloat 3s ease-out forwards;opacity:0}
@keyframes notefloat{0%{opacity:0;transform:translate(0,0) rotate(-10deg)}15%{opacity:1}100%{opacity:0;transform:translate(30px,-140px) rotate(12deg)}}
.fx .rip{position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 50% 120%,rgba(255,255,255,.0) 0 22px,rgba(255,255,255,.10) 26px,rgba(255,255,255,0) 32px);mix-blend-mode:screen;animation:ripple 6s ease-in-out infinite alternate}
@keyframes ripple{from{transform:scale(1) translateY(0)}to{transform:scale(1.08) translateY(-2%)}}
.fx .drop,.fx .conf{position:absolute;width:12px;height:12px;border-radius:50%;background:#BFE8FF;border:2px solid #fff;animation:fly 1.6s cubic-bezier(.2,.7,.4,1) forwards}
.fx .conf{width:10px;height:14px;border-radius:3px;border:0}
@keyframes fly{0%{transform:translate(0,0);opacity:1}60%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 260px)) rotate(540deg);opacity:0}}

/* the countdown on page 13 */
.count{position:absolute;left:0;right:0;top:12%;z-index:7;text-align:center;pointer-events:none}
.count b{display:inline-block;font:400 clamp(60px,14cqw,190px)/1 var(--display);color:var(--sun);-webkit-text-stroke:4px var(--ink);paint-order:stroke;text-shadow:0 8px 0 var(--ink);opacity:0}
.count.on b{animation:countpop .9s cubic-bezier(.2,1.6,.4,1) forwards}
.count.big b{font-size:clamp(46px,10cqw,140px);color:#fff}
@keyframes countpop{0%{opacity:0;transform:scale(.3) rotate(-10deg)}40%{opacity:1;transform:scale(1.15) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.story .count-line{font-family:var(--display);font-weight:400;color:var(--sun);letter-spacing:.02em}

/* Flipsy's flip on page 9: the whole picture spins */
.art.spin{animation:pagespin 1.2s cubic-bezier(.6,0,.3,1)}
@keyframes pagespin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.82)}100%{transform:rotate(360deg) scale(1)}}
.flipsy.wave{animation:hop .6s ease 2}

/* page 15: Binny and Chuckles at the kiosk, in a little picture-in-picture */
.inset{position:absolute;left:3%;top:12%;width:22%;aspect-ratio:16/10;z-index:5;border-radius:18px;border:4px solid #fff;box-shadow:0 0 0 3px var(--ink),0 8px 18px rgba(0,0,0,.35);background-size:cover;background-position:60% 40%;overflow:hidden;opacity:0;transform:scale(.6) rotate(-6deg);transition:opacity .4s,transform .5s cubic-bezier(.2,1.5,.4,1);pointer-events:none}
.inset.show{opacity:1;transform:scale(1) rotate(-3deg)}
.inset .ich{position:absolute;background-repeat:no-repeat}

/* page 18: sunset, gold then pink then blue */
.art.sunset::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:multiply;background:linear-gradient(180deg,#FFD27A,#FFB25E);opacity:0;transition:opacity 4s}
.art.sunset.dusk::before{animation:sundown 14s ease forwards}
@keyframes sundown{0%{opacity:0;background:linear-gradient(180deg,#FFD27A,#FFB25E)}25%{opacity:.85;background:linear-gradient(180deg,#FFC46A,#FF9F55)}55%{opacity:.85;background:linear-gradient(180deg,#FF9AB8,#F27A8A)}100%{opacity:.9;background:linear-gradient(180deg,#3A4A9A,#6A6FC0)}}
.art.sunset::after{content:"";position:absolute;right:20%;top:6%;width:6.5%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#FFFBE6,#F3E7B8);box-shadow:0 0 30px 8px rgba(255,250,220,.55);z-index:3;opacity:0;transition:opacity 3s 9s}
.art.sunset.dusk::after{opacity:1}

/* grown-ups' note on the end page */
.safety{flex-basis:100%;margin:2px 0 0;font:600 clamp(12px,1vw + 6px,15px)/1.35 var(--read);color:#E6ECFF;opacity:.92}
@media (prefers-reduced-motion:reduce){.ch.bob,.fx .bub,.fx .rip,.art.spin,.art.uw .ch.heroc>canvas{animation:none!important}}