/* Animações da app (ver anim-config.js para as durações e cores, que chegam aqui como --a-* e --ease-*).
   Só se anima transform e opacity. Com "menos movimento" (prefers-reduced-motion) ficam fades simples. */
:root {
  --fx-pink: #ff2d7a; --fx-night: #1a0f35; --fx-violet: #8b5cf6; --fx-gold: #ffc53d;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.fx-lock { overflow: hidden; }
.fx-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5000; }

/* ---------- Botões: encolhem ao carregar e voltam com mola ---------- */
.btn, .joke-fab, .flip-card, .qty button { transition: transform var(--a-press, 180ms) var(--ease-spring); }
.btn:active:not(:disabled), .qty button:active { transform: scale(0.96); transition-duration: 90ms; }

/* ---------- Caixa Surpresa ---------- */
.chest-fx { position: fixed; inset: 0; z-index: 4500; display: grid; grid-template-rows: auto auto auto auto; align-content: space-evenly; justify-items: center; align-items: center;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); color: #fff; text-align: center; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 45%, #2b1a55 0%, var(--fx-night) 60%, #0d0720 100%); opacity: 0; transition: opacity 0.25s ease; cursor: pointer; }
.chest-fx.in { opacity: 1; }
.chest-fx.out { opacity: 0; }
.cfx-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px; border-radius: 12px; border: 0; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; z-index: 5; }
.cfx-close .i { width: 20px; height: 20px; }
.cfx-rarity { grid-row: 1; margin-top: 8px; padding: 5px 12px; border-radius: 8px; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--c-body) 30%, transparent); border: 1px solid color-mix(in srgb, var(--c-trim) 60%, transparent); opacity: 0; transform: translateY(-8px);
  transition: opacity 0.3s 0.4s, transform 0.3s 0.4s var(--ease-spring); }
.chest-fx.in .cfx-rarity { opacity: 1; transform: none; }
.cfx-stage { grid-row: 2; position: relative; width: min(78vw, 300px); aspect-ratio: 1; display: grid; place-items: end center; }
.cfx-box { position: relative; width: 74%; margin-bottom: 8%; z-index: 2; transform-origin: 50% 100%;
  animation: cfx-drop var(--a-chestDrop, 650ms) cubic-bezier(0.3, 1.35, 0.55, 1) both; }
.cfx-squash { transform-origin: 50% 100%; }
.cfx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cfx-svg .cb { fill: var(--c-body); }
.cfx-svg .cd { fill: var(--c-dark); }
.cfx-svg .ct { fill: var(--c-trim); }
.cfx-svg .cfx-outline { fill: none; stroke: var(--c-dark); stroke-width: 3; }
.cfx-svg .cfx-shine { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; opacity: 0.35; }
.cfx-ff { font: italic 800 22px Metropolis, system-ui, sans-serif; fill: var(--c-body); }
.cfx-seam { fill: var(--c-glow); opacity: 0.25; }
.cfx-lid { transform-box: view-box; transform-origin: 100px 92px; }
.cfx-shadow { position: absolute; left: 50%; bottom: 5%; width: 64%; height: 9%; margin-left: -32%; border-radius: 50%; background: rgba(0, 0, 0, 0.45); filter: blur(4px);
  animation: cfx-shadow var(--a-chestDrop, 650ms) cubic-bezier(0.3, 1.35, 0.55, 1) both; }
.cfx-halo { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, var(--c-glow) 0%, transparent 62%); opacity: 0; transform: scale(0.5); z-index: 1; }
.cfx-rays { position: absolute; inset: -30%; z-index: 0; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c-glow) 55%, transparent) 0deg 9deg, transparent 9deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%); mask-image: radial-gradient(circle, #000 18%, transparent 62%); }
.cfx-flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(circle at 50% 50%, #fff 0%, color-mix(in srgb, var(--c-glow) 70%, transparent) 35%, transparent 70%); opacity: 0; }
.cfx-hint { grid-row: 3; margin: 6px 0 0; font-weight: 800; font-size: 1.15rem; opacity: 0; }
.cfx-result { grid-row: 4; min-height: 150px; display: grid; align-content: start; justify-items: center; gap: 6px; max-width: 360px; cursor: default; }
.cfx-result h2 { margin: 0; font: italic 800 1.7rem/1.15 Metropolis, system-ui, sans-serif; overflow-wrap: anywhere; animation: cfx-up 0.4s var(--ease-spring) both; }
.cfx-result p { margin: 0; opacity: 0.85; font-weight: 600; animation: cfx-up 0.4s 0.08s var(--ease-spring) both; }
.cfx-save { margin-top: 10px; min-width: 200px; animation: cfx-up 0.4s 0.16s var(--ease-spring) both; }

/* Prémio: um azulejo branco com a foto inteira (sem cortes) ou o texto grande. */
.cfx-prize { position: absolute; left: 50%; top: 0; width: 50%; margin-left: -25%; z-index: 3; opacity: 0; pointer-events: none; }
.cfx-prize-img { display: block; aspect-ratio: 1; padding: 4%; border-radius: 22%; overflow: hidden; background: #0e0e11; box-shadow: 0 0 0 4px var(--c-trim), 0 0 40px 8px var(--c-glow); }
.cfx-prize-img img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 16%; }
.cfx-prize-big { display: grid; place-items: center; aspect-ratio: 1; padding: 8px; border-radius: 22%; background: #fff; color: var(--fx-night); font: italic 800 1.4rem/1.1 Metropolis, system-ui, sans-serif;
  box-shadow: 0 0 0 4px var(--c-trim), 0 0 40px 8px var(--c-glow); }

/* b) À espera do toque: treme 3 vezes a cada 2,2 s e as frestas brilham. */
.chest-fx.ready .cfx-box { animation: cfx-idle 2.2s ease-in-out infinite; }
.chest-fx.ready .cfx-seam { animation: cfx-seam 1.1s ease-in-out infinite alternate; }
.chest-fx.ready .cfx-hint { opacity: 1; animation: cfx-hint 1.1s ease-in-out infinite alternate; }
/* c) Toque: encolhe e salta (squash & stretch). */
.chest-fx.opening .cfx-box { animation: none; }
.chest-fx.opening .cfx-squash { animation: cfx-squash var(--a-chestSquash, 240ms) var(--ease-out) both; }
.chest-fx.opening .cfx-seam { opacity: 1; }
/* Lendária: a tampa espreita (sai luz) e volta a fechar, com a caixa a tremer. */
.chest-fx.tease .cfx-lid { animation: cfx-tease var(--a-legendarySuspense, 900ms) ease-in-out both; }
.chest-fx.tease .cfx-squash { animation: cfx-rumble 0.12s linear infinite; }
.chest-fx.tease .cfx-halo { animation: cfx-halo-tease var(--a-legendarySuspense, 900ms) ease-in-out both; }
/* Tampa abre com clarão; raios a rodar atrás. */
.chest-fx.open .cfx-lid { animation: cfx-lid var(--a-chestOpen, 380ms) cubic-bezier(0.2, 1.2, 0.4, 1) forwards; }
.chest-fx.open .cfx-flash { animation: cfx-flash 0.55s ease-out both; }
.chest-fx.open .cfx-halo { opacity: 0.9; transform: scale(1); transition: opacity 0.4s, transform 0.5s var(--ease-spring); }
.chest-fx.open .cfx-hint { opacity: 0; animation: none; }
.chest-fx.r-rara.open .cfx-rays, .chest-fx.r-epica.open .cfx-rays, .chest-fx.r-lendaria.open .cfx-rays { animation: cfx-rays-in 0.5s ease-out forwards, cfx-spin 14s linear infinite; }
.chest-fx.shake .cfx-stage { animation: cfx-screen 0.42s linear both; }
/* d) O prémio sobe da caixa a rodar e pára ao centro. */
.chest-fx.reveal .cfx-prize { animation: cfx-rise var(--a-chestReveal, 700ms) var(--ease-spring) forwards; }
.chest-fx.done .cfx-prize { opacity: 1; transform: translateY(-6%); animation: cfx-float 2.6s ease-in-out infinite; }
.chest-fx.done { cursor: default; }
/* Saltar (toque durante a sequência): tudo no estado final. */
.chest-fx.skip .cfx-lid { animation-duration: 1ms; }
.chest-fx.skip .cfx-prize { animation-duration: 1ms; }

/* Raridades: mesma estrutura, intensidade crescente. */
.chest-fx.r-comum .cfx-rays { display: none; }
.chest-fx.r-lendaria { background: radial-gradient(120% 80% at 50% 45%, #2a0c25 0%, #0b0613 65%, #000 100%); }
.chest-fx.r-lendaria .cfx-svg .ct { filter: drop-shadow(0 0 4px var(--fx-pink)); }
.chest-fx.r-lendaria .cfx-svg .cfx-outline { stroke: var(--fx-pink); stroke-width: 2.5; }
.chest-fx.r-lendaria .cfx-ff { fill: #15101f; }
.chest-fx.r-epica .cfx-ff { fill: #8a5a00; }

@keyframes cfx-drop { 0% { transform: translateY(-120vh) scale(0.9, 1.1); } 62% { transform: translateY(0) scale(1.12, 0.86); } 80% { transform: translateY(-14px) scale(0.97, 1.04); } 100% { transform: none; } }
@keyframes cfx-shadow { 0% { opacity: 0; transform: scale(0.2); } 62% { opacity: 1; transform: scale(1.1); } 80% { transform: scale(0.92); } 100% { opacity: 1; transform: none; } }
@keyframes cfx-idle {
  0%, 62%, 100% { transform: none; }
  66% { transform: rotate(-4deg) translateX(-2px); } 70% { transform: rotate(4deg) translateX(2px); }
  74% { transform: rotate(-3deg); } 78% { transform: rotate(3deg); } 82% { transform: rotate(-1.5deg); } 86% { transform: none; } }
@keyframes cfx-seam { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes cfx-hint { from { opacity: 0.55; transform: scale(0.98); } to { opacity: 1; transform: scale(1.03); } }
@keyframes cfx-squash { 0% { transform: none; } 45% { transform: scale(1.14, 0.8); } 75% { transform: scale(0.9, 1.14) translateY(-16px); } 100% { transform: translateY(-6px); } }
@keyframes cfx-rumble { 0% { transform: translate(-2px, -6px) rotate(-1deg); } 50% { transform: translate(2px, -6px) rotate(1deg); } 100% { transform: translate(-2px, -6px) rotate(-1deg); } }
@keyframes cfx-tease { 0%, 100% { transform: none; } 30%, 55% { transform: translateY(-12px) rotate(-4deg); } 70% { transform: translateY(2px); } 80% { transform: none; } }
@keyframes cfx-halo-tease { 0%, 100% { opacity: 0; transform: scale(0.5); } 40% { opacity: 0.8; transform: scale(0.85); } 75% { opacity: 0.2; } }
@keyframes cfx-lid { 0% { transform: none; } 55% { transform: translateY(-62px) rotate(-18deg); opacity: 1; } 100% { transform: translate(-30px, -48px) rotate(-38deg); opacity: 0; } }
@keyframes cfx-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cfx-rays-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes cfx-spin { to { rotate: 360deg; } }
@keyframes cfx-screen { 0%, 100% { transform: none; } 15% { transform: translate(-6px, 3px); } 30% { transform: translate(5px, -4px); } 45% { transform: translate(-4px, -2px); } 60% { transform: translate(3px, 3px); } 80% { transform: translate(-2px, 1px); } }
@keyframes cfx-rise { 0% { opacity: 0; transform: translateY(95%) scale(0.3) rotate(-30deg); } 55% { opacity: 1; transform: translateY(-14%) scale(1.1) rotate(10deg); } 100% { opacity: 1; transform: translateY(-6%) rotate(0); } }
@keyframes cfx-float { 0%, 100% { transform: translateY(-6%) rotate(0); } 50% { transform: translateY(-10%) rotate(1.5deg); } }
@keyframes cfx-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Cartão a virar (brinde) ---------- */
.flip-card { display: block; width: min(76vw, 280px); aspect-ratio: 1.58; margin: 0 auto; padding: 0; border: 0; background: none; perspective: 900px; cursor: pointer; color: inherit; font: inherit; }
.flip-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform var(--a-flip, 650ms) var(--ease-spring); animation: flip-float 3s ease-in-out infinite; }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); animation: none; }
.flip-face { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 14px 34px rgba(26, 15, 53, 0.35); }
.flip-back { background: var(--fx-night); color: #fff; border: 2px solid var(--fx-pink);
  background-image: repeating-linear-gradient(45deg, rgba(255, 45, 122, 0.12) 0 10px, transparent 10px 20px); }
.flip-back-logo { font: 800 1.3rem Metropolis, system-ui, sans-serif; } .flip-back-logo b { color: var(--fx-pink); } .flip-back-logo i { color: var(--fx-gold); }
.flip-back-hint { font-size: 0.8rem; opacity: 0.75; font-weight: 600; }
.flip-front { transform: rotateY(180deg); background: var(--fx-pink); color: #fff; padding: 12px; text-align: center; }
.flip-front strong { font: italic 800 2.4rem/1 Metropolis, system-ui, sans-serif; }
.flip-front span { font-weight: 700; }
.flip-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%); transform: translateX(-120%); }
.flip-card.flipped .flip-shine { animation: flip-shine 0.9s 0.45s var(--ease-out) both; }
@keyframes flip-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes flip-shine { to { transform: translateX(120%); } }

/* ---------- FF Pass: barra, selos e mota a carimbar ---------- */
.pass-bar { position: relative; height: 8px; margin: 12px 0 2px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.pass-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--fx-pink), #ff6aa3); transform-origin: 0 50%;
  transform: scaleX(var(--to, 0)); animation: pass-fill var(--a-passFill, 900ms) 0.2s var(--ease-out) both; }
@keyframes pass-fill { from { transform: scaleX(var(--from, 0)); } to { transform: scaleX(var(--to, 0)); } }
.pass-bar.glow::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); transform: translateX(-100%); animation: pass-glow 0.9s ease-out; }
@keyframes pass-glow { to { transform: translateX(100%); } }
.stamps .stamp { position: relative; overflow: visible; }
.stamps .stamp.stamp-new { animation: stamp-in var(--a-stamp, 520ms) var(--d, 0ms) var(--ease-spring) both; }
@keyframes stamp-in { 0% { transform: scale(1); background: var(--surface-2); color: var(--muted); } 40% { transform: scale(1.5) rotate(-12deg); } 100% { transform: none; } }
.stamp-ride { position: absolute; left: 50%; top: 50%; width: 40px; margin: -14px 0 0 -20px; pointer-events: none; z-index: 2; opacity: 0;
  animation: stamp-ride var(--a-stamp, 520ms) var(--d, 0ms) cubic-bezier(0.4, 0, 0.6, 1) both; }
.stamp-ride .scooter { width: 100%; height: auto; display: block; }
.stamp-ride .sc-w { fill: var(--fx-pink); } .stamp-ride .sc-a { fill: #fff; } .stamp-ride .sc-s { stroke: #fff; } .stamp-ride .sc-l { fill: var(--fx-pink); opacity: 0.5; }
@keyframes stamp-ride { 0% { opacity: 0; transform: translateX(-60px); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(60px); } }
.stamps .stamp.stamp-milestone { animation: stamp-milestone 0.7s var(--ease-spring) both; box-shadow: 0 0 0 4px rgba(255, 197, 61, 0.5), 0 0 18px rgba(255, 197, 61, 0.9); }
@keyframes stamp-milestone { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---------- Produto a voar para o carrinho ---------- */
.fly-x { position: fixed; z-index: 4800; pointer-events: none; }
.fly-y { width: 100%; height: 100%; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); display: grid; place-items: center; color: var(--fx-pink); }
.fly-y img { width: 100%; height: 100%; object-fit: contain; }
#cart-link.cart-bump { animation: cart-bump var(--a-micro, 240ms) var(--ease-spring); }
#cart-link.cart-bump #cart-count { animation: cart-count 0.35s var(--ease-spring); }
@keyframes cart-bump { 0% { transform: none; } 40% { transform: translateY(-5px) scale(1.12); } 100% { transform: none; } }
@keyframes cart-count { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* ---------- Avisos (toasts): entram por cima com um saltinho ---------- */
.toast { top: calc(66px + env(safe-area-inset-top)); bottom: auto !important; transform: translate(-50%, -140%) !important; opacity: 0;
  transition: transform 0.38s var(--ease-spring), opacity 0.2s ease !important; }
.toast.show { transform: translate(-50%, 0) !important; opacity: 1; }
/* Aviso de "não dá": escuro, com cadeado rosa (sem vermelho de erro: não é um erro, é só "ainda não"). */
.toast.blocked { width: max-content; max-width: min(380px, calc(100% - 32px)); background: #101629; color: #fff; display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; line-height: 1.35; }
.toast.blocked::before { content: ''; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #ff2878 center / 16px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }

/* ---------- Carrinho vazio: mota parada a dormir ---------- */
.empty-scooter { position: relative; width: 150px; margin: 0 auto 6px; }
.empty-scooter .scooter { width: 100%; height: auto; display: block; }
.empty-scooter .sc-w { fill: var(--fx-pink); } .empty-scooter .sc-a { fill: var(--surface); } .empty-scooter .sc-s { stroke: var(--surface); } .empty-scooter .sc-lines { display: none; }
.empty-scooter .zzz { position: absolute; right: 2px; top: -8px; font: italic 800 1rem Metropolis, system-ui, sans-serif; color: var(--fx-violet); }
.empty-scooter .zzz span { position: absolute; opacity: 0; animation: zzz 2.4s ease-out infinite; }
.empty-scooter .zzz span:nth-child(2) { animation-delay: 0.8s; font-size: 0.85em; }
.empty-scooter .zzz span:nth-child(3) { animation-delay: 1.6s; font-size: 0.7em; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(18px, -34px) scale(1.2); } }
.empty-scooter .scooter { animation: empty-breathe 3s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes empty-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.01, 0.985); } }

/* ---------- Piadas: o FF ri-se ---------- */
/* Roda o botão inteiro (foto, aro e sombra juntos), para a sombra acompanhar o FF. */
.joke-fab.laugh { animation: fab-laugh 0.6s ease-in-out; }
@keyframes fab-laugh { 0%, 100% { transform: none; } 20% { transform: rotate(-10deg) scale(1.05); } 40% { transform: rotate(9deg); } 60% { transform: rotate(-6deg) scale(1.03); } 80% { transform: rotate(4deg); } }
.joke-msg.assistant:not(.typing) { animation: msg-in 0.28s var(--ease-spring) both; transform-origin: 0 100%; }
.joke-msg.user { animation: msg-in 0.22s var(--ease-spring) both; transform-origin: 100% 100%; }
@keyframes msg-in { from { opacity: 0; transform: scale(0.85) translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Puxar para atualizar ---------- */
.ptr { position: fixed; left: 0; right: 0; top: 0; height: 64px; z-index: 900; pointer-events: none; display: grid; place-items: center;
  opacity: 0; transform: translateY(calc(-64px + var(--p, 0) * 70px)); }
.ptr.pulling, .ptr.go { opacity: 1; }
.ptr-spin { width: 40px; height: 40px; border-radius: 50%; background: var(--surface, #fff); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  display: grid; place-items: center; rotate: calc(var(--p, 0) * 270deg); }
.ptr-spin svg { width: 24px; height: 24px; display: block; }
.ptr-spin circle { fill: none; stroke: var(--fx-pink); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: calc(var(--p, 0) * 42px) 57px; transform-origin: center; }
.ptr.ready .ptr-spin circle { stroke-dasharray: 42px 57px; }
.ptr.go .ptr-spin { animation: ptr-spin 0.8s linear infinite; }
@keyframes ptr-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- Seguimento do pedido ---------- */
/* Mota no mapa: inclina-se nas curvas, vira-se para onde vai e mostra riscos de velocidade quando anda. */
.map-pin.courier span { transition: transform 0.4s var(--ease-out); transform: rotate(var(--tilt, 0deg)) scaleX(var(--dir, 1)); }
.map-pin.courier::before { content: ''; position: absolute; top: 12px; right: 100%; width: 16px; height: 12px; margin-right: -4px; opacity: 0; transition: opacity 0.2s;
  background: repeating-linear-gradient(180deg, var(--fx-pink) 0 2px, transparent 2px 5px); border-radius: 2px; transform: scaleX(var(--dir, 1)); }
.map-pin.courier.west::before { right: auto; left: 100%; margin: 0 0 0 -4px; }
.map-pin.courier.moving::before { opacity: 0.7; animation: speed-lines 0.35s linear infinite; }
@keyframes speed-lines { 0% { translate: 4px 0; } 100% { translate: -4px 0; } }
.map-pin.courier.braking span { animation: brake 0.5s var(--ease-spring); }
@keyframes brake { 0% { transform: none; } 35% { transform: rotate(-10deg) translateX(4px); } 70% { transform: rotate(4deg); } 100% { transform: none; } }
/* Estado que acabou de mudar: entra com um saltinho. */
.status-change { animation: status-in var(--a-transition, 400ms) var(--ease-spring) both; }
@keyframes status-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ---------- Pedidos de grupo ---------- */
.pop-in { animation: pop-in var(--a-micro, 240ms) var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes pop-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
.group-paybar { position: relative; height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin: 8px 0 4px; }
.group-paybar > i { position: absolute; inset: 0; background: var(--ok, #16a34a); transform-origin: 0 50%; transform: scaleX(var(--to, 0)); animation: pass-fill 0.7s var(--ease-out) both; }
.group-closed { margin: 8px 0 0; font: italic 800 1.15rem Metropolis, system-ui, sans-serif; color: var(--fx-pink); animation: pop-in 0.45s var(--ease-spring) both; }

/* ---------- Ranking ---------- */
.rank-crown { display: inline-grid; color: var(--fx-gold); transform-origin: 50% 90%; animation: crown-swing 2.4s ease-in-out infinite; vertical-align: -3px; margin-right: 2px; }
.rank-crown .i { width: 20px; height: 20px; fill: rgba(255, 197, 61, 0.35); stroke-width: 2.2; filter: drop-shadow(0 0 4px rgba(255, 197, 61, 0.7)); }
@keyframes crown-swing { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.rank-up { animation: rank-up 2.4s ease-out 0.6s both; }
@keyframes rank-up { 0%, 60% { background-color: rgba(255, 45, 122, 0.18); } 100% { background-color: transparent; } }
.rank-arrow { display: inline-block; color: var(--fx-pink); font-weight: 800; margin-left: 4px; animation: rank-arrow 0.9s var(--ease-spring) 0.6s both; }
@keyframes rank-arrow { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Raspadinha ---------- */
.scratch-area { position: relative; }
.scratch-dust { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.scratch-result.win { animation: cfx-up 0.45s var(--ease-spring) both; }
.scratch-grid.win span { animation: scratch-win 0.6s var(--ease-spring) both; }
@keyframes scratch-win { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
.scratch-area.win { box-shadow: 0 0 0 3px var(--fx-gold), 0 0 24px rgba(255, 197, 61, 0.6); }

/* ---------- Página de demonstração ---------- */
.demo-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.demo-grid .card { display: grid; gap: 8px; align-content: start; }
.demo-grid .row-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-switch { display: flex; align-items: center; gap: 10px; font-weight: 600; }

/* ---------- Menos movimento: só fades ---------- */
@media (prefers-reduced-motion: reduce) {
  .chest-fx *, .flip-inner, .flip-shine, .pass-fill, .stamp-new, .stamp-ride, .rank-crown, .rank-up, .rank-arrow, .pop-in, .group-closed, .empty-scooter *, .ptr *, .status-change,
  .map-pin.courier span, .map-pin.courier::before, #cart-link, #cart-link *, .joke-fab, .joke-fab img, .joke-msg, .scratch-grid span, .scratch-result { animation: none !important; }
  .stamp-ride { display: none; }
  .pass-fill { transform: scaleX(var(--to, 0)); }
  .chest-fx.done .cfx-prize, .chest-fx.reveal .cfx-prize { opacity: 1; transform: none; transition: opacity 0.3s; }
  .chest-fx.open .cfx-lid { opacity: 0; transition: opacity 0.3s; }
  .flip-inner { transition: none; }
  .flip-card.flipped .flip-back { opacity: 0; transition: opacity 0.3s; }
  .toast { transform: translate(-50%, 0) !important; transition: opacity 0.25s !important; }
  .btn:active:not(:disabled) { transform: none; }
}
.festa .festa-flip { width: min(70vw, 240px); margin: 6px auto 4px; }
html.ptr-on, html.ptr-on body { overscroll-behavior-y: contain; }

/* ---------- Seguimento do pedido: percurso, estados e celebração ----------
   O percurso mostra em que passo o pedido está (o estado real); a mota avança de paragem em paragem quando o
   estado muda. A posição verdadeira do estafeta continua só no mapa. */
.journey { position: relative; width: min(100%, 360px); height: 46px; margin: 14px auto 2px; --stop: 12px; }
.jr-track { position: absolute; left: 6px; right: 6px; bottom: 9px; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.jr-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--fx-violet), var(--fx-pink)); transition: transform 1.1s var(--ease-out); }
.jr-stop { position: absolute; bottom: 5px; left: calc(6px + var(--x) * (100% - 12px)); width: var(--stop); height: var(--stop); margin-left: calc(var(--stop) / -2); border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border); transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease-spring); }
.jr-stop.on { background: var(--fx-pink); border-color: var(--fx-pink); }
.jr-stop.now { transform: scale(1.25); box-shadow: 0 0 0 4px rgba(255, 45, 122, 0.18); }
.jr-end { position: absolute; right: -4px; bottom: 18px; color: var(--muted); }
.jr-end .i { width: 18px; height: 18px; }
.journey.arrived .jr-end { color: var(--fx-pink); }
.jr-ride { position: absolute; left: 6px; bottom: 13px; width: 46px; margin-left: -23px; color: var(--fx-pink); --sc-accent: var(--surface); transition: transform 1.1s cubic-bezier(0.45, 0, 0.2, 1); will-change: transform; }
.jr-ride.bag { width: 26px; margin-left: -13px; bottom: 16px; }
.jr-ride.bag .i { width: 26px; height: 26px; display: block; }
.journey.no-anim .jr-ride, .journey.no-anim .jr-fill { transition: none; }
.jr-ride .sc-lines { opacity: 0; transition: opacity 0.3s; }
.jr-ride .sc-wheel { animation-play-state: paused; }
.journey.moving .jr-ride .sc-wheel, .journey.riding .jr-ride .sc-wheel { animation-play-state: running; }
.journey.moving .jr-ride .sc-lines, .journey.riding .jr-ride .sc-lines { opacity: 1; }
.journey.riding .jr-ride .scooter { animation: sc-bump 0.36s ease-in-out infinite alternate; }
.journey.moving .jr-ride .scooter { animation: jr-lean 1.1s ease-in-out; }
@keyframes jr-lean { 0% { transform: none; } 20% { transform: rotate(-5deg) translateY(-2px); } 80% { transform: rotate(-2deg); } 92% { transform: rotate(3deg); } 100% { transform: none; } }

/* Ícone do estado: cada passo tem um gesto próprio (curto, ou subtil se ficar a repetir). */
.track-head .big { position: relative; }
.track-head .big.status-preparacao .i { animation: tk-stir 2.4s ease-in-out infinite; transform-origin: 50% 80%; }
.track-head .big.status-preparacao::before, .track-head .big.status-preparacao::after { content: ''; position: absolute; top: 4px; width: 4px; height: 12px; border-radius: 4px;
  background: currentColor; opacity: 0; animation: tk-steam 2.4s ease-out infinite; }
.track-head .big.status-preparacao::before { left: 22px; } .track-head .big.status-preparacao::after { left: 38px; animation-delay: 1.2s; }
@keyframes tk-steam { 0% { opacity: 0; transform: translateY(6px) scaleY(0.6); } 30% { opacity: 0.45; } 100% { opacity: 0; transform: translateY(-16px) scaleY(1.2); } }
@keyframes tk-stir { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.track-head .big.status-a_caminho .i { animation: sc-bump 0.36s ease-in-out infinite alternate; }
.track-head .big.status-a_caminho::before { content: ''; position: absolute; left: 6px; top: 26px; width: 12px; height: 12px; opacity: 0.6;
  background: repeating-linear-gradient(180deg, currentColor 0 2px, transparent 2px 5px); animation: speed-lines 0.35s linear infinite; }
.track-head .big.status-aguarda_pagamento::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255, 45, 122, 0.35); animation: tk-ring 1.8s ease-out infinite; }
@keyframes tk-ring { to { box-shadow: 0 0 0 14px rgba(255, 45, 122, 0); } }
.track-head .big.status-pronto .i, .track-head .big.status-entregue .i { animation: tk-pop 0.6s var(--ease-spring) both; }
@keyframes tk-pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Linha do tempo: as bolas ligam-se por uma linha que fica verde até ao passo atual. */
.timeline li { position: relative; }
.timeline li:not(:last-child)::after { content: ''; position: absolute; left: 13px; top: calc(50% + 14px); height: calc(100% - 28px); width: 2px; border-radius: 2px; background: var(--surface-2); }
.timeline li.done:not(:last-child)::after { background: var(--ok); }
.timeline li.done .dot { animation: tk-pop 0.4s var(--ease-spring) both; }

/* Celebração do pedido: selo com o visto a desenhar-se. */
.festa-check { display: block; width: 58px; height: 58px; margin-top: -26px; z-index: 1; border-radius: 50%; background: var(--fx-pink); box-shadow: 0 0 0 5px rgba(255, 197, 61, 0.9), 0 10px 30px rgba(255, 45, 122, 0.45);
  animation: festa-pop 0.45s var(--ease-spring) 0.75s both; }
.festa-check svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.festa-check circle { stroke: none; }
.festa-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: festa-tick 0.45s var(--ease-out) 1s forwards; }
@keyframes festa-tick { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .jr-ride, .jr-fill, .jr-stop { transition: none !important; }
  .journey *, .track-head .big *, .track-head .big::before, .track-head .big::after, .timeline li .dot, .festa-check, .festa-check path { animation: none !important; }
  .festa-check path { stroke-dashoffset: 0; }
}

/* ---------- Raspadinha: cartão prateado/holográfico com profundidade ---------- */
.scratch-area { transform: perspective(700px) rotateX(calc(var(--ty, 0) * -7deg)) rotateY(calc(var(--tx, 0) * 9deg)); transition: transform 0.25s var(--ease-out), box-shadow 0.3s;
  box-shadow: 0 14px 30px rgba(26, 15, 53, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.5) inset; }
.scratch-sheen { position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.85) 46%, rgba(255, 45, 122, 0.35) 52%, transparent 66%);
  background-size: 250% 100%; background-position: calc(50% + var(--tx, 0) * 60%) 0; transition: opacity 0.4s, background-position 0.25s var(--ease-out); animation: scratch-sheen 3.2s ease-in-out infinite; }
.scratch-area.revealed .scratch-sheen { opacity: 0; animation: none; }
@keyframes scratch-sheen { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
.scratch-area.revealed.win .scratch-grid span { animation: scratch-win 0.6s var(--ease-spring) both; animation-delay: calc(var(--n, 0) * 40ms); }

/* ---------- Caixa Surpresa: faíscas enquanto espera e feixe de luz ao abrir ---------- */
.cfx-beam { position: absolute; left: 50%; bottom: 40%; width: 46%; height: 95%; margin-left: -23%; z-index: 1; pointer-events: none; opacity: 0; transform-origin: 50% 100%; transform: scaleY(0.2);
  background: linear-gradient(to top, color-mix(in srgb, var(--c-glow) 85%, #fff), transparent 80%); clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0); filter: blur(3px); }
.chest-fx.open .cfx-beam { animation: cfx-beam 1.2s var(--ease-out) forwards; }
@keyframes cfx-beam { 0% { opacity: 0; transform: scaleY(0.2); } 30% { opacity: 0.95; transform: scaleY(1); } 100% { opacity: 0.35; transform: scaleY(1); } }
.cfx-sparks { position: absolute; inset: 12%; z-index: 3; pointer-events: none; }
.cfx-sparks i { position: absolute; left: 50%; top: 58%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--c-glow); box-shadow: 0 0 8px var(--c-glow); opacity: 0; }
.chest-fx.ready .cfx-sparks i { animation: cfx-spark 2.2s ease-out infinite; }
.cfx-sparks i:nth-child(1) { --a: -60deg; animation-delay: 0s !important; } .cfx-sparks i:nth-child(2) { --a: -20deg; animation-delay: 0.3s !important; }
.cfx-sparks i:nth-child(3) { --a: 20deg; animation-delay: 0.6s !important; } .cfx-sparks i:nth-child(4) { --a: 60deg; animation-delay: 0.9s !important; }
.cfx-sparks i:nth-child(5) { --a: -100deg; animation-delay: 1.2s !important; } .cfx-sparks i:nth-child(6) { --a: 100deg; animation-delay: 1.5s !important; }
.cfx-sparks i:nth-child(7) { --a: -140deg; animation-delay: 1.8s !important; } .cfx-sparks i:nth-child(8) { --a: 140deg; animation-delay: 2s !important; }
@keyframes cfx-spark { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-10px) scale(0.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-90px) scale(1); } }
.chest-fx.open .cfx-sparks i { animation: cfx-burst 0.9s var(--ease-out) both !important; }
@keyframes cfx-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-150px) scale(0.6); } }
/* Cartão do prémio: legível, por cima do fundo escuro. */
.chest-fx.done .cfx-result { padding: 14px 18px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid color-mix(in srgb, var(--c-trim) 45%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--c-glow) 30%, transparent); animation: cfx-up 0.4s var(--ease-spring) both; }
@media (prefers-reduced-motion: reduce) {
  .scratch-area { transform: none !important; } .scratch-sheen { animation: none !important; }
  .cfx-beam, .cfx-sparks i { animation: none !important; }
}

/* Raspadinha: as 3 filas cabem sempre no cartão (antes a de baixo ficava cortada). */
.scratch-grid { grid-template-rows: repeat(var(--rows, 2), minmax(0, 1fr)); }
.scratch-grid span { min-height: 0; overflow: hidden; padding: 0; }
.scratch-grid img { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; border-radius: 12px; }

/* ---------- Carteira: saldo a contar quando mudou de verdade ---------- */
.cc-amount { display: inline-block; transition: transform 0.3s var(--ease-spring); }
.cc-amount.counting-up { transform: scale(1.06); text-shadow: 0 0 14px rgba(255, 255, 255, 0.6); }
.cc-amount.counting-down { transform: scale(0.97); }

/* ---------- Microinterações gerais ---------- */
/* Janelas: entram por baixo (telemóvel) ou crescem (computador); o fundo escurece com fade. */
.modal-backdrop { animation: fx-fade 0.2s ease both; }
.modal-backdrop > .modal { animation: fx-sheet 0.32s var(--ease-out) both; }
@media (min-width: 600px) { .modal-backdrop > .modal { animation-name: fx-pop; } }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-sheet { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes fx-pop { from { transform: scale(0.96) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Produtos: elevam-se ao passar o rato; a foto aproxima ligeiramente. */
.product { transition: border-color 0.2s, transform 0.25s var(--ease-out), box-shadow 0.25s; }
.product .thumb img { transition: transform 0.4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .product:not(.off):hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(26, 15, 53, 0.1); }
  .product:not(.off):hover .thumb img { transform: scale(1.05); }
  .product:not(.off):hover .add { transform: scale(1.08); }
  .btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
  .btn.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255, 45, 122, 0.35); }
}
.product .add { transition: transform 0.2s var(--ease-spring), background 0.2s; }
.product:active:not(.off) { transform: scale(0.99); }
/* Separadores da ementa: o ativo muda com uma transição suave. */
.chips a { transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease-spring); }
.chips a.active { transform: translateY(-1px); }
/* Barra de navegação: o separador ativo dá um pequeno salto ao entrar. */
.tabbar a { transition: color 0.2s; }
.tabbar a[aria-current="page"] svg { animation: tab-pop 0.35s var(--ease-spring); }
@keyframes tab-pop { 0% { transform: scale(0.8); } 100% { transform: none; } }
/* Foco visível em tudo o que se carrega pelo teclado. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 70%, transparent); outline-offset: 2px; }
/* Botão a trabalhar: o texto mantém-se e a roda gira; sem saltos de tamanho. */
.btn.loading { cursor: progress; }
/* Barra "Ver carrinho": sobe ao aparecer. */
#cart-bar:not([hidden]) { animation: fx-sheet 0.3s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal-backdrop > .modal, #cart-bar, .tabbar a svg { animation: none !important; }
  .product, .product .thumb img, .product .add, .chips a, .cc-amount { transition: none !important; transform: none !important; }
}

/* ---------- Pedido confirmado / entregue: animação de ecrã inteiro (cinematica.js) ---------- */
.cine { position: fixed; inset: 0; height: 100dvh; z-index: 4600; overflow: hidden; color: #fff; cursor: pointer; opacity: 0; transition: opacity 0.3s ease; }
.cine.in { opacity: 1; }
.cine.out { opacity: 0; transition-duration: 0.38s; }
.cine-bg { position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 55% 45%, rgba(139, 92, 246, 0.35), transparent 60%), radial-gradient(120% 90% at 20% 90%, rgba(255, 45, 122, 0.22), transparent 55%),
    linear-gradient(160deg, #241246 0%, var(--fx-night) 55%, #0b0619 100%); opacity: 0.97; }
.cine-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55)); }
.cine-smoke { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Linhas de velocidade nas margens, só no arranque. */
.cine-speed { position: absolute; inset: 0; pointer-events: none; }
.cine-speed i { position: absolute; height: 3px; border-radius: 3px; opacity: 0; transform: rotate(-28deg); transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 45, 122, 0.9), rgba(139, 92, 246, 0.6), transparent); animation: cine-speed 0.9s var(--ease-out) both; }
.cine-speed i:nth-child(odd) { background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.9), rgba(255, 255, 255, 0.5), transparent); }
.cine-speed i:nth-child(1) { left: -10%; top: 78%; width: 55%; animation-delay: 0.02s; } .cine-speed i:nth-child(2) { left: -15%; top: 92%; width: 60%; animation-delay: 0.08s; }
.cine-speed i:nth-child(3) { left: 60%; top: 14%; width: 50%; animation-delay: 0.05s; } .cine-speed i:nth-child(4) { left: 70%; top: 4%; width: 45%; animation-delay: 0.12s; }
.cine-speed i:nth-child(5) { left: -5%; top: 64%; width: 35%; animation-delay: 0.15s; } .cine-speed i:nth-child(6) { left: 75%; top: 26%; width: 40%; animation-delay: 0.18s; }
.cine-speed i:nth-child(7) { left: -20%; top: 100%; width: 70%; animation-delay: 0.1s; } .cine-speed i:nth-child(8) { left: 55%; top: -2%; width: 60%; animation-delay: 0.04s; }
.cine-speed i:nth-child(9) { left: 5%; top: 86%; width: 30%; animation-delay: 0.2s; } .cine-speed i:nth-child(10) { left: 80%; top: 36%; width: 30%; animation-delay: 0.22s; }
@keyframes cine-speed { 0% { opacity: 0; translate: -40% 0; scale: 0.4 1; } 30% { opacity: 1; } 100% { opacity: 0; translate: 50% 0; scale: 1.2 1; } }
/* A mota: a foto da marca, à frente de tudo; o preto da foto desaparece no fundo escuro. */
/* A mistura com o fundo tem de estar no próprio elemento que se move (com transform cria uma camada isolada). */
.cine-rider { position: absolute; left: 0; top: 0; will-change: transform; mix-blend-mode: lighten; transform: translate3d(-120vw, 80vh, 0); z-index: 3; pointer-events: none; }
.cine-rider img, .cine-rider video { display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(70% 72% at 52% 52%, #000 62%, transparent 100%); mask-image: radial-gradient(70% 72% at 52% 52%, #000 62%, transparent 100%);
}
.cine-rider video { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.cine-rider.has-video img { visibility: hidden; }
.cine-light { position: absolute; left: 64.8%; top: 45.6%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen; opacity: 0.35; pointer-events: none;
  background: radial-gradient(circle, #fff 0%, rgba(255, 220, 236, 0.75) 12%, rgba(255, 45, 122, 0.25) 38%, transparent 66%); }
.cine-rider.flash .cine-light { animation: cine-flash 0.55s ease-out; }
@keyframes cine-flash { 0% { opacity: 0.35; scale: 1; } 20% { opacity: 1; scale: 1.5; } 45% { opacity: 0.5; scale: 1.1; } 65% { opacity: 1; scale: 1.4; } 100% { opacity: 0.35; scale: 1; } }
/* Mensagem: camada própria, centrada, sempre legível. */
.cine-msg { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; z-index: 2; display: grid; justify-items: center; gap: 10px; padding: 0 20px; text-align: center; pointer-events: none; }
.cine-msg h2 { margin: 0; font: italic 800 clamp(2.1rem, 9.5vw, 4.6rem)/0.98 Metropolis, system-ui, sans-serif; letter-spacing: -0.02em; text-transform: uppercase;
  text-shadow: 0 4px 24px rgba(10, 4, 30, 0.75), 0 0 2px rgba(10, 4, 30, 0.6); opacity: 0; transform: translateX(-30px) skewX(-8deg); }
.cine-msg h2 span { display: block; }
.cine-msg h2 em { display: block; font-style: italic; color: var(--fx-pink); text-shadow: 0 4px 24px rgba(10, 4, 30, 0.8), 0 0 22px rgba(255, 45, 122, 0.45); }
.cine-msg h2::after { content: ''; display: block; width: 64px; height: 6px; margin: 14px auto 0; border-radius: 4px; background: var(--fx-gold); transform: scaleX(0); }
.cine-msg p { margin: 0; font: 700 clamp(1.05rem, 4.4vw, 1.4rem) Metropolis, system-ui, sans-serif; opacity: 0; transform: translateY(10px); text-shadow: 0 2px 14px rgba(10, 4, 30, 0.8); }
.cine-msg .cine-extra { margin-top: 2px; padding: 6px 12px; border-radius: 10px; font-size: clamp(0.9rem, 3.6vw, 1.05rem); color: var(--fx-night); background: var(--fx-gold); text-shadow: none; }
.cine.show-msg .cine-msg h2 { animation: cine-title 0.5s cubic-bezier(0.2, 1.1, 0.3, 1) both; }
.cine.show-msg .cine-msg h2::after { animation: cine-bar 0.45s 0.2s var(--ease-out) forwards; }
.cine.show-msg .cine-msg p { animation: cine-up 0.4s 0.18s var(--ease-out) both; }
.cine.show-msg .cine-msg .cine-extra { animation-delay: 0.32s; }
.cine-delivered.show-msg .cine-msg h2 { animation-name: cine-title-win; animation-duration: 0.6s; }
.cine.msg-out .cine-msg { transition: opacity 0.45s ease, transform 0.45s ease; opacity: 0; transform: translateY(-14px) scale(0.98); }
@keyframes cine-title { from { opacity: 0; transform: translateX(-40px) skewX(-10deg); } to { opacity: 1; transform: none; } }
@keyframes cine-title-win { 0% { opacity: 0; transform: scale(0.7) skewX(-8deg); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes cine-bar { to { transform: scaleX(1); } }
@keyframes cine-up { to { opacity: 1; transform: none; } }
.cine-skip { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); translate: -50% 0; z-index: 4; border: 0; background: none; color: rgba(255, 255, 255, 0.6); font: 600 0.8rem Metropolis, system-ui, sans-serif; cursor: pointer; }
/* Menos movimento: só a mensagem, sem viagem nem fumo. */
.cine-reduced .cine-rider, .cine-reduced .cine-speed, .cine-reduced .cine-smoke { display: none; }
.cine-reduced .cine-msg h2, .cine-reduced .cine-msg p, .cine-reduced .cine-msg h2::after { animation: none !important; opacity: 1; transform: none; }