/* ---- PRANK 3: peel-open hero window ---- */
.peel{position:relative;perspective:1100px}
/* a page hinged on its left edge. Opening: it turns off the fold and the fade lands on top of the
   turn (delay) so the edge-on sliver is gone before the rotation ends — no dead tail.
   Closing: the same transition read backwards, with opacity returning immediately so the sheet
   swings back in solid instead of materialising.  Over-swing easing is deliberately NOT used here:
   past the fold the cover is backface-hidden, so overshoot is invisible motion. */
.peel-cover{position:relative;z-index:2;transform-origin:left center;backface-visibility:hidden;
  transition:transform .4s var(--settle),opacity .16s ease-out}
.peel.peeled .peel-cover{transform:rotateY(-92deg) translateX(-2%);opacity:0;pointer-events:none;
  transition:transform .4s var(--settle),opacity .2s ease-out .14s}
/* the note underneath waits for the cover to clear the fold, then snaps into place */
.peel-peek{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:12px;
  background:#FFFDF6;border:2.5px dashed var(--cocoa);border-radius:var(--r);padding:22px;
  box-shadow:inset 0 3px 6px rgba(46,30,20,.10);
  transform:scale(.965);opacity:.35;transition:transform .3s var(--settle),opacity .2s ease-in}
.peel.peeled .peel-peek{transform:none;opacity:1;
  transition:transform .48s var(--pop) .1s,opacity .36s ease-out .1s}
.peel.peeled #heroTip{animation:popIn .34s var(--pop) .12s both}
.peel-hint{position:absolute;top:-9px;right:12px;z-index:4;display:inline-flex;align-items:center;min-height:24px;
  font-family:var(--display);font-weight:800;font-size:0.65625rem;line-height:1;
  text-transform:uppercase;letter-spacing:.08em;background:var(--cocoa);color:#fff;border-radius:9999px;padding:3px 10px;
  box-shadow:0 2px 0 rgba(46,30,20,.22);cursor:pointer}
.peel-corner{position:absolute;right:0;bottom:0;z-index:3;width:34px;height:34px;border-top-left-radius:16px;
  /* nested inside the card's 2.5px border (inner radius = --r - border), so the bottom/right border line stays unbroken */
  border-bottom-right-radius:calc(var(--r) - 2.5px);
  background:var(--yellow);border-left:2.5px solid var(--cocoa);border-top:2.5px solid var(--cocoa);
  box-shadow:-3px -3px 0 rgba(46,30,20,.15)}
/* the whole sticker lifts on hover — same -3px language as .cart/.teletype-ticket, and it tells you the card opens */
@media (hover:hover) and (pointer:fine){
  .peel{transition:transform .18s var(--pop)}
  .peel:not(.peeled):hover{transform:translateY(-3px)}
}

/* ---- scroll bump ---- */
.bumped{animation:bumpOut .9s cubic-bezier(.34,1.56,.64,1)}
@keyframes bumpOut{0%{transform:translate(0,0) rotate(0)}28%{transform:translate(16px,-12px) rotate(-2.6deg)}58%{transform:translate(-7px,5px) rotate(1.3deg)}100%{transform:translate(0,0) rotate(0)}}

/* ---- PRANK 2: ketchup rain ---- */
.ketchup-layer{position:fixed;inset:0;z-index:60;overflow:hidden;pointer-events:none}
.falling-bottle{position:absolute;top:var(--rest,72vh);color:var(--red);transform-origin:center;
  animation:bottleFall 1.05s cubic-bezier(.45,1.3,.7,1) both;pointer-events:auto;cursor:pointer;
  transition:opacity .24s ease-out,filter .18s}
.falling-bottle svg{transition:transform .16s cubic-bezier(.34,1.56,.64,1)}
.falling-bottle:hover svg{transform:scale(1.16) rotate(-6deg)}
.falling-bottle:active svg{transform:scale(.92) rotate(4deg)}
.falling-bottle.plucked{opacity:0;filter:blur(2px)}
/* drop in tilted + small, then squash once on landing */
@keyframes bottleFall{
  0%{top:-48px;transform:translateX(0) rotate(-10deg) scale(.72)}
  12%{transform:translateX(calc(var(--drift,0px) * .35)) rotate(calc(var(--rot,0deg) * .4)) scale(1)}
  80%{top:var(--rest,72vh);transform:translateX(var(--drift,0px)) rotate(var(--rot,0deg)) scale(1)}
  90%{transform:translateX(var(--drift,0px)) rotate(var(--rot,0deg)) scale(1.16,.78)}
  100%{top:var(--rest,72vh);transform:translateX(var(--drift,0px)) rotate(var(--rot,0deg)) scale(1)}
}
.falling-bottle.no-fall{animation:none;top:var(--rest,72vh);transform:rotate(var(--rot,0deg))}
.ketchup-layer.sweeping .falling-bottle{animation:sweepOut .55s cubic-bezier(.5,.1,.9,.4) forwards}
@keyframes sweepOut{
  0%{opacity:1;transform:translateX(var(--drift,0px)) rotate(var(--rot,0deg)) scale(1)}
  35%{opacity:1;transform:translateX(7vw) rotate(calc(var(--rot,0deg) - 30deg)) scale(1.08)}
  100%{opacity:0;transform:translateX(130vw) rotate(240deg) scale(.85)}
}
/* The ketchup rain may not land in the bottom chrome band: a tomato settling behind the prank button, the bottom
   nav, the BERSIHKAN pill or the peeker can't be plucked, and plucking by hand is the only route to the FAKTA
   RADAR payoff. Mobile: prank button top (138px) + the peeker's peek (108px). Desktop: peeker (87px). This is the
   floor of the reserved band; rainKetchup() takes the larger of it and the controls' measured tops, so nudging a
   `bottom` up needs this number to keep up. */
:root{--rain-floor:150px}
.prank-btn{position:fixed;right:16px;bottom:86px;z-index:65;width:52px;height:52px;background:var(--red);color:var(--cocoa);
  font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1}
/* centred with left:50% + the `translate` property (not `transform`), so .btn-keycap's translateY press can't un-centre it.
   appear/disappear ride the same translate/scale properties, so they compose with .btn-keycap's transform too. */
.clean-btn{position:fixed;left:50%;translate:-50% 0;bottom:96px;z-index:66;background:var(--yellow);color:var(--cocoa);
  font-family:var(--display);font-weight:800;font-size:0.8125rem;letter-spacing:.06em;text-transform:uppercase;padding:12px 22px;
  animation:cleanIn .26s cubic-bezier(.34,1.56,.64,1)}
.clean-btn.leaving{animation:cleanOut .2s ease-in forwards}
@keyframes cleanIn{from{opacity:0;translate:-50% 12px;scale:.86}to{opacity:1;translate:-50% 0;scale:1}}
@keyframes cleanOut{from{opacity:1;translate:-50% 0;scale:1}to{opacity:0;translate:-50% 10px;scale:.86}}
/* the mess you made: a round splat body with 3-4 round points sticking out, drawn twice so the cocoa rim follows the
   outline (half the 9-unit stroke difference = 4.5 viewBox units, ~2px on a 44px splat). */
.ketchup-splat{position:absolute;translate:-50% -50%;width:var(--sw,44px);height:var(--sh,38px);pointer-events:none;
  transform:rotate(var(--rot,0deg));animation:splatIn .28s cubic-bezier(.34,1.56,.64,1) both}
.ketchup-splat svg{display:block;width:100%;height:100%}
.ketchup-layer.sweeping .ketchup-splat,.ketchup-splat.wiped{animation:sweepOut .5s cubic-bezier(.5,.1,.9,.4) forwards}
/* lands with a squash; --rot is shared with sweepOut so the splat doesn't snap straight as it leaves */
@keyframes splatIn{
  0%{transform:rotate(var(--rot,0deg)) scale(.25);opacity:0}
  60%{transform:rotate(var(--rot,0deg)) scale(1.14);opacity:1}
  100%{transform:rotate(var(--rot,0deg)) scale(1)}
}
/* dust where a tomato or a splat was: a big cloud crosses the layer from off-screen and carries it out of frame */
.dust-cloud{position:absolute;left:0;translate:-50% -50%;width:var(--sw,300px);height:var(--sh,150px);pointer-events:none;
  animation:dustBlow .8s ease-in both}
.dust-cloud svg{display:block;width:100%;height:100%}
@keyframes dustBlow{
  0%{opacity:0;transform:translateX(-30vw) scale(.75)}
  25%{opacity:.28}
  60%{opacity:.22}
  100%{opacity:0;transform:translateX(140vw) scale(1.2)}
}
/* PRANK 2 payoff: a full clear hands you one real number from the payload. Deliberately outside .ketchup-layer —
   that layer is aria-hidden + pointer-events:none, so meaningful content placed in it is neither readable nor clickable. */
.splat-card{position:fixed;left:50%;translate:-50% 0;bottom:152px;z-index:66;width:min(92vw,420px);
  background:var(--panel);border:2px solid var(--cocoa);border-radius:18px;padding:20px 22px 18px;
  box-shadow:0 6px 0 rgba(46,30,20,.3);animation:cleanIn .26s cubic-bezier(.34,1.56,.64,1)}
.splat-card.leaving{animation:cleanOut .2s ease-in forwards}
.splat-scrawl{display:inline-block;font-family:var(--marker);font-size:0.9375rem;line-height:1;color:var(--red-ink);transform:rotate(-2deg)}
.splat-fact{font-family:var(--display);font-weight:800;font-size:1.0625rem;line-height:1.42;color:var(--cocoa);overflow-wrap:break-word}
.splat-close{position:absolute;top:-13px;right:-9px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  background:var(--yellow);color:var(--cocoa);border:2px solid var(--cocoa);border-radius:9999px;
  font-family:var(--display);font-weight:800;font-size:1.0625rem;line-height:1}
@media (min-width:1024px){:root{--rain-floor:100px}.prank-btn{bottom:18px}.clean-btn{bottom:22px}.splat-card{bottom:84px}}