:root {
    --cream: #fff8f0;
    --ink: #3b2a3a;
    --pink: #ff8fab;
    --rose: #e04b6a;
    --peach: #ffb38a;
    --mint: #7cc98e;
    --butter: #ffd972;
    --lilac: #b9a6ff;
    --sky: #8ecbff;
    --caramel: #c8823c;
    --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: "Nunito", system-ui, sans-serif;
    overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
svg text { font-family: "Fredoka", "Nunito", sans-serif; }

/* ---------- chrome ---------- */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 20;
    padding: 14px 22px; pointer-events: none;
}
.mini-logo {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 8px;
    font: 600 20px "Fredoka", sans-serif; color: var(--ink); text-decoration: none;
    background: rgba(255,248,240,.85); backdrop-filter: blur(6px);
    padding: 6px 14px; border-radius: 999px; box-shadow: 0 2px 10px rgba(59,42,58,.08);
    opacity: 0; transform: translateY(-10px); transition: .4s;
}
body.scrolled .mini-logo { opacity: 1; transform: none; }
.mini-logo .cube {
    width: 14px; height: 14px; border: 2.5px solid var(--ink); border-radius: 3px; background: #fff;
    animation: spin 6s linear infinite;
}
.dots {
    position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 20;
    display: flex; flex-direction: column; gap: 10px;
}
.dots a {
    width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink);
    background: transparent; transition: .3s var(--ease-pop); position: relative;
}
.dots a.on { background: var(--pink); transform: scale(1.35); }
.dots a::after {
    content: attr(data-t); position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
    white-space: nowrap; font: 500 13px "Fredoka", sans-serif; color: var(--ink);
    background: #fff; padding: 3px 9px; border-radius: 8px; opacity: 0; pointer-events: none; transition: .2s;
}
.dots a:hover::after { opacity: 1; }

/* ---------- scenes ---------- */
.scene {
    min-height: 100vh; position: relative; padding: 90px 6vw 70px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.scene:nth-of-type(even) { background: #fff1f4; }
.big {
    font: 700 clamp(30px, 5vw, 58px)/1.08 "Fredoka", sans-serif; text-align: center;
    margin: 0 0 34px; letter-spacing: -.5px;
    opacity: 0; transform: translateY(30px); transition: .8s var(--ease-pop);
}
.scene.in .big { opacity: 1; transform: none; }
.soft { color: var(--caramel); }
.moral { font: 600 clamp(20px, 2.6vw, 30px) "Fredoka", sans-serif; text-align: center; margin: 26px 0 0; }
.moral .ne { color: var(--rose); display: inline-block; animation: wob 1.6s ease-in-out infinite; }
.fine { font-size: 14px; opacity: .65; text-align: center; margin-top: 26px; max-width: 520px; }
.panel { margin: 0; background: #fff; border-radius: 28px; padding: 22px; box-shadow: 0 10px 30px rgba(59,42,58,.08); text-align: center; }
.panel figcaption { margin-top: 10px; font-size: 17px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.panel svg { width: 100%; height: auto; display: block; }

.badge {
    display: inline-block; padding: 4px 11px; border-radius: 999px;
    font: 600 13px "Fredoka", sans-serif; border: 2px solid var(--ink); background: #fff; white-space: nowrap;
}
.b-ref { background: #fff; }
.b-hi { background: #c7f0d6; }
.b-alc { background: #dff0ff; }
.b-rare { background: #ffe9c7; }
.b-liq { background: #ffe0ea; }
.b-still { background: #f6dcc0; }
.b-tested { background: #efe6ff; }

/* reveal helper */
.pop { opacity: 0; transform: scale(.6) translateY(20px); transition: .6s var(--ease-pop); }
.scene.in .pop { opacity: 1; transform: none; }

/* ---------- hero ---------- */
#hero { background: radial-gradient(circle at 50% 35%, #fff 0%, #ffeef3 55%, #ffe1ea 100%); overflow: hidden; }
#sprinkles { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-inner { position: relative; z-index: 1; text-align: center; }
.logo {
    font: 700 clamp(56px, 11vw, 140px)/1 "Fredoka", sans-serif; margin: 0; letter-spacing: -2px;
    color: var(--ink);
}
.logo .ch { display: inline-block; opacity: 0; transform: translateY(-80px) rotate(-20deg); }
.logo.go .ch { animation: drop-in .9s var(--ease-pop) forwards, bob 3.2s ease-in-out infinite; }
.logo .ch.hl { color: var(--pink); }
.tag { font: 500 clamp(20px, 2.6vw, 30px) "Fredoka", sans-serif; margin: 8px 0 0; opacity: 0; animation: fade-up .8s 1s forwards; }
.cup { width: min(260px, 60vw); margin: 10px auto 0; display: block; overflow: visible; }
.steam path { fill: none; stroke: #d9cfe0; stroke-width: 6; stroke-linecap: round; animation: steam 3s ease-in-out infinite; }
.steam path:nth-child(2) { animation-delay: .8s; }
.steam path:nth-child(3) { animation-delay: 1.6s; }
.faller { opacity: 0; animation: fall 8s cubic-bezier(.5, 0, .9, .6) infinite; }
.f2 { animation-delay: 2s; } .f3 { animation-delay: 4s; } .f4 { animation-delay: 6s; }
.ripple { transform-box: fill-box; transform-origin: center; animation: ripple 2s ease-out infinite; }
.spoon { transform-box: view-box; transform-origin: 150px 108px; animation: stir 2.4s ease-in-out infinite; }
.ask { font: 600 clamp(22px, 3vw, 34px) "Fredoka", sans-serif; margin: 14px 0 16px; }
.choices { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.choice {
    background: #fff; border: 3px solid var(--ink); border-radius: 24px; padding: 12px 18px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 2px; width: 140px;
    box-shadow: 0 6px 0 var(--ink); transition: transform .2s var(--ease-pop), box-shadow .2s;
    opacity: 0; animation: fade-up .7s var(--ease-pop) forwards;
}
.choice:nth-child(1) { animation-delay: 1.3s; } .choice:nth-child(2) { animation-delay: 1.45s; }
.choice:nth-child(3) { animation-delay: 1.6s; } .choice:nth-child(4) { animation-delay: 1.75s; }
.choice:hover { transform: translateY(-6px) rotate(-2deg); box-shadow: 0 12px 0 var(--ink); }
.choice:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.choice svg { width: 70px; height: 70px; overflow: visible; }
.choice span { font: 600 16px "Fredoka", sans-serif; }
.ic-drink .st { animation: steam 2.4s ease-in-out infinite; }
.ice { transform-box: fill-box; transform-origin: center; animation: bob-small 2s ease-in-out infinite; }
.ice.i2 { animation-delay: .6s; }
.ic-cookie { transform-box: fill-box; transform-origin: center; animation: spin 10s linear infinite; }
.ic-scoop { transform-box: fill-box; transform-origin: 50% 100%; animation: wobble 2s ease-in-out infinite; }
.ic-sizzle path { animation: steam 1.8s ease-in-out infinite; }
.ic-sizzle path:nth-child(2) { animation-delay: .5s; } .ic-sizzle path:nth-child(3) { animation-delay: 1s; }
.bub { transform-box: fill-box; transform-origin: center; animation: blip 1.4s ease-in-out infinite; }
.bub.b2 { animation-delay: .7s; }
.scroll-cue { position: absolute; bottom: 22px; left: 50%; width: 26px; height: 42px; margin-left: -13px; border: 3px solid var(--ink); border-radius: 14px; z-index: 1; }
.scroll-cue span { position: absolute; left: 50%; top: 7px; width: 6px; height: 8px; margin-left: -3px; border-radius: 3px; background: var(--pink); animation: cue 1.6s ease-in-out infinite; }

/* ---------- jobs ---------- */
.jobs-wrap { display: flex; align-items: center; justify-content: center; gap: 4vw; flex-wrap: wrap; width: 100%; }
.jobs { width: min(560px, 90vw); height: auto; overflow: visible; }
.link { stroke: var(--ink); stroke-width: 4; stroke-dasharray: 2 12; stroke-linecap: round; transition: opacity .5s; }
.scene.in .link { animation: flow 1s linear infinite; }
.link.off { opacity: .08; }
.node { transition: opacity .5s, filter .5s; }
.node .nb { fill: #fff; stroke: var(--ink); stroke-width: 4; }
.node text { font-size: 17px; font-weight: 600; text-anchor: middle; fill: var(--ink); }
.node.off { opacity: .2; filter: grayscale(1); }
.node > g, .node > g * { transform-box: fill-box; }
.scene.in .node:not(.off) .j-sweet { transform-origin: 50% 100%; animation: wobble 1.6s ease-in-out infinite; }
.toast { fill: #f5e1b8; }
.scene.in .node:not(.off) .toast { animation: toast 3s ease-in-out infinite; }
.scene.in .node:not(.off) .drop { transform-origin: center; animation: bob-small 1.6s ease-in-out infinite; }
.rise { transform-origin: 50% 100%; }
.scene.in .node:not(.off) .rise { animation: rise 2.2s ease-in-out infinite; }
.twinkle { transform-origin: center; }
.scene.in .node:not(.off) .twinkle { animation: twinkle 1.2s ease-in-out infinite; }
.lid { transform-origin: 50% 100%; }
.scene.in .node:not(.off) .lid { animation: lid 2.4s ease-in-out infinite; }
.center { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .35s, scale .45s var(--ease-pop); scale: .4; }
.center.show { opacity: 1; scale: 1; }
.ctag { font-size: 14px; text-anchor: middle; fill: var(--ink); }
.flake { transform-box: fill-box; transform-origin: center; animation: spin 4s linear infinite; }
.flake.fl2 { animation-duration: 3s; animation-direction: reverse; }
.jobs-side { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 260px; }
.jobs-name { font: 700 40px "Fredoka", sans-serif; }
.jobs-score { font: 600 26px "Fredoka", sans-serif; opacity: .7; }
.jobs-score b { font-size: 64px; color: var(--pink); display: inline-block; }
.jobs-score b.bump { animation: bump .5s var(--ease-pop); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 320px; }
.tab { border: 2.5px solid var(--ink); background: #fff; border-radius: 999px; padding: 7px 14px; font: 600 15px "Fredoka", sans-serif; transition: .2s; }
.tab.on { background: var(--ink); color: #fff; }

/* ---------- spoons ---------- */
.legend { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 24px; }
.spoons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; width: min(1100px, 100%); }
.spoon-card { perspective: 800px; height: 168px; cursor: pointer; border: 0; background: none; padding: 0; }
.spoon-card .flip { position: relative; width: 100%; height: 100%; transition: transform .6s var(--ease-pop); transform-style: preserve-3d; }
.spoon-card.flipped .flip { transform: rotateY(180deg); }
.spoon-card .face {
    position: absolute; inset: 0; backface-visibility: hidden; border-radius: 22px; background: #fff;
    border: 2.5px solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px;
}
.spoon-card .back { transform: rotateY(180deg); font: 500 15px/1.3 "Nunito", sans-serif; text-align: center; }
.spoon-card .back b { font: 600 17px "Fredoka", sans-serif; margin-bottom: 6px; }
.spoon-card svg { width: 120px; height: 72px; overflow: visible; }
.spoon-card .nm { font: 600 16px "Fredoka", sans-serif; }
.spoon-card .x { font: 700 22px "Fredoka", sans-serif; color: var(--rose); }
.spoon-card .face.f-hi { background: #f0fbf4; } .spoon-card .face.f-alc { background: #f2f8ff; }
.spoon-card .face.f-rare { background: #fff7ea; }
.heap { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1.6s var(--ease-pop); }
.speck-ring { transform-box: fill-box; transform-origin: center; opacity: 0; }
.scene.in .speck-ring { animation: ping 1.6s ease-out infinite; }

/* ---------- packets ---------- */
.table-top {
    position: relative; width: min(1000px, 100%); padding: 40px 20px 50px; border-radius: 40px;
    background: repeating-linear-gradient(45deg, #ffe7ee 0 22px, #fff 22px 44px); border: 3px solid var(--ink);
}
.packets { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.packet { width: 132px; height: 180px; perspective: 700px; border: 0; background: none; padding: 0;
    opacity: 0; transform: translateY(-120vh) rotate(-30deg); }
.scene.in .packet { animation: packet-drop 1s var(--ease-pop) forwards; }
.packet .pin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s var(--ease-pop); }
.packet.open .pin { transform: rotateY(180deg); }
.packet .side {
    position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px; border: 3px solid var(--ink);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px;
    background-image: linear-gradient(transparent 14px, rgba(0,0,0,.08) 14px, rgba(0,0,0,.08) 17px, transparent 17px),
        linear-gradient(0deg, transparent 14px, rgba(0,0,0,.08) 14px, rgba(0,0,0,.08) 17px, transparent 17px);
}
.packet .front::before { content: ""; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.55); border: 3px solid rgba(59,42,58,.25); }
.packet .front span { font: 600 15px "Fredoka", sans-serif; }
.packet .back { transform: rotateY(180deg); background-color: #fff; }
.packet .back .main { font: 700 18px/1.1 "Fredoka", sans-serif; text-align: center; }
.packet .back .plus { font: 500 13px "Fredoka", sans-serif; background: #f1ebf3; padding: 2px 8px; border-radius: 999px; opacity: 0; transform: scale(.5); transition: .4s var(--ease-pop); }
.packet.open .back .plus { opacity: 1; transform: none; transition-delay: .5s; }
.packet .chip { width: 100%; height: 14px; border-radius: 5px; border: 2px solid var(--ink); }
.mag { position: absolute; width: 90px; height: 90px; top: 0; left: 0; pointer-events: none; opacity: 0; transition: transform 1s var(--ease-pop), opacity .4s; z-index: 2; }
.mag.on { opacity: 1; }

/* ---------- oven ---------- */
.oven-row { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; width: min(1050px, 100%); align-items: stretch; }
.olab { fill: #fff; font-size: 16px; text-anchor: middle; font-weight: 600; }
.timer-txt { fill: #ffd972; font-size: 18px; text-anchor: middle; font-weight: 600; }
.coil { stroke: #7a3e3e; }
.scene.in .coil { animation: coil 7s ease-in-out infinite; }
.scene.in .glow { animation: glow 7s ease-in-out infinite; }
.dial { transform-box: view-box; transform-origin: 56px 38px; }
.scene.in .dial { animation: spin 7s linear infinite; }
.cookie { transform-box: fill-box; transform-origin: center; }
.dough { fill: #f6e1b5; stroke: #3b2a3a; stroke-width: 3; }
.scene.in .ck-sugar .dough { animation: bake-sugar 7s ease-in-out infinite; }
.scene.in .ck-allulose .dough { animation: bake-allulose 7s ease-in-out infinite; }
.scene.in .ck-ery .dough { animation: bake-ery 7s ease-in-out infinite; }
.scene.in .ck-sugar { animation: spread 7s ease-in-out infinite; }
.scene.in .ck-allulose { animation: spread 7s ease-in-out infinite; }
.pot { max-height: 330px; }
.flames path { transform-box: fill-box; transform-origin: 50% 100%; animation: flame .5s ease-in-out infinite alternate; }
.flames path:nth-child(2) { animation-delay: .2s; }
.potsteam path { animation: steam 2.6s ease-in-out infinite; }
.potsteam path:nth-child(2) { animation-delay: 1.2s; }
.meter { transform-box: fill-box; transform-origin: 0 50%; }
.scene.in .meter { animation: meter 7s ease-in-out infinite; }
.mlab { font-size: 16px; text-anchor: middle; fill: var(--ink); font-weight: 600; }

/* ---------- texture trio ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; width: min(1050px, 100%); }
.sf { transform-box: fill-box; transform-origin: center; opacity: 0; }
.scene.in .sf { animation: snow 3s ease-in infinite; }
.scene.in .sf.s2 { animation-delay: 1s; } .scene.in .sf.s3 { animation-delay: 2s; }
.therm { transform-box: fill-box; transform-origin: 50% 100%; }
.scene.in .therm { animation: therm 3s ease-in-out infinite; }
.xt { fill: #dff0ff; stroke: #5aa0f0; stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.scene.in .xt { animation: xtal 6s ease-out infinite; }
.scene.in .xt2 { animation-delay: .4s; } .scene.in .xt3 { animation-delay: .9s; } .scene.in .xt4 { animation-delay: 1.5s; }
.scene.in .xt5 { animation-delay: 2.2s; } .scene.in .xt6 { animation-delay: 2.8s; }
.d { font-size: 26px; font-weight: 700; text-anchor: middle; fill: var(--ink); opacity: 0; }
.scene.in .d1 { animation: day1 6s infinite; } .scene.in .d2 { animation: day2 6s infinite; } .scene.in .d3 { animation: day3 6s infinite; }
.g { opacity: 0; }
.scene.in .g { animation: sink 5s ease-in infinite; }
.scene.in .gb { animation-delay: .2s; } .scene.in .gc { animation-delay: .35s; } .scene.in .gd { animation-delay: .5s; } .scene.in .ge { animation-delay: .65s; }
.ldrop { opacity: 0; }
.scene.in .ldrop { animation: ldrop 5s ease-in infinite; }
.swirl { transform-box: fill-box; transform-origin: center; opacity: 0; }
.scene.in .swirl { animation: swirl 5s ease-out infinite; }
.glab { font-size: 15px; text-anchor: middle; fill: var(--ink); font-weight: 600; }

/* ---------- shelf ---------- */
.shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; width: min(1150px, 100%); }
.jar { width: 118px; text-align: center; border: 0; background: none; padding: 0; }
.jar svg { width: 118px; height: 170px; overflow: visible; display: block; }
.jar .nm { font: 600 15px/1.15 "Fredoka", sans-serif; display: block; }
.jar .fl { font: 500 13px "Nunito", sans-serif; opacity: .7; display: block; }
.jar:hover svg, .jar:focus svg { animation: wobble .6s ease-in-out 2; }
.jar .drip { opacity: 0; }
.scene.in .jar .drip { animation: drip var(--dur, 2.4s) ease-in infinite; animation-delay: var(--dl, 0s); }
.jar .grain2 { opacity: 0; }
.scene.in .jar .grain2 { animation: grain 2.4s ease-in infinite; animation-delay: var(--dl, 0s); }
.plank { width: min(1150px, 100%); height: 18px; border-radius: 9px; background: #d9a066; border: 3px solid var(--ink); margin-top: 8px; }
#shelf .badge-row { margin-top: 18px; }

/* ---------- finder ---------- */
.cats { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cats .choice { opacity: 1; animation: none; width: 128px; }
.cats .choice.on { background: var(--butter); transform: translateY(-4px); box-shadow: 0 10px 0 var(--ink); }
.dishes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 26px 0 0; min-height: 44px; max-width: 900px; }
.dish { border: 2.5px solid var(--ink); background: #fff; border-radius: 999px; padding: 8px 16px; font: 600 15px "Fredoka", sans-serif;
    opacity: 0; transform: scale(.6); animation: chip-in .45s var(--ease-pop) forwards; }
.dish.on { background: var(--pink); }
.result { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: min(900px, 100%); margin-top: 26px; min-height: 160px; }
.result .col { background: #fff; border-radius: 26px; padding: 20px; border: 3px solid var(--ink); }
.result h3 { margin: 0 0 12px; font: 700 22px "Fredoka", sans-serif; display: flex; align-items: center; gap: 8px; }
.result h3 .ico { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 17px; }
.result .try h3 .ico { background: var(--mint); } .result .watch h3 .ico { background: var(--rose); }
.result ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.result li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 17px "Fredoka", sans-serif;
    opacity: 0; transform: translateX(-20px); animation: slide-in .5s var(--ease-pop) forwards; }
.result .watch li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rose); animation: blip 1.4s infinite; }
.result .hint { grid-column: 1 / -1; text-align: center; font: 500 20px "Fredoka", sans-serif; opacity: .5; align-self: center; }

/* ---------- world ---------- */
#world { overflow: hidden; }
.trip { width: min(1000px, 100%); height: auto; }
.route-bg { fill: none; stroke: #f1d9e0; stroke-width: 10; stroke-linecap: round; }
.route { fill: none; stroke: var(--pink); stroke-width: 6; stroke-linecap: round; stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.scene.in .route { animation: route 9s ease-in-out infinite; }
.stops { position: relative; width: min(1000px, 100%); aspect-ratio: 900 / 340; margin-top: calc(-1 * min(1000px, 100%) * 340 / 900); }
.stop { position: absolute; transform: translate(-50%, -50%) scale(0); text-align: center; width: 140px; transition: transform .5s var(--ease-pop); }
.stop.show { transform: translate(-50%, -50%) scale(1); }
.stop .pinb { width: 62px; height: 62px; margin: 0 auto; border-radius: 50%; background: #fff; border: 3px solid var(--ink); display: grid; place-items: center; font-size: 30px; box-shadow: 0 4px 0 var(--ink); }
.stop b { display: block; font: 600 16px "Fredoka", sans-serif; margin-top: 6px; }
.stop small { font: 500 13px "Nunito", sans-serif; opacity: .7; }

/* ---------- care ---------- */
.tail { transform-box: fill-box; transform-origin: 100% 100%; }
.scene.in .tail { animation: wag .35s ease-in-out infinite alternate; }
.dog-head { transform-box: fill-box; transform-origin: 30% 80%; }
.scene.in .dog-head { animation: tilt 3s ease-in-out infinite; }
#care figcaption { display: block; }
.scene.in .nogo { animation: blip 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mol { transform-box: fill-box; transform-origin: center; }
.scene.in .mol { animation: spin 14s linear infinite; }
.phe { font-size: 24px; font-weight: 700; text-anchor: middle; fill: var(--ink); }
.pk { font-size: 16px; font-weight: 600; text-anchor: middle; fill: #fff; }
.rumble path { opacity: 0; }
.scene.in .rumble path { animation: rumble 1.2s ease-out infinite; }
.scene.in .rumble path:nth-child(2), .scene.in .rumble path:nth-child(4) { animation-delay: .3s; }
.scene.in .wobbly { animation: wiggle .3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }

/* ---------- close ---------- */
#close { background: linear-gradient(180deg, #fff1f4, #ffd9e4); }
.close-inner { text-align: center; }
.small-logo { font-size: clamp(54px, 9vw, 110px); }
.soon { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }
.soon span { border: 2.5px solid var(--ink); border-radius: 999px; padding: 8px 18px; font: 600 17px "Fredoka", sans-serif; background: #fff;
    animation: bob 3s ease-in-out infinite; }
.soon span:nth-child(2) { animation-delay: .3s; } .soon span:nth-child(3) { animation-delay: .6s; }
.soon span:nth-child(4) { animation-delay: .9s; } .soon span:nth-child(5) { animation-delay: 1.2s; } .soon span:nth-child(6) { animation-delay: 1.5s; }
.coming { font: 500 16px "Fredoka", sans-serif; opacity: .6; margin-top: 12px; }
.sources { font-size: 13px; opacity: .7; margin-top: 40px; }
.sources a { color: var(--ink); }
.copy { font-size: 13px; opacity: .5; }

/* ---------- keyframes ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes bob-small { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes drop-in { to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes steam { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes fall {
    0% { opacity: 0; transform: translateY(-40px) rotate(-20deg); }
    3% { opacity: 1; }
    18% { opacity: 1; transform: translateY(132px) rotate(40deg); }
    20%, 100% { opacity: 0; transform: translateY(140px) rotate(50deg); }
}
@keyframes ripple { 0%, 70% { opacity: 0; transform: scale(.3); } 73% { opacity: 1; transform: scale(.5); } 100% { opacity: 0; transform: scale(4); } }
@keyframes stir { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes blip { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(16px); opacity: 0; } 100% { opacity: 0; } }
@keyframes flow { to { stroke-dashoffset: -28; } }
@keyframes toast { 0%, 15% { fill: #f5e1b8; } 60%, 85% { fill: #c7843f; } 100% { fill: #f5e1b8; } }
@keyframes rise { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(1.15); } }
@keyframes twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .4; } 50% { transform: scale(1.2) rotate(45deg); opacity: 1; } }
@keyframes lid { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-8deg); } 90% { transform: rotate(6deg); } }
@keyframes bump { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }
@keyframes wob { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes ping { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes packet-drop { to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); } }
@keyframes coil { 0%, 10% { stroke: #7a3e3e; } 30%, 80% { stroke: #ff6a3d; } 100% { stroke: #7a3e3e; } }
@keyframes glow { 0%, 10% { opacity: .2; } 30%, 80% { opacity: 1; } 100% { opacity: .2; } }
@keyframes bake-sugar { 0%, 10% { fill: #f6e1b5; } 70%, 90% { fill: #d9984a; } 100% { fill: #f6e1b5; } }
@keyframes bake-allulose { 0%, 10% { fill: #f6e1b5; } 45% { fill: #c27a36; } 70%, 90% { fill: #8e4f22; } 100% { fill: #f6e1b5; } }
@keyframes bake-ery { 0%, 10% { fill: #f6e1b5; } 70%, 90% { fill: #f0d29a; } 100% { fill: #f6e1b5; } }
@keyframes spread { 0%, 10% { transform: scale(.85); } 70%, 90% { transform: scale(1); } 100% { transform: scale(.85); } }
@keyframes flame { from { transform: scaleY(.8); } to { transform: scaleY(1.2); } }
@keyframes meter { 0%, 10% { transform: scaleX(1); fill: #ff8fab; } 85%, 92% { transform: scaleX(.3); fill: #d8c9d4; } 100% { transform: scaleX(1); fill: #ff8fab; } }
@keyframes snow { 0% { opacity: 0; transform: translate(-30px, 40px) scale(.4) rotate(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(0, -20px) scale(1.2) rotate(180deg); } }
@keyframes therm { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.35); } }
@keyframes xtal { 0% { opacity: 0; transform: scale(0); } 10%, 85% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: 0; transform: scale(1.2) rotate(45deg); } }
@keyframes day1 { 0%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes day2 { 0%, 32% { opacity: 0; } 35%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes day3 { 0%, 65% { opacity: 0; } 68%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sink { 0% { opacity: 0; transform: translateY(0); } 5% { opacity: 1; } 45%, 90% { opacity: 1; transform: translateY(170px); } 100% { opacity: 0; transform: translateY(170px); } }
@keyframes ldrop { 0% { opacity: 0; transform: translateY(0); } 5% { opacity: 1; } 22% { opacity: 1; transform: translateY(70px); } 25%, 100% { opacity: 0; transform: translateY(80px); } }
@keyframes swirl { 0%, 22% { opacity: 0; transform: scale(.2); } 30% { opacity: .9; } 70%, 90% { opacity: .45; transform: scale(5); } 100% { opacity: 0; transform: scale(5); } }
@keyframes drip { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; transform: translateY(0) scale(1); } 55% { opacity: 1; transform: translateY(46px); } 60%, 100% { opacity: 0; transform: translateY(50px); } }
@keyframes grain { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 50% { opacity: 1; transform: translateY(44px); } 55%, 100% { opacity: 0; transform: translateY(46px); } }
@keyframes chip-in { to { opacity: 1; transform: none; } }
@keyframes slide-in { to { opacity: 1; transform: none; } }
@keyframes route { 0% { stroke-dashoffset: var(--len, 1200); } 70%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes wag { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
@keyframes rumble { 0% { opacity: 0; transform: scale(.8); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes wiggle { from { transform: translateX(-2px); } to { transform: translateX(2px); } }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
    .oven-row, .trio, .result { grid-template-columns: 1fr; }
    .dots { display: none; }
    .stop { width: 90px; }
    .stop .pinb { width: 44px; height: 44px; font-size: 22px; }
    .stop b { font-size: 13px; } .stop small { display: none; }
    .choice { width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}