/* ---------- quiet defaults: soft shadows, no tilt, no loud motion ---------- */
:root{--sh:0 3px 0 var(--ink)}
.hl,.hl.o,.hl.y{background:none;padding:0}
.big{font-size:clamp(2.2rem,6vw,4.2rem)}
.btn,.cart,.card,.fcard,.pill,.res-card{box-shadow:var(--sh)}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--ink)}
.js :is(.card,.cert,.fcard).rv:not(.in){opacity:0;transform:none}
.rv{transition:opacity .5s}
.js .mega .word{opacity:1;animation:none}
.omo-bulb{animation:none}
.res-card h2{text-shadow:none}

/* ---------- HERO: Omo is a button (hide & seek) ---------- */
.omo-btn{display:block;width:100%;padding:0;border-radius:50%}
.omo-btn:focus-visible{outline-offset:-10px}
.hero-omo{z-index:5;transition:opacity .4s,transform .5s cubic-bezier(.5,-.4,.7,1)}
.hero-omo.gone{opacity:0;transform:translateY(-60px) scale(.6) rotate(-12deg);pointer-events:none}
.hero-omo.gone .speech{display:none}
.hero-omo.back .omo-body{animation:jump .7s var(--spring) 2}

/* ---------- ARCADE ---------- */
.arcade{background:var(--paper)}
.arcade .wrap{position:relative;z-index:2}
.carts li .cart,.carts li:nth-child(odd) .cart,.carts li:nth-child(even) .cart{transform:none}
.cart{box-shadow:0 4px 0 var(--ink)}
.cart::before{display:none}
.cart .name{text-shadow:none;font-size:clamp(1.15rem,2.8vw,1.8rem);text-align:center;padding:0 4px}
.cart:hover,.cart:focus-visible{transform:translateY(-3px);box-shadow:0 6px 0 var(--ink)}
.cart:hover .art svg,.cart:focus-visible .art svg{animation:none}

/* ---------- IDEAS: play it → see it → write it ---------- */
.ideas{background:var(--paper)}
.ladder{display:grid;gap:clamp(18px,3vw,30px);margin-top:clamp(22px,4vw,44px)}
.concepts{display:flex;flex-wrap:wrap;gap:8px}
.concept{position:relative;overflow:hidden;background:#fff;border:3px solid var(--ink);border-radius:99px;padding:6px 16px;font-weight:800;min-height:44px;transition:background .15s}
.concept:hover{background:#FFF8EA}
.concept[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.concept.timing::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--sun);transform-origin:left;animation:conceptTimer 5.2s linear forwards}
@keyframes conceptTimer{from{transform:scaleX(0)}}
.cpa{list-style:none;padding:0;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:clamp(6px,1.4vw,14px)}
.step{background:#fff;border:3px solid var(--ink);border-radius:24px;box-shadow:var(--sh);padding:14px 14px 10px;display:grid;grid-template-rows:auto 1fr;gap:6px;min-width:0}
.step-k{font-family:var(--f-px);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.step-art{position:relative;display:grid;place-items:center;aspect-ratio:200/130;min-height:0}
.step-art svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.step:first-child .step-art{cursor:pointer}
.step.sym{background:#FFF8E6}
.glyph{font-family:var(--f-display);font-size:clamp(3.4rem,8vw,6rem);line-height:1;white-space:nowrap}
.glyph.long{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.arrow{display:grid;place-items:center;color:var(--ink);opacity:.35}
.arrow svg{width:clamp(22px,3vw,36px)}
/* the three steps play in order */
.cpa.go .a{animation:aPop .45s var(--spring) backwards;animation-delay:var(--d)}
.cpa.go .glyph{animation:aStamp .5s var(--spring) 1.6s backwards}
.cpa.go .arrow:nth-child(2){animation:aFade .3s .55s backwards}
.cpa.go .arrow:nth-child(4){animation:aFade .3s 1.35s backwards}
.a{transform-box:fill-box;transform-origin:50% 80%}
@keyframes aPop{from{opacity:0;transform:translateY(10px) scale(.4)}}
@keyframes aStamp{from{opacity:0;transform:scale(1.6) rotate(-6deg)}}
@keyframes aFade{from{opacity:0}}
.tear-l,.tear-r{transition:transform .6s var(--spring)}
.cpa.go .tear-l{animation:tearL .9s var(--spring) .3s both}
.cpa.go .tear-r{animation:tearR .9s var(--spring) .3s both}
@keyframes tearL{to{transform:translate(-9px,3px) rotate(-6deg)}}
@keyframes tearR{to{transform:translate(9px,3px) rotate(6deg)}}
@media (max-width:700px){
  .cpa{grid-template-columns:1fr;gap:6px}
  .arrow{transform:rotate(90deg);height:26px}
  .step{padding:10px 12px 8px}
  .step-art{aspect-ratio:auto;height:120px}
  .step.sym .step-art{height:84px}
  .glyph{font-size:3.4rem}.glyph.long{font-size:2.3rem}
}

/* ---------- PROOF ---------- */
.proof{background:var(--paper)}
.cert{margin:clamp(22px,4vw,44px) auto 0;max-width:760px;background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:var(--sh);padding:clamp(8px,1.4vw,14px)}
.cert img{display:block;width:100%;height:auto;border-radius:10px}
.cert figcaption{display:grid;gap:4px;justify-items:center;text-align:center;padding:14px 8px 6px}
.cert figcaption b{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1}
.cert figcaption .px{font-size:clamp(.6rem,1.4vw,.72rem);opacity:.7}

/* ---------- PARENTS ---------- */
.parents{background:var(--paper)}
.parents .wrap{display:grid;gap:clamp(18px,3vw,32px);justify-items:center;text-align:center}
.join{width:min(100%,560px)}
.join .btn{width:100%}
.join .mail{font-weight:700;opacity:.75}

/* ---------- FOUNDER ---------- */
.founder{background:var(--paper);padding:clamp(48px,8vw,90px) 0}
.fcard{display:flex;gap:clamp(16px,3vw,32px);align-items:center;background:#fff;border:3px solid var(--ink);border-radius:28px;padding:clamp(18px,3vw,32px)}
.avatar{flex:none;width:clamp(96px,16vw,140px);height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 40%;border-radius:50%;border:3px solid var(--ink);transform:scale(1);filter:grayscale(1);background:#eee}
.fcard h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.8rem,4.5vw,2.8rem);line-height:1}
.fcard .role{font-size:.7rem;color:var(--grape);margin:6px 0 10px}
.fcard blockquote{font-size:1.12em;font-weight:700;line-height:1.3}
@media (max-width:560px){.fcard{flex-direction:column;text-align:center}}

/* ---------- FOOTER ---------- */
.foot{position:relative;background:var(--ink);color:var(--paper);border-top:var(--bd);padding:clamp(60px,9vw,100px) 0 36px;text-align:center;overflow:hidden}
.foot .stars-bg{display:none}
.foot .wrap{position:relative;z-index:2;display:grid;gap:14px;justify-items:center}
.wordmark{color:var(--paper);width:min(78vw,520px);padding:0;border-radius:20px}
.wordmark.boing svg{animation:boing .8s var(--spring)}
@keyframes boing{0%{transform:scale(1.08,.9)}40%{transform:translateY(-4%) rotate(-3deg)}100%{transform:none}}
.wordmark .lg-bulb{stroke:var(--paper)}
.links{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;list-style:none;padding:0;margin-top:10px;font-weight:700}
.links a{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;text-decoration-color:var(--pink)}
.links a:hover{text-decoration-color:var(--sun);color:var(--sun)}
.soon{opacity:.7}.soon em{font-style:normal;font-family:var(--f-px);font-size:.62rem;background:var(--grape);padding:3px 7px;border-radius:8px;margin-left:6px;vertical-align:2px}
.company{display:grid;grid-template-columns:repeat(4,auto);gap:10px clamp(18px,3vw,40px);justify-content:center;margin-top:clamp(28px,4vw,44px);padding-top:22px;border-top:1px solid rgba(255,243,220,.18);width:min(100%,900px);text-align:left;font-size:.82rem}
.company dt{font-family:var(--f-px);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;opacity:.55;margin-bottom:2px}
.company dd{margin:0;font-weight:600;opacity:.9}
.company a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.company{grid-template-columns:1fr 1fr;width:100%}}
.fine{font-size:.8rem;opacity:.6;margin-top:10px}

/* ---------- HIDE & SEEK ---------- */
.prog{right:12px;width:min(360px,calc(100vw - 150px));height:48px}
.prog-track,.prog-fill{position:absolute;left:22px;right:22px;top:50%;height:4px;margin-top:-2px;border-radius:4px}
.prog-track{background:rgba(26,16,51,.14)}
.prog-fill{left:0;right:0;top:0;margin:0;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;will-change:transform}
.prog a{position:absolute;top:50%;left:calc(22px + (100% - 44px) * var(--at,0));width:30px;height:30px;margin:-15px 0 0 -15px;display:grid;place-items:center;border-radius:50%}
.prog b{display:block;width:12px;height:12px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);transition:transform .25s var(--spring),background .2s}
.prog a.past b{background:var(--ink)}
.prog a[aria-current] b{background:var(--orange);transform:scale(1.35)}
.prog a:hover b{transform:scale(1.35)}
.prog.seeking b{width:16px;height:16px;background:#fff}
.prog.seeking a.found b{background:var(--orange);transform:scale(1.2)}
.prog.seeking a[aria-current]:not(.found) b{background:#FFE7B0}
.peek{position:absolute;z-index:1;left:var(--x);bottom:calc(100% - 1px);width:72px;height:50px;margin-left:-36px;padding:0;border-radius:0;touch-action:manipulation}
.peek-clip{position:absolute;inset:0;overflow:hidden}
.peek-omo{position:absolute;left:0;top:0;width:100%;transform:translateY(36px);animation:peekUp 5s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes peekUp{0%,12%{transform:translateY(36px)}22%,70%{transform:translateY(2px)}80%,100%{transform:translateY(36px)}}
.peek:hover .peek-omo,.peek:focus-visible .peek-omo{animation-play-state:paused;transform:translateY(2px)}
.peek .omo-body{animation:none}
.peek.found .peek-clip{overflow:visible}
.peek.found .peek-omo{animation:peekFound 1.2s var(--spring) forwards}
@keyframes peekFound{0%{transform:translateY(2px)}35%{transform:translateY(-46px) scale(1.15)}70%{transform:translateY(-40px) scale(1.1);opacity:1}100%{transform:translateY(-60px) scale(.4);opacity:0}}
.peek .speech{bottom:115%;left:50%;transform:translateX(-50%);width:max-content;font-size:.85rem;padding:5px 10px}
.peek .speech::after{right:auto;left:calc(50% - 8px)}
[data-calm="1"] .peek-omo{transform:translateY(2px)}
@media (prefers-reduced-motion:reduce){.peek-omo{transform:translateY(2px)}}
.fcard .role a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- LOGO: omo, with eyes that look at the idea ---------- */
.logo{padding:7px 14px 6px;display:block;color:var(--ink);transition:transform .2s var(--spring)}
.logo:hover{transform:translateY(-1px)}
.logo-svg{display:block;width:100%;height:auto;overflow:visible}
.logo .logo-svg{width:auto;height:34px}
.lg-blink{transform-box:fill-box;transform-origin:center;animation:blinkEye 6s infinite}
.lg-blink+.lg-blink{animation-delay:.02s}
.lg-bulb{transition:fill .2s}
:is(.logo,.wordmark):hover .lg-bulb,:is(.logo,.wordmark):focus-visible .lg-bulb{fill:#FFF6B0;filter:drop-shadow(0 0 6px #FFD23F)}
.rainbow .logo{animation:hue 1.2s linear infinite}