/* OMO AI — "Press start on school." base styles */
:root{
  --ink:#1A1033; --paper:#FFF3DC; --orange:#FF5A1F; --sun:#FFD23F; --grape:#6B3CFF; --mint:#27E1A0; --sky:#38B6FF; --pink:#FF5FB0;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --f-display:'Bagel Fat One','Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;
  --f-body:'Baloo 2','Nunito','Segoe UI',system-ui,sans-serif;
  --f-px:'Silkscreen',ui-monospace,'SF Mono',Menlo,monospace;
  --shadow:0 6px 0 var(--ink); --bd:4px solid var(--ink);
  --pad:clamp(20px,5vw,56px);
}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:70px;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);font-weight:500;font-size:clamp(1.05rem,1.4vw + .75rem,1.3rem);line-height:1.4;color:var(--ink);background:var(--paper);overflow-x:hidden}
img,svg{max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:4px solid var(--grape);outline-offset:3px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:400;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;transition:top .2s}
.skip:focus{top:12px}
.px{font-family:var(--f-px);letter-spacing:.04em;text-transform:uppercase}
.wrap{width:min(1120px,100% - var(--pad)*2);margin-inline:auto}
.wrap.narrow{width:min(820px,100% - var(--pad)*2)}
.big{font-family:var(--f-display);font-weight:400;font-size:clamp(2.6rem,8vw,5.8rem);line-height:.98;letter-spacing:-.01em}
.hl{background:linear-gradient(transparent 58%,var(--sun) 58%);padding:0 .1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl.o{background:linear-gradient(transparent 58%,#FFB59A 58%)}
.hl.y{background:linear-gradient(transparent 58%,var(--sun) 58%)}
section{position:relative;border-top:var(--bd);padding:clamp(64px,10vw,130px) 0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;background:var(--orange);color:var(--ink);font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:12px 22px;border:var(--bd);border-radius:18px;box-shadow:var(--shadow);text-decoration:none;transition:transform .15s var(--spring),box-shadow .15s;min-height:48px;touch-action:manipulation}
.btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--ink)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.btn.big{font-size:1.25rem;padding:16px 30px;border-radius:22px}
.btn.ghost{background:var(--paper)}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* ---------- boot screen ---------- */
#boot{display:none;position:fixed;inset:0;z-index:500;background:var(--ink);color:var(--paper);place-items:center;text-align:center;transition:opacity .45s,transform .45s}
.js:not(.booted) #boot{display:grid}
#boot.out{opacity:0;transform:scale(1.08);pointer-events:none}
.boot-in{width:min(300px,76vw);display:grid;gap:22px;justify-items:center}
#boot-omo{width:150px;animation:bootBounce .6s var(--spring) infinite alternate}
#boot .bar{width:100%;height:20px;border:4px solid var(--paper);border-radius:12px;padding:2px}
#boot .bar i{display:block;height:100%;width:0;background:var(--orange);border-radius:6px;transition:width .08s}
#boot .px{font-size:.8rem}
#boot .blink{opacity:0;color:var(--sun)}
#boot.ready .blink{opacity:1;animation:blink 1s steps(2) infinite}
@keyframes bootBounce{to{transform:translateY(-14px) scaleY(1.04)}}
@keyframes blink{50%{opacity:0}}

/* ---------- floating controls ---------- */
.pill{position:fixed;z-index:80;top:max(10px,env(safe-area-inset-top));background:var(--paper);border:var(--bd);border-radius:999px;box-shadow:0 5px 0 var(--ink)}
.logo{left:12px;text-decoration:none}
.toggles{right:12px;display:flex;gap:6px;padding:5px}
.tog{width:40px;height:40px;border:3px solid var(--ink);border-radius:50%;display:grid;place-items:center;background:#fff;transition:transform .15s var(--spring),background .15s;color:var(--ink)}
.tog svg{width:22px;height:22px}
.tog:hover{transform:scale(1.1)}
.tog[aria-pressed="true"]{background:var(--mint)}
.t-sound[aria-pressed="false"] .waves{display:none}.t-sound[aria-pressed="true"] .mute{display:none}
.toast{position:fixed;z-index:350;top:76px;left:50%;transform:translate(-50%,-30px) scale(.9);background:var(--ink);color:var(--sun);font-size:.8rem;padding:10px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.3s var(--spring);text-align:center;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
#fx{position:fixed;inset:0;z-index:300;pointer-events:none}

/* ---------- cursor ---------- */
#cursor{position:fixed;left:0;top:0;z-index:600;pointer-events:none;display:none}
.cursor-on #cursor{display:block}
.cursor-on,.cursor-on *{cursor:none!important}
#cursor i{display:block;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--orange);border:3px solid var(--ink);opacity:0;transition:transform .2s var(--spring),background .2s,opacity .2s}
#cursor.vis i{opacity:1}
#cursor.hot i{transform:scale(2.1);background:var(--sun)}
#cursor.down i{transform:scale(.7)}

/* ---------- reveal ---------- */
.js :is(.itile,.card,.sticker,.polaroid,.fcard,.dial-card,.toy-stage,.badges li).rv:not(.in){opacity:0;transform:translateY(40px) rotate(2deg) scale(.96)}
.rv{transition:opacity .6s,transform .7s var(--spring)}
:is(.itile,.badges li).rv:nth-child(2){transition-delay:.07s}:is(.itile,.badges li).rv:nth-child(3){transition-delay:.14s}.itile.rv:nth-child(4){transition-delay:.21s}.itile.rv:nth-child(5){transition-delay:.28s}

/* ---------- HERO ---------- */
.hero{border-top:0;min-height:100svh;display:grid;align-items:center;padding:110px 0 80px;overflow:hidden;background:
  radial-gradient(circle at 1px 1px,rgba(26,16,51,.16) 2px,transparent 2.5px) 0 0/28px 28px,var(--paper)}
#gems{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.hero-in{position:relative;z-index:3;width:min(1120px,100% - var(--pad)*2);margin-inline:auto;pointer-events:none}
.hero-in :is(a,button){pointer-events:auto}
.mega{font-family:var(--f-display);font-weight:400;font-size:clamp(3.4rem,10.4vw,9.8rem);line-height:.9;letter-spacing:-.015em;margin-bottom:.2em;-webkit-user-select:none;user-select:none}
.mega .ln{display:block}
.mega .word{display:inline-block}
.mega .lt{display:inline-block;color:var(--ink);transition:color .2s,text-shadow .2s;will-change:transform}
.mega .lt.lit{color:var(--lc);text-shadow:0 .055em 0 var(--ink)}
.mega .lt.hit{animation:ltHit .55s var(--spring)}
@keyframes ltHit{0%{transform:none}22%{transform:translateY(.07em) scale(1.1,.88)}58%{transform:translateY(-.04em) scale(.96,1.06)}100%{transform:none}}
.mega .lt.wave{animation:ltWave .8s var(--spring) backwards;animation-delay:calc(var(--n)*50ms)}
@keyframes ltWave{40%{transform:translateY(-.22em) rotate(-7deg) scale(1.1)}}
.js .mega .word{opacity:0}
.js.ready .mega .word{opacity:1;animation:wordIn .8s var(--spring) backwards;animation-delay:calc(var(--i,0)*110ms)}
@keyframes wordIn{from{opacity:0;transform:translateY(70px) rotate(-8deg) scale(.7)}}
.sub{font-weight:800;font-size:clamp(1.3rem,3.2vw,2.1rem);line-height:1.1;margin-bottom:26px}
.sub::after{content:"";display:block;width:2.4em;height:.28em;border-radius:99px;background:var(--orange);margin-top:.35em;transform-origin:left;animation:underline 1s var(--spring) .8s backwards}
@keyframes underline{from{transform:scaleX(0)}}
.hero-omo{position:absolute;z-index:2;right:max(2vw,calc(50% - 560px));bottom:6vh;width:min(28vw,360px);min-width:200px}
.hero-omo .omo{cursor:pointer;filter:drop-shadow(0 12px 0 rgba(26,16,51,.12))}
.hero-omo .speech{top:-14px;right:64%;max-width:230px;width:max-content}
.dropper{position:absolute;z-index:6;left:max(var(--pad),calc(50% - 560px));bottom:30px;width:60px;height:60px;border-radius:50%;background:#fff;border:var(--bd);box-shadow:0 5px 0 var(--ink);display:grid;place-items:center;transition:transform .15s var(--spring)}
.dropper svg{width:30px;animation:bob2 1.8s ease-in-out infinite}
.dropper::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:3px solid var(--ink);opacity:0;animation:dropRing 2.4s ease-out infinite}
.dropper:hover{transform:scale(1.1) rotate(-6deg)}
.dropper:active{transform:scale(.92)}
@keyframes dropRing{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@keyframes bob2{50%{transform:translateY(-5px) rotate(8deg)}}
.tap-hint{position:absolute;z-index:6;left:0;top:0;width:46px;pointer-events:none;opacity:0;transition:opacity .4s}
.tap-hint.show{opacity:1}
.tap-hint .hand{animation:handTap 1.2s ease-in-out infinite}
@media (max-width:820px){
  .hero{align-items:start;padding-top:96px;padding-bottom:70px}
  .hero-omo{position:relative;right:auto;bottom:auto;width:min(54vw,250px);margin:26px auto 0}
  .hero-omo .speech{right:auto;left:62%;top:-18px;max-width:44vw}
  .dropper{left:auto;right:16px;bottom:18px}
  .mega{font-size:clamp(3.4rem,17.4vw,7rem)}
}

/* ---------- speech bubble ---------- */
.speech{position:absolute;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:8px 14px;font-weight:700;font-size:.95rem;line-height:1.2;box-shadow:0 4px 0 var(--ink);z-index:3}
.speech::after{content:"";position:absolute;bottom:-11px;right:22px;width:16px;height:16px;background:#fff;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(45deg) skew(10deg,10deg)}
.speech.pop{animation:popIn .4s var(--spring)}
@keyframes popIn{from{transform:scale(.5) rotate(-6deg);opacity:0}}

/* ---------- Omo ---------- */
.omo{display:block;width:100%;height:auto;overflow:visible;touch-action:manipulation}
.omo-body{transform-box:fill-box;transform-origin:50% 100%;animation:idle 3.2s ease-in-out infinite}
@keyframes idle{50%{transform:scale(1.03,.97)}}
.omo-eyes{transform-box:fill-box;transform-origin:center;animation:blinkEye 5.5s infinite}
@keyframes blinkEye{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.omo-bulb{animation:glow 2s ease-in-out infinite}
@keyframes glow{50%{fill:#fff6b0}}
.omo .mouth-o,.omo .mouth-m{display:none}
.omo[data-mood="wow"] .mouth-w{display:none}.omo[data-mood="wow"] .mouth-o{display:block}
.omo[data-mood="hmm"] .mouth-w{display:none}.omo[data-mood="hmm"] .mouth-m{display:block}
.omo.jump .omo-body{animation:jump .6s var(--spring)}
@keyframes jump{0%{transform:scale(1.15,.8)}35%{transform:translateY(-34px) scale(.9,1.12)}100%{transform:none}}
.omo.shake .omo-body{animation:shake .5s}
@keyframes shake{20%{transform:translateX(-8px) rotate(-4deg)}40%{transform:translateX(8px) rotate(4deg)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.omo.squash .omo-body{animation:squash .55s var(--spring)}
@keyframes squash{0%{transform:scale(1.22,.74)}50%{transform:scale(.88,1.14) translateY(-12px)}100%{transform:none}}

/* ---------- misc ---------- */
.rainbow main,.rainbow .foot{animation:hue 1.2s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.seg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.seg button{background:#fff;border:3px solid var(--ink);border-radius:99px;padding:6px 18px;font-weight:800;min-height:46px;transition:transform .15s var(--spring),background .15s}
.seg button:hover{transform:translateY(-2px)}
.seg button.on,.seg button[aria-pressed="true"]{background:var(--ink);color:var(--sun)}
.card{background:#fff;border:var(--bd);border-radius:28px;box-shadow:0 8px 0 var(--ink);padding:clamp(18px,3vw,30px);display:grid;gap:16px;justify-items:center}

/* ---------- calm / reduced motion ---------- */
[data-calm="1"] *,[data-calm="1"] *::before,[data-calm="1"] *::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
[data-calm="1"] .mega .word{opacity:1}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .mega .word{opacity:1}
}
@media (forced-colors:active){.btn,.cart,.card,.plate{border:3px solid CanvasText}}
.mega .lt.blink{animation:ltBlink 1s ease-in-out infinite}
@keyframes ltBlink{50%{color:var(--lc);text-shadow:0 .055em 0 var(--ink)}}