:root{
  --espresso:#120a06;
  --mocha:#5a3420;
  --caramel:#e2a24c;
  --honey:#ffd34d;
  --cream:#f6e9d6;
  --latte:#cdb497;
  --foam:#fffaf1;
  --bar-h:62px;
  --mx:50%;--my:50%;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--espresso);color:var(--cream);overflow:hidden;overscroll-behavior:none}
body{font-family:"IBM Plex Mono",ui-monospace,monospace;-webkit-font-smoothing:antialiased;touch-action:none;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ───────── top bar ───────── */
#bar{position:fixed;inset:0 0 auto 0;height:var(--bar-h);z-index:50;display:flex;align-items:center;gap:12px;padding:0 16px;
  background:linear-gradient(#120a06e6,#120a0600)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
.brand img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--honey);box-shadow:0 0 16px #ffd34d88}
.brand .name{font-family:"Rubik Wet Paint",system-ui;font-size:24px;white-space:nowrap;color:var(--cream);text-shadow:0 2px 0 var(--mocha),0 0 18px #e2a24c88}
.brand .tick{font-size:12px;font-weight:700;color:var(--espresso);background:var(--honey);padding:3px 8px;border-radius:99px;white-space:nowrap}
nav{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}

/* textured buttons: photo background + tinted glass + cream text */
.tex{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;
  border-radius:14px;background-size:cover;background-position:center;color:var(--foam);font-weight:700;letter-spacing:1px;
  border:1.5px solid #fff3dd55;box-shadow:0 6px 18px #0008,inset 0 1px 0 #fff6;transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s,border-color .2s}
.tex::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0000 0,#0006 100%)}
.tex::after{content:"";position:absolute;top:-60%;left:-40%;width:40%;height:220%;z-index:1;background:linear-gradient(90deg,#fff0,#fff5,#fff0);transform:rotate(18deg) translateX(-200%);transition:none;pointer-events:none}
.tex:hover{transform:translateY(-2px) scale(1.04);border-color:var(--honey);box-shadow:0 10px 26px #000a,0 0 22px #ffd34d55,inset 0 1px 0 #fff8}
.tex:hover::after{transform:rotate(18deg) translateX(600%);transition:transform .8s ease}
.tex:active{transform:scale(.96)}
.tex span,.tex code,.tex svg{position:relative;z-index:2;text-shadow:0 1px 3px #000c}

.buy{background-image:url(assets/btn_buy.jpg);color:var(--espresso)}
.buy::before{background:linear-gradient(180deg,#fff8 0,#fff2 45%,#0003 100%)}
.buy span{text-shadow:0 1px 0 #fff9;font-size:14px}
.buy{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{box-shadow:0 6px 18px #0008,0 0 26px #ffd34d88,inset 0 1px 0 #fff6}}
.x{background-image:url(assets/btn_x.jpg);width:42px;padding:0}
.x svg{width:18px;height:18px;fill:var(--foam)}
.ca{background-image:url(assets/btn_ca.jpg);max-width:330px;min-width:0;font-size:12px;justify-content:flex-start}
.ca::before{background:linear-gradient(90deg,#120a06cc,#120a0688)}
.ca .lbl{color:var(--honey)}
.ca code{font-family:inherit;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--cream)}
.ca .cp{opacity:.75;font-weight:400}
.x.big,.buy.big{height:50px;font-size:15px;padding:0 24px;width:auto}
.mute{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#120a06aa;border:1.5px solid #fff3dd33}
.mute svg{width:18px;height:18px;fill:var(--cream)}
.mute:hover{border-color:var(--honey)}
.mute .off{display:none}
body.muted .mute .on{display:none}
body.muted .mute .off{display:block}

/* ───────── stage ───────── */
#stage{position:fixed;inset:0;overflow:hidden;background:#000}
.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  filter:saturate(1.08) contrast(1.03) sepia(.08);transform:scale(1.04);
  transition:opacity .9s ease,transform 6s ease-out}
.vid.show{opacity:1;transform:scale(1)}
.vid.punch{transform:scale(1.12);transition:transform .5s cubic-bezier(.2,.9,.2,1),opacity .9s ease}

#fx{position:absolute;inset:0;pointer-events:none;z-index:4}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 45%,#120a0699 85%,#120a06 100%)}
#grain{position:absolute;inset:0;width:100%;height:100%;opacity:.06;mix-blend-mode:overlay}
#beans{position:absolute;inset:0;width:100%;height:100%}
.leak{position:absolute;inset:-20%;background:radial-gradient(ellipse at 15% 20%,#ffb45a55,transparent 45%),radial-gradient(ellipse at 90% 85%,#ff8a3d33,transparent 40%);
  mix-blend-mode:screen;animation:leak 14s ease-in-out infinite alternate}
@keyframes leak{to{transform:translate(6%,-4%) rotate(4deg);opacity:.6}}
.steam i{position:absolute;bottom:-20%;width:26vmin;height:70vmin;border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%,#fff9ef33,#fff9ef00 65%);filter:blur(18px);animation:rise 9s linear infinite;opacity:0}
.steam i:nth-child(1){left:8%}
.steam i:nth-child(2){left:44%;animation-delay:3s;animation-duration:11s}
.steam i:nth-child(3){left:78%;animation-delay:6s}
@keyframes rise{0%{transform:translateY(0) scaleX(.7) rotate(-4deg);opacity:0}20%{opacity:.9}100%{transform:translateY(-110vh) scaleX(1.4) rotate(8deg);opacity:0}}
.glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#ffd34d,#ffb45a 40%,transparent 75%);opacity:0;mix-blend-mode:screen}
#stage.bloom .glow{animation:bloom .9s ease-out 1}
@keyframes bloom{0%{opacity:.75}100%{opacity:0}}

/* scene change: a cream swirl sweeps across like milk poured into coffee */
.swirl{position:absolute;inset:-30%;opacity:0;
  background:conic-gradient(from 0deg,var(--cream),var(--latte),#a8754a,var(--cream),var(--caramel),var(--cream));
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 0,#000 30%,transparent 62%);mask:radial-gradient(circle at 50% 50%,#000 0,#000 30%,transparent 62%);
  filter:blur(24px)}
#stage.pour .swirl{animation:swirl .95s cubic-bezier(.6,0,.3,1) 1}
@keyframes swirl{0%{opacity:0;transform:scale(.2) rotate(0)}45%{opacity:.95;transform:scale(1.3) rotate(160deg)}100%{opacity:0;transform:scale(2.4) rotate(320deg)}}
#stage.wobble{animation:wobble .7s cubic-bezier(.36,.07,.19,.97) 1}
@keyframes wobble{20%{transform:scale(1.015) rotate(-.4deg)}50%{transform:scale(.99) rotate(.4deg)}80%{transform:scale(1.005)}}

/* ───────── captions ───────── */
#cap{position:absolute;z-index:6;left:clamp(16px,6vw,96px);bottom:clamp(110px,17vh,180px);max-width:min(34vw,470px);pointer-events:none}
#cap .kick{display:inline-block;font-size:11px;font-weight:700;letter-spacing:3px;color:var(--espresso);background:var(--honey);padding:4px 9px;border-radius:99px;opacity:0;transform:translateY(8px);transition:all .5s}
#cap .line{font-family:"Rubik Wet Paint",system-ui;font-size:clamp(34px,4.3vw,64px);line-height:1.02;margin:.3em 0 .35em;color:var(--foam);
  text-shadow:0 3px 0 var(--mocha),0 6px 24px #000c}
#cap .meme{font-size:clamp(13px,1.2vw,17px);color:var(--cream);opacity:0;transform:translateY(6px);transition:all .6s;
  background:#120a06b3;backdrop-filter:blur(6px);display:inline;padding:4px 8px;border-radius:8px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#cap.in .kick,#cap .meme.ready{opacity:1;transform:none}
#cap .line .c{opacity:0;display:inline-block;transform:translateY(-22px) scale(.6) rotate(-8deg);transition:all .45s cubic-bezier(.3,1.7,.5,1)}
#cap .line .c.on{opacity:1;transform:none}
#cap .line .w{display:inline-block;white-space:nowrap}
#cap .line .sp{display:inline-block;width:.28em}

/* ───────── hint + cup progress ───────── */
#hint{position:absolute;z-index:6;left:50%;bottom:82px;transform:translateX(-50%);text-align:center;font-size:12px;letter-spacing:3px;
  color:var(--cream);pointer-events:none;transition:opacity .6s;text-shadow:0 1px 6px #000}
#hint .s{display:block;font-size:10px;color:var(--honey);margin-top:4px;animation:breathe 2.4s infinite}
#hint.gone{opacity:0}
@keyframes breathe{50%{opacity:.35}}
#cups{position:absolute;z-index:6;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:14px}
#cups button{position:relative;width:24px;height:36px;padding:0}
#cups button::before{content:"";position:absolute;left:3px;right:3px;bottom:0;height:24px;border:2px solid #f6e9d6aa;border-top:0;border-radius:0 0 6px 6px;
  background:linear-gradient(to top,var(--caramel) var(--f,0%),#0000 var(--f,0%));transition:--f .6s}
#cups button::after{content:"";position:absolute;left:1px;right:1px;bottom:22px;height:8px;border-radius:8px 8px 3px 3px;background:var(--foam);
  transform:scale(0);transition:transform .35s cubic-bezier(.3,1.8,.5,1)}
#cups button.lit::before{--f:100%;background:linear-gradient(to top,#6b3f26 0,var(--caramel) 100%)}
#cups button.lit::after{transform:scale(1)}
#cups button.now{animation:hop .9s ease-in-out infinite}
#cups button.now::before{border-color:var(--honey);box-shadow:0 0 14px #ffd34d88}
@keyframes hop{50%{transform:translateY(-4px)}}

/* ───────── final receipt ───────── */
#final{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:calc(var(--bar-h) + 10px) 16px 76px;
  background:radial-gradient(ellipse at 50% 50%,#120a0640,#120a06cc 75%);opacity:0;pointer-events:none;transition:opacity .9s}
#final.on{opacity:1;pointer-events:auto}
.receipt{width:min(430px,100%);max-height:100%;overflow:auto;color:#2b1a10;background:#fbf5ea;padding:22px 22px 18px;text-align:center;position:relative;
  box-shadow:0 30px 70px #000c,0 0 0 1px #0001;transform:rotate(-1.5deg) translateY(30px);transition:transform .9s cubic-bezier(.2,1.4,.4,1);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,radial-gradient(circle at 8px 100%,#0000 6px,#000 6.5px) bottom/16px 10px repeat-x;
          mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,radial-gradient(circle at 8px 100%,#0000 6px,#000 6.5px) bottom/16px 10px repeat-x}
#final.on .receipt{transform:rotate(-1.5deg)}
.receipt .shop{font-weight:700;letter-spacing:2px;font-size:14px}
.receipt .addr{font-size:11px;color:#7a6250;margin-top:2px}
.receipt h1{font-family:"Rubik Wet Paint",system-ui;font-size:clamp(32px,7vw,44px);line-height:1;margin:.45em 0 .15em;color:var(--mocha)}
.receipt .sub{font-size:12px;color:#7a6250}
.dash{border-top:2px dashed #2b1a1055;margin:14px 0}
.items{list-style:none;text-align:left;display:grid;gap:9px;font-size:13px}
.items li{display:grid;grid-template-columns:28px 1fr;column-gap:6px}
.items li span{font-weight:700;color:#a8642a}
.items li em{grid-column:2;font-style:normal;font-size:11px;color:#7a6250}
.total{display:flex;justify-content:space-between;font-weight:700;font-size:14px}
.acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.barcode{font-size:22px;letter-spacing:-1px;margin-top:14px;color:#2b1a10;transform:scaleY(1.6)}
.thanks{font-size:11px;color:#7a6250;margin-top:8px}
.again{margin-top:10px;font-size:12px;color:#a8642a;letter-spacing:1px}
.again:hover{color:var(--mocha)}

#toast{position:absolute;z-index:60;left:50%;top:calc(var(--bar-h) + 12px);transform:translate(-50%,-8px);padding:10px 16px;background:#fbf5ea;color:#2b1a10;
  border-radius:12px;font-size:13px;font-weight:600;opacity:0;transition:all .35s cubic-bezier(.3,1.6,.5,1);pointer-events:none;max-width:calc(100vw - 32px);text-align:center;box-shadow:0 10px 30px #0009}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ───────── gate ───────── */
#gate{position:fixed;inset:0;z-index:100;background:var(--espresso);display:grid;place-items:center;transition:opacity 1.2s,transform 1.2s}
#gate.out{opacity:0;transform:scale(1.08);pointer-events:none}
#gate .reveal{position:absolute;inset:0;background:url(assets/s1.jpg) center/cover;filter:blur(6px) brightness(.55) saturate(1.1);transform:scale(1.06)}
#gate .reveal::after{content:"";position:absolute;inset:0;background:radial-gradient(circle 260px at var(--mx) var(--my),#ffd34d22,transparent 70%)}
.gatebox{position:relative;text-align:center;padding:16px}
.gatebox h1{font-family:"Rubik Wet Paint",system-ui;font-size:clamp(44px,9vw,108px);line-height:1;color:var(--foam);text-shadow:0 4px 0 var(--mocha),0 0 40px #e2a24caa}
.gatebox .tag{color:var(--cream);letter-spacing:3px;font-size:13px;margin:.8em 0 1.6em;opacity:.85}
#enter{padding:16px 32px;border-radius:99px;background:var(--honey);color:var(--espresso);font-weight:700;letter-spacing:3px;font-size:15px;
  box-shadow:0 8px 0 #a8642a,0 14px 30px #0009;transition:all .2s cubic-bezier(.3,1.6,.5,1)}
#enter:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 11px 0 #a8642a,0 18px 40px #000a,0 0 40px #ffd34d88}
#enter:active{transform:translateY(5px);box-shadow:0 3px 0 #a8642a,0 6px 16px #0009}
.gatebox .warn{margin-top:22px;font-size:12px;color:var(--honey)}
.gatebox .fine{margin-top:6px;font-size:11px;color:#a8917b}
.cup{position:relative;width:64px;height:84px;margin:0 auto 18px}
.cup .fill{position:absolute;left:6px;right:6px;bottom:0;height:62px;border-radius:0 0 12px 12px;border:3px solid var(--cream);border-top:0;overflow:hidden;
  background:linear-gradient(to top,#6b3f26 0,var(--caramel) 100%) bottom/100% 0 no-repeat;animation:fillup 2.6s ease-in-out infinite}
@keyframes fillup{0%{background-size:100% 10%}60%,100%{background-size:100% 100%}}
.cup .cream{position:absolute;left:2px;right:2px;bottom:56px;height:20px;border-radius:30px 30px 8px 8px;background:var(--foam);box-shadow:inset 0 -4px 0 #e8d8c0}
.cup .straw{position:absolute;left:38px;bottom:66px;width:6px;height:30px;background:#2f7d4f;border-radius:3px;transform:rotate(14deg)}

/* ───────── mobile ───────── */
@media (max-width:760px){
  :root{--bar-h:auto}
  #bar{height:auto;flex-wrap:wrap;padding:10px 12px 8px;gap:8px}
  .brand .name{font-size:19px}
  .brand .tick{display:none}
  nav{display:contents}
  .x,.mute{height:38px;width:38px}
  .mute{order:1;margin-left:auto}
  .buy{order:2;height:38px;padding:0 12px}
  .buy span{font-size:12px}
  .x{order:3}
  .ca{order:4;flex:1 1 0;max-width:none;height:38px;padding:0 10px;gap:6px}
  .ca .cp{display:none}
  #cap{left:16px;right:16px;max-width:none;bottom:106px}
  #hint{bottom:66px;width:100%}
  #toast{top:110px}
  #final{padding-top:112px}
  .receipt{padding:18px 16px 14px}
}
@media (max-height:620px){
  .cup{transform:scale(.6);margin:-14px auto 0}
  .gatebox h1{font-size:clamp(34px,7vw,64px)}
  .gatebox .tag{margin:.4em 0 1em}
  .gatebox .warn{margin-top:12px}
  #cap{bottom:84px}
  #hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vid,.leak,.steam i,.buy,#cups button.now,#stage.pour .swirl,#stage.wobble{animation:none!important;transition:opacity .4s!important}
}