/* Idea A worlds: the night lab (glass, atom, stars) and the paper-cut morning garden */

/* ===================== night lab ===================== */
.ln-sky{position:absolute;inset:0;--lift:.5;background:
 radial-gradient(120% 70% at 22% 0%,rgba(52,92,200,.55),transparent 62%),
 radial-gradient(90% 60% at 80% 100%,rgba(90,60,190,.35),transparent 70%),
 linear-gradient(180deg,#050b26 0%,#0a1a4b 55%,#13306f 100%)}
.ln-dawn{position:absolute;top:0;bottom:0;right:0;width:46%;pointer-events:none;background:
 radial-gradient(80% 55% at 100% 86%,rgba(255,170,120,.55),rgba(255,140,120,.18) 45%,transparent 75%),
 linear-gradient(270deg,rgba(255,190,150,.16),transparent 70%);transition:none}
.gate.v .ln-dawn{top:auto;left:0;width:auto;height:50%;background:radial-gradient(70% 90% at 50% 100%,rgba(255,170,120,.5),rgba(255,140,120,.15) 45%,transparent 75%)}
.ln-pane{position:absolute;border-radius:18px;padding:0;background:linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 55%,rgba(140,220,255,.08));
 border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 18px 40px rgba(2,6,30,.4);backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);transform-style:preserve-3d}
.ln-pane svg{position:absolute;inset:0;width:100%;height:100%}
.ln-pane::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 42%,transparent 54%);pointer-events:none}
html.lite .ln-pane{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(160,200,255,.12)}
.ln-atom .hit{cursor:pointer}

.labcard{position:absolute;z-index:3;left:clamp(16px,5cqw,64px);bottom:clamp(54px,9vh,96px);width:min(440px,calc(100cqw - 32px));padding:24px 26px 24px;border-radius:26px;
 background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 30px 60px rgba(2,6,30,.45);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}
.labcard h2{margin:0 0 8px;font:700 clamp(26px,3.4vw,44px)/1.05 'Unbounded',sans-serif;letter-spacing:-.01em;color:#fff;text-shadow:0 0 24px rgba(134,232,255,.45)}
.labcard p{margin:0 0 18px;color:rgba(225,240,255,.86);font-size:15.5px;max-width:34ch}
.labcard button{cursor:pointer;border:0;border-radius:999px;padding:12px 22px;font:700 15px/1 'DM Sans',sans-serif;color:#05214a;background:linear-gradient(180deg,#e6fbff,#9ef0ff);box-shadow:0 0 0 1px rgba(255,255,255,.6) inset,0 8px 28px rgba(110,230,255,.45);transition:transform .2s,box-shadow .2s}
.labcard button:hover{transform:translateY(-1px);box-shadow:0 0 0 1px #fff inset,0 10px 34px rgba(110,230,255,.7)}
@container half (max-width:430px){.labcard{padding:16px 18px;border-radius:20px;bottom:clamp(48px,8vh,80px)}.labcard p{display:none}.labcard h2{font-size:22px;margin-bottom:12px}.labcard button{padding:10px 16px;font-size:14px}}
.gate.v .labcard{bottom:auto;top:12px;left:12px;width:auto;max-width:calc(100% - 80px);padding:12px 14px;border-radius:18px}
.gate.v .labcard p{display:none}.gate.v .labcard h2{font-size:19px;margin-bottom:8px}.gate.v .labcard button{padding:9px 14px;font-size:13.5px}

/* ===================== paper morning ===================== */
.half.kids.paper{left:calc(var(--s)*100% - 90px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 90px);mask-image:linear-gradient(90deg,transparent 0,#000 90px)}
.gate.v .half.kids.paper{left:0;top:calc(var(--s)*100% - 60px);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 60px);mask-image:linear-gradient(180deg,transparent 0,#000 60px)}
.kp-sky{position:absolute;inset:0;background:linear-gradient(180deg,#8fd0f5,#cfeafa 55%,#ffe3b0)}
.kp-tint{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(120,70,160,.18),rgba(255,120,70,.16) 60%,rgba(255,150,80,.1))}
.kp-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;background-image:var(--grain);background-size:220px}
.half.kids .lyr svg{filter:drop-shadow(0 6px 0 rgba(31,48,90,.06))}
.kp-sun{position:absolute;aspect-ratio:1;--sunc:#ffc83a;--ray:#ffb020;cursor:pointer;pointer-events:auto}
.kp-sun svg{width:100%;height:100%;overflow:visible}
.kp-rays{animation:kpSpin 60s linear infinite;transform-origin:0 0}
.kp-sun.wink .kp-rays{animation-duration:3s}
.kp-sleep{display:none}.kp-sun.sleepy .kp-eyes{display:none}.kp-sun.sleepy .kp-sleep{display:block}
.kp-sun.wink .kp-eyes ellipse:last-of-type{transform:scaleY(.15);transform-origin:24px -10px;transform-box:view-box}
@keyframes kpSpin{to{transform:rotate(360deg)}}
.kp-cloud{position:absolute;aspect-ratio:200/110;pointer-events:auto;cursor:pointer;animation:kpBob var(--dur) ease-in-out var(--del) infinite alternate;filter:drop-shadow(0 6px 0 rgba(31,48,90,.07)) drop-shadow(0 10px 12px rgba(31,48,90,.1))}
.kp-cloud svg{width:100%;height:100%;display:block}
.kp-cloud.raining svg{filter:brightness(.88) saturate(.8);transition:filter .4s}
@keyframes kpBob{from{transform:translate(-6px,-3px)}to{transform:translate(8px,4px)}}
.kp-rain{position:absolute;height:22%;pointer-events:none}
.kp-rain i{position:absolute;top:0;width:3px;height:16px;border-radius:3px;background:#6ab8ee;opacity:0;animation:kpDrop .7s linear 3}
@keyframes kpDrop{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(230px);opacity:0}}
.kp-flower.grow{animation:kpGrow .9s cubic-bezier(.3,1.6,.5,1)}
@keyframes kpGrow{0%{transform:scale(1,1)}35%{transform:scale(1.2,1.35)}100%{transform:scale(1,1)}}
.kp-bird{position:absolute;aspect-ratio:90/70;pointer-events:auto;cursor:pointer;transform-origin:50% 60%}
.kp-bird svg{width:100%;height:100%;display:block;overflow:visible;animation:kpHop 4s ease-in-out infinite}
.kp-bird.flying svg{animation:none}
.kp-wing{transform-origin:46px 36px;transform-box:view-box}
.kp-bird.flying .kp-wing{animation:kpFlap .16s ease-in-out infinite alternate}
.kp-wingb{opacity:0}.kp-bird.flying .kp-wingb{opacity:1;transform-origin:46px 30px;transform-box:view-box;animation:kpFlap2 .16s ease-in-out infinite alternate}
@keyframes kpFlap{from{transform:rotate(18deg)}to{transform:rotate(-55deg)}}
@keyframes kpFlap2{from{transform:rotate(-10deg)}to{transform:rotate(40deg)}}
@keyframes kpHop{0%,80%,100%{transform:translateY(0)}86%{transform:translateY(-8%) rotate(-4deg)}92%{transform:translateY(0)}}
.kp-balloon{position:absolute;pointer-events:none;animation:kpSway var(--dur) ease-in-out var(--del) infinite alternate}
.kp-balloon svg{width:100%;height:100%;display:block;overflow:visible}
.kp-balloon .kp-bbody{pointer-events:auto;cursor:pointer;transform-box:fill-box;transform-origin:50% 100%}
.kp-balloon.popped .kp-bbody,.kp-balloon.popped .kp-str{opacity:0}
.kp-balloon.inflate .kp-bbody{animation:kpInflate .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes kpInflate{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes kpSway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
.kp-shards{position:absolute;aspect-ratio:1;pointer-events:none}
.kp-shards i{position:absolute;left:50%;top:50%;width:14%;height:9%;border-radius:2px 8px 2px 8px;transform:rotate(var(--a)) translateX(0);animation:kpShard .8s ease-out forwards}
@keyframes kpShard{to{transform:rotate(var(--a)) translateX(320%) rotate(160deg);opacity:0}}
.kp-letter{position:absolute;transform:translate(-50%,-50%);font:800 clamp(56px,7vw,110px)/1 'Baloo Bhaijaan 2',sans-serif;color:var(--c);pointer-events:none;
 text-shadow:3px 0 #fff,-3px 0 #fff,0 3px #fff,0 -3px #fff,2px 2px #fff,-2px 2px #fff,2px -2px #fff,-2px -2px #fff,0 9px 12px rgba(31,48,90,.3);animation:kpLetter 3.2s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes kpLetter{0%{transform:translate(-50%,-50%) scale(.2) rotate(-20deg);opacity:0}14%{transform:translate(-50%,-50%) scale(1.15) rotate(6deg);opacity:1}24%{transform:translate(-50%,-50%) scale(1) rotate(-3deg)}75%{transform:translate(-50%,-110%) scale(1) rotate(3deg);opacity:1}100%{transform:translate(-50%,-150%) scale(.9) rotate(-2deg);opacity:0}}
.kp-door{cursor:pointer}

/* the hanging paper sign */
.kp-sign{position:absolute;z-index:3;top:0;right:clamp(14px,6cqw,90px);width:min(380px,calc(100cqw - 200px));padding-top:clamp(34px,7vh,64px);transform-origin:50% 0;transform:rotate(var(--sw,0deg))}
.kp-sign::before,.kp-sign::after{content:"";position:absolute;top:0;height:calc(clamp(34px,7vh,64px) + 14px);width:2px;background:#8a7a68}
.kp-sign::before{left:22%}.kp-sign::after{right:22%}
.kp-paper{position:relative;padding:22px 24px 22px;border-radius:20px;background:#fff9ec;color:#2b3170;box-shadow:0 2px 0 rgba(31,48,90,.08),0 16px 34px rgba(31,48,90,.22);background-image:var(--grain);background-size:220px}
.kp-paper::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#2f7be0;transform:rotate(3deg) translate(6px,6px);z-index:-1;box-shadow:0 10px 24px rgba(31,48,90,.18)}
.kp-sign h2{margin:0 0 8px;line-height:1}
.kp-pre{display:block;font:800 clamp(16px,1.6vw,20px)/1 'Baloo Bhaijaan 2',sans-serif;color:#2b3170;letter-spacing:.04em;margin:4px 0 2px}
.kp-sign .kp-paper{container:paper/inline-size}
.kp-big{display:flex;flex-wrap:nowrap;font:800 min(clamp(30px,3.6vw,50px),14.5cqi)/1.05 'Baloo Bhaijaan 2',sans-serif}
.kp-big span{display:inline-block;color:var(--c);transform:rotate(var(--r));text-shadow:2px 0 #fff,-2px 0 #fff,0 2px #fff,0 -2px #fff,0 5px 0 rgba(31,48,90,.14)}
.kp-sign p,.kp-soon p{margin:0 0 16px;font:600 16px/1.4 'Baloo Bhaijaan 2',sans-serif;color:#4a4f86;max-width:32ch}
.kp-btn{cursor:pointer;border:0;border-radius:16px;padding:12px 20px 13px;font:800 17px/1 'Baloo Bhaijaan 2',sans-serif;color:#fff;background:#e4473c;box-shadow:0 5px 0 #b3322a,0 12px 20px rgba(180,50,42,.3);transition:transform .15s,box-shadow .15s}
.kp-btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 #b3322a,0 14px 24px rgba(180,50,42,.35)}
.kp-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #b3322a}
@container half (max-width:560px){.kp-sign{width:calc(100cqw - 190px);right:14px}.kp-sign p{display:none}.kp-paper{padding:14px 16px}.kp-big{font-size:min(28px,14.5cqi)}.kp-btn{font-size:15px;padding:10px 14px 11px}}
.gate.v .kp-sign{top:auto;bottom:50px;left:12px;right:12px;width:auto;padding-top:0;transform:rotate(-1deg)}
.gate.v .kp-sign::before,.gate.v .kp-sign::after{display:none}
.gate.v .kp-sign .kp-paper{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px 10px 14px;border-radius:16px}
.gate.v .kp-sign h2{margin:0}.gate.v .kp-sign p{display:none}.gate.v .kp-pre{font-size:13px;margin:0}.gate.v .kp-big{font-size:23px}.gate.v .kp-sign .kp-btn{flex:none;font-size:14px;padding:9px 12px 10px;border-radius:13px}

/* coming soon */
.kp-soon{position:absolute;z-index:4;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .35s}
.kp-soon .kp-paper{max-width:min(460px,86%);top:-34px;transition:top .6s cubic-bezier(.3,1.5,.5,1)}
.kp-soon h3{margin:0 0 10px;font:800 clamp(26px,3vw,38px)/1.05 'Baloo Bhaijaan 2',sans-serif;color:#e4473c}
.gate.soon .kp-soon{opacity:1;pointer-events:auto}.gate.soon .kp-soon .kp-paper{top:0}
.gate.soon .kp-sign{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){.kp-cloud,.kp-balloon,.kp-bird svg,.kp-rays{animation:none}}