/* ==========================================================================
   TBG 10.10 promo popup
   The stage reproduces the 1080 x 1350 poster artboard: every position below
   is a percentage of that artboard and type is sized in cqw (1cqw = 10.8
   poster px), so the final frame matches the poster at any modal width.

   Motion (final frame = the poster):
     0      card pops in, logo drops
     .15s   envelope rises
     .7s    ticket slides up out of the envelope
     1.25s  10% seal stamps on, sparkles twinkle
     1.35s  plates come in from left, right and bottom
     1.95s  CTA pops; idle loops (plates bob, seal wobbles, CTA shine)
   ========================================================================== */
#order-welcome {
  --promo-red:#d23b26;
  --promo-blue:#2f78bd;
  --promo-navy:#173a5e;
  --promo-envelope:#0b4670;
  --promo-paper:#f9e9d0;
  --promo-seal:#a22918;
  --promo-round:"Fredoka", "DM Sans", Arial, sans-serif;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  /* Anchor the modal to the viewport so Safari keeps it above the backdrop. */
  position:fixed; inset:0;
  /* never taller than the viewport: stage is 1.25x its width, plus the terms strip */
  width:min(440px, calc(100% - 28px), calc((100dvh - 92px) * .8));
  max-width:none; max-height:none; margin:auto; padding:0; border:0;
  border-radius:14px; overflow:hidden;
  background:var(--promo-red); color:#fff6e8;
  box-shadow:0 24px 65px rgba(4,12,22,.5);
}
#order-welcome::backdrop { background:rgba(8,24,37,.8); backdrop-filter:blur(7px); }
#order-welcome:focus { outline:none; }

.welcome-close {
  position:absolute; z-index:20; top:10px; right:10px; display:grid; place-items:center;
  width:40px; height:40px; padding:0; cursor:pointer;
  border:2px solid #fff6e8; border-radius:50%; background:var(--promo-navy); color:#fff;
  transition:transform .3s var(--ease-pop), background .2s ease;
}
.welcome-close:hover { transform:rotate(90deg); background:#0d2338; }
.welcome-close:focus-visible, .welcome-order-cta:focus-visible { outline:3px solid #ffd128; outline-offset:3px; }

/* ---- Artboard ---- */
.promo-stage {
  position:relative; isolation:isolate; container-type:inline-size;
  aspect-ratio:1080 / 1350; overflow:hidden;
  background-color:var(--promo-red);
  background-image:
    linear-gradient(rgba(255,235,220,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,235,220,.085) 1px, transparent 1px);
  background-size:4.63% 3.704%;           /* 50px poster grid */
  background-position:-1px -1px;
}
/* Print grain over everything, like the poster */
.promo-stage::after {
  content:""; position:absolute; inset:0; z-index:15; pointer-events:none; opacity:.22; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.promo-logo { position:absolute; z-index:6; left:50%; top:1.6%; width:9.6%; height:auto; translate:-50% 0; }

/* Envelope (back) and its front pocket. The ticket sits between them. */
.promo-envelope, .promo-pocket {
  position:absolute; left:7.2%; width:85.7%; background-color:var(--promo-envelope);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)'/%3E%3C/svg%3E");
}
.promo-envelope { z-index:1; top:39.6%; height:49.1%; border-radius:2.2cqw 2.2cqw 1cqw 1cqw; }
.promo-pocket { z-index:3; top:45.2%; height:43.5%; border-radius:0 0 1cqw 1cqw; }
/* bottom V seams of the envelope */
.promo-pocket::after {
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(to top right, transparent calc(50% - 1px), rgba(0,0,0,.28) 50%, transparent calc(50% + 1px)) left bottom / 50% 52% no-repeat,
             linear-gradient(to top left, transparent calc(50% - 1px), rgba(0,0,0,.28) 50%, transparent calc(50% + 1px)) right bottom / 50% 52% no-repeat;
}

/* Ticket with stamp-perforated edge */
.promo-ticket {
  position:absolute; z-index:2; left:13.7%; top:10.4%; width:72.6%; height:34.8%;
  color:var(--promo-blue); text-align:center;
  filter:drop-shadow(0 .5cqw .9cqw rgba(80,14,6,.28));
}
.promo-ticket__paper { position:absolute; inset:0; width:100%; height:100%; color:var(--promo-paper); }
.promo-ticket h2 {
  position:absolute; left:0; right:0; top:9.4%; margin:0;
  font-family:var(--promo-round); font-weight:700; color:var(--promo-blue); line-height:1;
}
.promo-ticket h2 span { display:block; }
.promo-ticket h2 span:first-child { font-size:16cqw; line-height:.86; letter-spacing:-.015em; margin-right:5%; }
.promo-ticket h2 span:last-child { font-size:12.38cqw; line-height:.86; letter-spacing:-.005em; margin-left:2%; }
.promo-ticket p {
  position:absolute; left:0; right:0; top:77.2%; margin:0;
  font-family:var(--promo-round); font-weight:600; font-size:3.53cqw; line-height:1; letter-spacing:.012em; color:var(--promo-navy);
}
.promo-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.promo-spark { position:absolute; width:3.4cqw; aspect-ratio:1; translate:-50% -50%; color:var(--promo-blue); }
.promo-spark svg { display:block; width:100%; height:100%; fill:currentColor; }
.promo-spark--left { left:18.8%; top:18%; }
.promo-spark--right { left:78.7%; top:39.4%; }

/* 10% seal */
.promo-badge {
  position:absolute; z-index:8; left:81.3%; top:15.6%; width:20%; aspect-ratio:1;
  translate:-50% -50%; rotate:-12deg; cursor:default;
  filter:drop-shadow(0 .45cqw .6cqw rgba(60,8,3,.35));
}
.promo-badge svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.promo-badge path { fill:var(--promo-seal); stroke:#f3b98f; stroke-width:2.6; stroke-linejoin:round; }
.promo-badge b {
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--promo-round); font-weight:700; font-size:6.11cqw; line-height:1; color:#fff3e2; letter-spacing:-.01em;
  rotate:-6deg;
}

/* Plates: three layers on one 1000x1250 canvas, aligned like the poster */
.promo-food { position:absolute; z-index:7; left:0; top:13.7%; width:100%; aspect-ratio:1000 / 1250; pointer-events:none; }
.promo-plate { position:absolute; inset:0; width:100%; height:100%; }
.promo-plate--left { transform-origin:0% 52%; scale:.9; translate:0 -2.6%; }
.promo-plate--right { transform-origin:100% 50%; scale:.9; translate:0 -1.6%; }
.promo-plate--bottom { transform-origin:51.6% 66.8%; translate:-1.6% -6.4%; scale:.86; }

/* CTA in the poster's URL-pill position */
.welcome-order-cta {
  position:absolute; z-index:10; left:50%; top:89.2%; translate:-50% 0;
  display:flex; align-items:center; justify-content:center; gap:2.4cqw;
  min-width:52%; height:7%; padding:0 5.5cqw;
  border:.5cqw solid rgba(255,246,232,.9); border-radius:999px;
  background:#2c6db3; color:#fff;
  font-family:var(--promo-round); font-weight:600; font-size:4.04cqw; line-height:1; letter-spacing:.01em; white-space:nowrap; text-decoration:none;
  box-shadow:0 .9cqw 0 #173a5e, 0 1.6cqw 2.6cqw rgba(30,6,2,.35);
  overflow:hidden;
  transition:scale .2s var(--ease-pop), background .2s ease, box-shadow .2s ease;
}
.welcome-order-cta:hover { scale:1.05; background:#3479c4; }
.welcome-order-cta:active { scale:.97; box-shadow:0 .3cqw 0 #173a5e; }
.welcome-order-cta span { position:relative; font-size:1.15em; }
.welcome-order-cta::before {
  content:""; position:absolute; top:-30%; bottom:-30%; left:-30%; width:22%; transform:skewX(-18deg); translate:-100% 0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); pointer-events:none;
}

.welcome-note { margin:0; padding:9px 14px 12px; text-align:center; font-family:var(--body); font-size:11px; line-height:1.35; color:#fff3e2; }

/* ---- Motion ---- */
#order-welcome[open]::backdrop { animation:promo-fade .3s ease both; }
#order-welcome[open] { animation:promo-pop .5s var(--ease-pop) both; }
#order-welcome[open] .promo-logo { animation:promo-drop .55s var(--ease-pop) .2s both; }
#order-welcome[open] .promo-envelope,
#order-welcome[open] .promo-pocket { animation:promo-rise .6s var(--ease-out) .15s both; }
#order-welcome[open] .promo-ticket { animation:promo-ticket .85s cubic-bezier(.2,.9,.3,1.12) .7s both; }
#order-welcome[open] .promo-spark { animation:promo-spark-in .4s var(--ease-pop) 1.2s both, promo-twinkle 2.4s ease-in-out 1.7s infinite; }
#order-welcome[open] .promo-spark--right { animation-delay:1.3s, 2.5s; }
#order-welcome[open] .promo-badge { animation:promo-stamp .6s var(--ease-pop) 1.25s both, promo-wobble 3.2s ease-in-out 2.2s infinite; }
#order-welcome[open] .promo-plate--left { animation:promo-from-left .75s var(--ease-pop) 1.35s both, promo-bob 3.4s ease-in-out 2.3s infinite; }
#order-welcome[open] .promo-plate--right { animation:promo-from-right .75s var(--ease-pop) 1.47s both, promo-bob 3.8s ease-in-out 2.6s infinite; }
#order-welcome[open] .promo-plate--bottom { animation:promo-from-bottom .75s var(--ease-pop) 1.6s both, promo-bob 3.6s ease-in-out 2.45s infinite; }
#order-welcome[open] .welcome-order-cta { animation:promo-cta-in .5s var(--ease-pop) 1.95s both; }
#order-welcome[open] .welcome-order-cta::before { animation:promo-shine 3.2s ease-in-out 2.8s infinite; }
#order-welcome[open] .welcome-note { animation:promo-fade .4s ease 2.1s both; }
.promo-badge:hover b { animation:promo-spin .7s var(--ease-pop); }

@keyframes promo-fade { from { opacity:0; } }
@keyframes promo-pop { from { opacity:0; transform:translateY(24px) scale(.92); } }
@keyframes promo-drop { from { opacity:0; transform:translateY(-160%) scale(.6); } }
@keyframes promo-rise { from { opacity:0; transform:translateY(40%); } }
/* starts fully tucked behind the pocket (its top at the pocket's edge) */
@keyframes promo-ticket { 0% { transform:translateY(100%); opacity:0; } 6% { opacity:1; } 100% { transform:none; opacity:1; } }
@keyframes promo-spark-in { from { opacity:0; transform:scale(0) rotate(-90deg); } }
@keyframes promo-twinkle { 0%,100% { transform:scale(1) rotate(0); } 50% { transform:scale(.72) rotate(45deg); } }
@keyframes promo-stamp {
  0%   { opacity:0; transform:scale(2.2) rotate(-50deg); }
  60%  { opacity:1; transform:scale(.9) rotate(4deg); }
  100% { opacity:1; transform:none; }
}
@keyframes promo-wobble { 0%,100% { transform:rotate(0) scale(1); } 50% { transform:rotate(-5deg) scale(1.04); } }
@keyframes promo-spin { from { rotate:-6deg; } to { rotate:354deg; } }
@keyframes promo-from-left { from { opacity:0; transform:translateX(-62%) rotate(-10deg); } }
@keyframes promo-from-right { from { opacity:0; transform:translateX(62%) rotate(10deg); } }
@keyframes promo-from-bottom { from { opacity:0; transform:translateY(55%); } }
@keyframes promo-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-.9%); } }
@keyframes promo-cta-in { from { opacity:0; transform:translateY(40%) scale(.7); } }
@keyframes promo-shine { 0% { translate:-100% 0; } 40%,100% { translate:640% 0; } }

@media(prefers-reduced-motion:reduce) {
  #order-welcome[open], #order-welcome[open]::backdrop,
  #order-welcome[open] *, #order-welcome[open] *::before { animation:none !important; transition:none !important; }
}

/* 3 Oct: "OFF" under 10% + promo code TBG10 on the ticket */
.promo-badge b { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2cqw; font-size:5.5cqw; }
.promo-badge b small { font-size:.42em; font-weight:700; letter-spacing:.14em; line-height:1; margin-left:.14em; }
.promo-ticket h2 { top:7%; }
.promo-ticket p { top:66%; }
.promo-code {
  position:absolute; left:50%; top:78.5%; translate:-50% 0; z-index:1;
  display:inline-flex; align-items:center; gap:1.6cqw; padding:1cqw 1.4cqw 1cqw 2.2cqw;
  border:.45cqw dashed var(--promo-blue); border-radius:1.6cqw; background:#fff;
  color:var(--promo-navy); font-family:var(--promo-round); line-height:1; white-space:nowrap; cursor:pointer;
  transition:scale .18s ease, background .18s ease;
}
.promo-code:hover { scale:1.04; background:#fff8ec; }
.promo-code:focus-visible { outline:.6cqw solid var(--promo-blue); outline-offset:.6cqw; }
.promo-code__label { font-size:2.32cqw; font-weight:600; letter-spacing:.06em; }
.promo-code b { font-size:4.3cqw; font-weight:700; letter-spacing:.08em; color:var(--promo-blue); }
.promo-code__copy {
  padding:.8cqw 1.4cqw; border-radius:1cqw; background:var(--promo-blue); color:#fff;
  font-size:2.06cqw; font-weight:700; letter-spacing:.08em;
}
.promo-code.is-copied .promo-code__copy { background:#2f9e55; }
.welcome-note { font-size:13px; font-weight:700; letter-spacing:.02em; }
.promo-ticket h2 { top:6.5%; }
.promo-ticket h2 span:first-child { font-size:13.93cqw; }
.promo-ticket h2 span:last-child { font-size:10.84cqw; }
.promo-ticket p { top:65%; font-size:3.35cqw; margin-top: 5px;}
.promo-code { top:78%; }
.promo-code b { letter-spacing:.03em; }
.promo-spark--right { left:84%; top:44%; }

/* Promo code v2 — clean: label + one solid pill, copy icon turns into a tick */
.promo-code {
  gap:1.8cqw; padding:0; border:0; border-radius:0; background:none; top:78.5%;
}
.promo-code:hover { scale:1; background:none; }
.promo-code__label { font-size:3.35cqw; font-weight:600; letter-spacing:.012em; color:var(--promo-navy); }
.promo-code__pill {
  display:inline-flex; align-items:center; gap:1.4cqw; padding:1.2cqw 1.8cqw 1.2cqw 2.4cqw;
  border-radius:99px; background:#192c3c; color:#fff;
  transition:background .2s ease, translate .2s ease;
}
.promo-code b { font-size:3.96cqw; font-weight:700; letter-spacing:.06em; color:#fff; }
.promo-code__icon { width:3.4cqw; height:3.4cqw; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:.9; }
.promo-code__icon--done { display:none; stroke-width:3; }
.promo-code:hover .promo-code__pill { translate:0 -.3cqw; }
.promo-code.is-copied .promo-code__pill { background:#2f9e55; }
.promo-code.is-copied .promo-code__icon--copy { display:none; }
.promo-code.is-copied .promo-code__icon--done { display:block; }

/* 5 Oct: Sambal Jar + Pouch on the envelope (behind the side plates), each tagged "TikTok Shop & Shopee only"
   so it is clear they are not part of the 10% deal. */
.promo-sambal { position:absolute; inset:0; z-index:5; pointer-events:none; }
.promo-sambal__item { position:absolute; margin:0; display:flex; flex-direction:column; align-items:center; }
.promo-sambal__item img { display:block; width:100%; height:auto; filter:drop-shadow(0 .8cqw 1.1cqw rgba(4,18,32,.45)); }
.promo-sambal__item figcaption {
  margin-top:.9cqw; padding:.6cqw 1.4cqw; border-radius:99px; white-space:nowrap; text-align:center;
  background:#fff6e8; color:var(--promo-navy); box-shadow:0 .4cqw .9cqw rgba(4,18,32,.3);
  font-family:var(--promo-round); font-weight:600; font-size:max(8px, 1.95cqw); line-height:1.15; letter-spacing:.01em;
}
.promo-sambal__item--jar { left:9.4%; top:67.2%; width:14.6%; }
.promo-sambal__item--jar img { rotate:-6deg; }
.promo-sambal__item--pouch { right:10.6%; top:67.4%; width:11.2%; }
.promo-sambal__item--pouch img { rotate:7deg; }
#order-welcome[open] .promo-sambal__item { animation:promo-from-bottom .7s var(--ease-pop) 1.75s both; }
#order-welcome[open] .promo-sambal__item--pouch { animation-delay:1.85s; }

/* Close button: smaller and tucked into the corner, clear of the 10% seal */
.welcome-close { top:8px; right:8px; width:30px; height:30px; border-width:1.5px; }
.welcome-close svg { width:15px; height:15px; }

/* "Kod disalin!" bubble above the code pill */
.promo-code { overflow:visible; }
.promo-code__toast {
  position:absolute; left:auto; right:0; bottom:calc(100% + 1.6cqw); padding:1cqw 2cqw; border-radius:1.4cqw;
  background:#2f9e55; color:#fff; font-family:var(--promo-round); font-weight:700; font-size:max(10px, 2.8cqw); line-height:1; letter-spacing:.02em; white-space:nowrap;
  opacity:0; translate:0 1cqw; pointer-events:none; transition:opacity .18s ease, translate .18s ease;
}
.promo-code__toast::after { content:""; position:absolute; right:4cqw; top:100%; border:1.2cqw solid transparent; border-top-color:#2f9e55; border-bottom:0; }
.promo-code.is-copied .promo-code__toast { opacity:1; translate:0 0; }

/* Footer strip: validity first, then one short fine-print line */
#order-welcome { width:min(440px, calc(100% - 28px), calc((100dvh - 130px) * .8)); }
.welcome-note { padding:11px 22px 13px; }
.welcome-note__valid { margin:0; font-size:13px; font-weight:700; letter-spacing:.02em; }
.welcome-note__terms {
  margin:8px auto 0; padding:8px 0 0; max-width:36em;
  border-top:1px solid rgba(255,236,220,.28);
  font-size:10.5px; font-weight:500; line-height:1.5; letter-spacing:.01em; color:rgba(255,240,228,.86);
  text-wrap:pretty;
}
.welcome-note__terms .nowrap { white-space:nowrap; }

/* 5 Oct v4 (client mock): poster cropped at the envelope; "Sambal hanya di TikTok Shop & Shopee" line + CTA + validity below it */
.promo-frame { position:relative; overflow:hidden; aspect-ratio:1080 / 1205; }
.promo-sambal__item--jar { left:7.8%; top:67%; width:15%; }
.promo-sambal__item--pouch { right:8.4%; top:66.6%; width:12.4%; }
.welcome-close { top:10px; right:10px; width:34px; height:34px; border-width:2px; }
.welcome-close svg { width:16px; height:16px; }

.promo-foot {
  container-type:inline-size; display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:4px 16px 0; text-align:center;
}
.promo-shops {
  margin:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.3em;
  font-family:var(--promo-round); font-weight:600; font-size:max(10.5px, 3.5cqw); line-height:1.2; color:#fff6e8;
}
.promo-shops__brand { display:inline-flex; align-items:center; gap:.28em; white-space:nowrap; }
.promo-shops__brand b { font-weight:700; }
.promo-shops__icon { width:1.25em; height:1.25em; flex:none; color:#fff; }
.promo-foot .welcome-order-cta {
  position:relative; left:auto; top:auto; translate:none; height:auto; min-width:58%; padding:2.9cqw 6cqw;
  font-size:max(15px, 4.4cqw); margin-bottom:4px;
}
.welcome-note { padding:14px 22px 14px; }
.welcome-note__valid { font-size:15px; }
.welcome-note__terms { font-size:11px; }
#order-welcome { width:min(440px, calc(100% - 28px), calc((100dvh - 210px) * .9)); }
/* poster grid continues behind the footer */
#order-welcome { container-type:inline-size;
  background-image:linear-gradient(rgba(255,235,220,.085) 1px, transparent 1px), linear-gradient(90deg, rgba(255,235,220,.085) 1px, transparent 1px);
  background-size:4.63cqw 4.63cqw; background-position:-1px -1px; }
.welcome-note__terms { text-wrap:balance; }
/* Sequence: sambal products land first, then the "Sambal hanya di…" line, then the CTA and the fine print */
@keyframes promo-line-in { from { opacity:0; transform:translateY(60%); } }
#order-welcome[open] .promo-shops { animation:promo-line-in .45s var(--ease-out) 2.45s both; }
#order-welcome[open] .promo-foot .welcome-order-cta { animation:promo-cta-in .5s var(--ease-pop) 2.75s both; }
#order-welcome[open] .welcome-note { animation:promo-fade .4s ease 2.95s both; }
/* Sequence v2: sambal products → "Sambal hanya di…" line → the three plates → CTA → fine print */
#order-welcome[open] .promo-sambal__item { animation:promo-from-bottom .7s var(--ease-pop) 1.3s both; }
#order-welcome[open] .promo-sambal__item--pouch { animation-delay:1.4s; }
#order-welcome[open] .promo-shops { animation:promo-line-in .45s var(--ease-out) 1.95s both; }
#order-welcome[open] .promo-plate--left { animation:promo-from-left .75s var(--ease-pop) 2.45s both, promo-bob 3.4s ease-in-out 3.4s infinite; }
#order-welcome[open] .promo-plate--right { animation:promo-from-right .75s var(--ease-pop) 2.57s both, promo-bob 3.8s ease-in-out 3.7s infinite; }
#order-welcome[open] .promo-plate--bottom { animation:promo-from-bottom .75s var(--ease-pop) 2.7s both, promo-bob 3.6s ease-in-out 3.55s infinite; }
#order-welcome[open] .promo-foot .welcome-order-cta { animation:promo-cta-in .5s var(--ease-pop) 3.3s both; }
#order-welcome[open] .promo-foot .welcome-order-cta::before { animation:promo-shine 3.2s ease-in-out 4.2s infinite; }
#order-welcome[open] .welcome-note { animation:promo-fade .4s ease 3.5s both; }
/* Sequence v3: three plates → CTA → sambal products → "Sambal hanya di…" line → fine print */
#order-welcome[open] .promo-plate--left { animation:promo-from-left .75s var(--ease-pop) 1.35s both, promo-bob 3.4s ease-in-out 2.3s infinite; }
#order-welcome[open] .promo-plate--right { animation:promo-from-right .75s var(--ease-pop) 1.47s both, promo-bob 3.8s ease-in-out 2.6s infinite; }
#order-welcome[open] .promo-plate--bottom { animation:promo-from-bottom .75s var(--ease-pop) 1.6s both, promo-bob 3.6s ease-in-out 2.45s infinite; }
#order-welcome[open] .promo-foot .welcome-order-cta { animation:promo-cta-in .5s var(--ease-pop) 2.15s both; }
#order-welcome[open] .promo-foot .welcome-order-cta::before { animation:promo-shine 3.2s ease-in-out 3.9s infinite; }
#order-welcome[open] .promo-sambal__item { animation:promo-from-bottom .7s var(--ease-pop) 2.6s both; }
#order-welcome[open] .promo-sambal__item--pouch { animation-delay:2.7s; }
#order-welcome[open] .promo-shops { animation:promo-line-in .45s var(--ease-out) 3.25s both; }
#order-welcome[open] .welcome-note { animation:promo-fade .4s ease 3.65s both; }
/* Sequence v4: three plates → CTA → validity + fine print → sambal products → "Sambal hanya di…" line */
#order-welcome[open] .welcome-note { animation:promo-fade .4s ease 2.6s both; }
#order-welcome[open] .promo-sambal__item { animation:promo-from-bottom .7s var(--ease-pop) 3s both; }
#order-welcome[open] .promo-sambal__item--pouch { animation-delay:3.1s; }
#order-welcome[open] .promo-shops { animation:promo-line-in .45s var(--ease-out) 3.65s both; }
/* Sambal sits lower, fully clear of the side-plate arms (bottom edge just above the envelope's edge) */
.promo-sambal__item--jar { top:71.6%; left:8.6%; width:14.6%; }
.promo-sambal__item--pouch { top:71%; right:9%; width:12%; }
/* Fine print: two balanced lines, broken after the comma, at a readable 11px */
.welcome-note { padding-left:16px; padding-right:16px; }
.welcome-note__terms { max-width:none; white-space:normal; letter-spacing:0; font-size:11px; line-height:1.55; }

/* 5 Oct (client poster): sambal held up by hands from the bottom corners — pouch bottom-left, jar bottom-right,
   in front of the plates; the hands run off the bottom of the cropped poster */
.promo-sambal { z-index:8; }
.promo-sambal__item img { rotate:none !important; filter:drop-shadow(0 1cqw 1.4cqw rgba(4,18,32,.35)); }
.promo-sambal__item--pouch { left:0; right:auto; top:var(--pouch-top, 57%); width:var(--pouch-w, 33%); }
.promo-sambal__item--jar { right:0; left:auto; top:var(--jar-top, 64%); width:var(--jar-w, 39%); }
/* layering like the poster: side plates < sambal hands < centre plate */
.promo-food { z-index:auto; }
.promo-plate--left, .promo-plate--right { z-index:7; }
.promo-plate--bottom { z-index:9; }
.promo-sambal { --pouch-top:61.5%; --pouch-w:32%; --jar-top:66.5%; --jar-w:38%; }
/* lower, like the poster: hands rise from the bottom edge, products sit at the foot of the plates */
.promo-sambal { --pouch-top:67%; --pouch-w:31%; --jar-top:72%; --jar-w:36%; }
/* show a strip of red below the envelope (like the poster) so the hands holding the sambal stay visible */
.promo-frame { aspect-ratio:1080 / 1290; }
.promo-sambal { --pouch-top:66%; --pouch-w:33%; --jar-top:71%; --jar-w:38%; }
#order-welcome { width:min(440px, calc(100% - 28px), calc((100dvh - 210px) * .84)); }
/* 5 Oct — exact poster placement. Poster→stage mapping measured from the plates: stage ≈ 0.99·poster + (6, −194) px.
   Pouch: poster (0,1161) 404w → stage left 0, top 70.7%, 37% wide.  Jar: poster (600,1275) 480w → stage right 0, top 79.1%, 44% wide.
   Both hands enter from the side edges; the poster is shown down to where its blue footer band starts (≈1490/1350 of the stage). */
.promo-frame { aspect-ratio:1080 / 1460; }
.promo-stage { overflow:visible; }
.promo-sambal { z-index:10; --pouch-top:70.7%; --pouch-w:37%; --jar-top:79.1%; --jar-w:44%; }
.promo-sambal__item--pouch { left:0; }
.promo-sambal__item--jar { right:0; }
.promo-plate--bottom { z-index:9; }
#order-welcome { width:min(440px, calc(100% - 28px), calc((100dvh - 215px) * .74)); }
/* centre plate's forearm continues down past the envelope (from the poster), behind the plate */
.promo-arm { position:absolute; z-index:8; left:34.4%; top:68.9%; width:22.9%; height:auto; }
#order-welcome[open] .promo-arm { animation:promo-from-bottom .75s var(--ease-pop) 1.6s both; }
.promo-sambal { --jar-w:41.6%; }
/* Hands enter from the side edges (no flat cut at the bottom): pouch hand tilted in from the left, jar hand from the right */
.promo-sambal { --pouch-top:64%; --jar-top:76%; }
.promo-sambal__item--pouch { left:-3%; }
.promo-sambal__item--pouch img { rotate:18deg !important; transform-origin:0 100%; }
.promo-sambal__item--jar img { rotate:-12deg !important; transform-origin:100% 100%; }
/* hand images now carry extra forearm beyond their old edges (so no cut edge shows after tilting);
   sizes/offsets keep the visible hand exactly where it was */
.promo-sambal__item--pouch { width:53.5%; left:-19.5%; }
.promo-sambal__item--pouch img { transform-origin:30.8% 81.1%; }
.promo-sambal__item--jar { width:58.1%; right:-16.5%; }
.promo-sambal__item--jar img { transform-origin:71.6% 77.4%; }
/* centre plate image now includes a longer forearm (1000×1450 instead of 1000×1250): same placement, rescaled offsets */
.promo-plate--bottom { height:116%; transform-origin:51.6% 57.59%; translate:-1.6% -5.517%; }

/* 5 Oct v-final: hands come up out of the footer grid like the poster — poster placement, no tilt;
   forearms run down behind "Sambal hanya di…" and fade out into the grid. */
.promo-frame { overflow:visible; position:relative; z-index:1; }
.promo-foot { position:relative; z-index:2; }
.promo-sambal__item--pouch { left:0; top:70.7%; width:37%; }
.promo-sambal__item--jar { right:0; top:79.1%; width:41.6%; }
.promo-sambal__item--pouch img, .promo-sambal__item--jar img { rotate:none !important; }
.promo-sambal__item--pouch img { -webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 93%); mask-image:linear-gradient(to bottom,#000 76%,transparent 93%); }
.promo-sambal__item--jar img { -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 90%); mask-image:linear-gradient(to bottom,#000 70%,transparent 90%); }
.promo-plate--bottom { height:141.6%; transform-origin:51.6% 47.18%; translate:-1.6% -4.52%;
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 90%); mask-image:linear-gradient(to bottom,#000 74%,transparent 90%); }

/* 5 Oct — client's clean cut-outs (hand + product). Placement measured against the poster
   (poster→stage: x·0.99+6, y·0.99−194 on a 1080×1350 stage). Forearms run on into the grid under the
   poster and fade out behind "Sambal hanya di…". */
#order-welcome .promo-sambal__item { margin:0; }
#order-welcome .promo-sambal__item img { rotate:none !important; transform:none; }
#order-welcome .promo-sambal__item--pouch { left:-12.52%; right:auto; top:70.05%; width:48.08%; }
#order-welcome .promo-sambal__item--jar { left:62.14%; right:auto; top:76.22%; width:61.84%; rotate:7.9deg; transform-origin:0 0; }
#order-welcome .promo-sambal__item--pouch img { -webkit-mask-image:linear-gradient(to bottom,#000 56%,transparent 74%); mask-image:linear-gradient(to bottom,#000 56%,transparent 74%); }
#order-welcome .promo-sambal__item--jar img { -webkit-mask-image:linear-gradient(to bottom,#000 56%,transparent 77%); mask-image:linear-gradient(to bottom,#000 56%,transparent 77%); }
#order-welcome .promo-plate--bottom {
  inset:auto; left:23.96%; top:45.16%; width:51.29%; height:auto;
  translate:none; scale:none; transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to bottom,#000 69%,transparent 86%); mask-image:linear-gradient(to bottom,#000 69%,transparent 86%);
}
/* centre plate: client's original image as-is (no extended arm, no fade) */
#order-welcome .promo-plate--bottom { -webkit-mask-image:none; mask-image:none; }