/* Shared CSS — Eemovel Gamification Mural */

@import url('https://fonts.googleapis.com/css2?family=Anybody:ital,wght@0,400..900;1,400..900&family=Geist:wght@300..800&family=Geist+Mono:wght@400..700&display=swap');

:root {
  --orange: #FF9800;
  --orange-deep: #E07A00;
  --dark: #1C1B1D;
  --abyss: #030419;
  --indigo: #2E35C5;
  --cyan: #009FE3;
  --cream: #FFF5EB;
  --stone: #D5D9E7;
  --slate: #3D3E43;
  --tan: #AD896C;
}

* { box-sizing: border-box; }

.mural {
  width: 1920px;
  height: 1080px;
  font-family: 'Geist', system-ui, sans-serif;
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

.font-display { font-family: 'Anybody', sans-serif; font-style: italic; font-weight: 900; letter-spacing: -0.02em; }
.font-mono { font-family: 'Geist Mono', monospace; }

/* ───────── SPORT VARIATION ───────── */
.mural.sport {
  background: radial-gradient(ellipse at 70% 0%, #1a1b3d 0%, var(--abyss) 60%);
}
.mural.sport::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, transparent 0%, transparent calc(100% - 1px), rgba(255,255,255,0.03) 100%),
    linear-gradient(180deg, transparent 0%, transparent calc(100% - 1px), rgba(255,255,255,0.03) 100%);
  background-size: 80px 80px;
  pointer-events: none;
}

/* Header */
.mural-header {
  position: absolute; top: 0; left: 0; right: 0; height: 88px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px;
  border-bottom: 1px solid rgba(213,217,231,0.08);
  z-index: 5;
}
.brand-logo { display: flex; align-items: center; gap: 14px; }
.brand-logo svg { height: 36px; width: auto; }
.brand-tag {
  font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid rgba(255,152,0,0.4);
  color: var(--orange); border-radius: 4px;
}
.header-meta { display: flex; align-items: center; gap: 28px; }
.live-dot { width: 10px; height: 10px; background: #22C55E; border-radius: 50%; box-shadow: 0 0 12px #22C55E; animation: live-pulse 1.6s infinite; }
@keyframes live-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.5 } }
.live-badge { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }
.clock { font-family: 'Geist Mono', monospace; font-size: 18px; color: var(--cream); letter-spacing: 0.04em; }
.refresh-btn {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; border: 1px solid rgba(213,217,231,0.14);
  background: rgba(213,217,231,0.05); color: var(--stone); cursor: pointer;
  transition: color .2s, background .2s, transform .3s;
}
.refresh-btn:hover { color: var(--orange); background: rgba(255,152,0,0.12); border-color: rgba(255,152,0,0.4); }
.refresh-btn:active { transform: rotate(180deg); }

/* Period filter */
.period-filter {
  display: inline-flex; align-items: stretch; background: rgba(213,217,231,0.05);
  border: 1px solid rgba(213,217,231,0.1); border-radius: 10px; padding: 4px;
}
.period-btn {
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  background: transparent; border: 0; color: var(--stone); cursor: pointer;
  border-radius: 7px; font-family: inherit; letter-spacing: 0.04em; text-transform: uppercase;
}
.period-btn.active { background: var(--orange); color: var(--abyss); }

/* Big section spacing */
.mural-body {
  position: absolute; inset: 88px 0 0 0;
  display: grid;
  grid-template-columns: 1020px 1fr;
  gap: 0;
}

/* Trigger button — for prototype demo */
.trigger-btn {
  position: absolute; bottom: 24px; right: 24px;
  z-index: 50;
  background: var(--orange); color: var(--abyss);
  font-family: 'Anybody', sans-serif; font-style: italic; font-weight: 900;
  font-size: 18px; letter-spacing: 0.04em;
  border: 0; padding: 14px 22px; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(255,152,0,0.4), 0 0 0 1px rgba(255,255,255,0.15) inset;
  cursor: pointer; text-transform: uppercase;
  transition: transform 0.15s ease;
}
.trigger-btn:hover { transform: translateY(-2px) scale(1.02); }
.trigger-btn .car-emoji { font-size: 22px; margin-right: 8px; }

/* ───────── SALE ANIMATION OVERLAY ───────── */
.sa-overlay {
  position: absolute; inset: 0; z-index: 200;
  background: var(--bg);
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto auto;
  font-family: 'Geist', sans-serif;
  color: #FFF5EB;
  animation: sa-fade-in 0.3s ease;
}
@keyframes sa-fade-in { from { opacity: 0 } to { opacity: 1 } }

.sa-stripes {
  position: absolute; inset: -50px;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0px, transparent 60px,
    rgba(255,255,255,0.025) 60px, rgba(255,255,255,0.025) 90px,
    transparent 90px, transparent 150px,
    var(--accent) 150px, var(--accent) 156px
  );
  opacity: 0.14;
}

.sa-flash {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.4) 0%, transparent 50%);
  animation: sa-flash 0.7s ease-out;
  pointer-events: none;
}
@keyframes sa-flash { 0% { opacity: 1 } 100% { opacity: 0 } }

.sa-headline {
  position: absolute; top: 80px; left: 0; right: 0; text-align: center;
  z-index: 10;
}
.sa-eyebrow {
  font-family: 'Geist Mono', monospace; font-size: 18px;
  letter-spacing: 0.32em; color: var(--accent); margin-bottom: 18px;
  animation: sa-slide-down 0.5s 0.1s both ease-out;
}
.sa-headline h1 {
  margin: 0; line-height: 0.85; font-family: 'Anybody', sans-serif;
  font-style: italic; font-weight: 900; letter-spacing: -0.03em;
}
.sa-h-accent { display: inline-flex !important; align-items: center; gap: 28px; justify-content: center; }
.sa-horn-icon {
  width: 220px; height: 154px;
  color: var(--accent);
  flex-shrink: 0;
  transform: rotate(-12deg);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5));
  animation: sa-horn-shake 0.18s 0.6s 10 alternate, sa-horn-pop 0.5s 0.3s both cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sa-horn-shake {
  from { transform: rotate(-18deg) scale(1); }
  to   { transform: rotate(-6deg) scale(1.06); }
}
@keyframes sa-horn-pop {
  0%   { opacity: 0; transform: rotate(-50deg) scale(0.3); }
  100% { opacity: 1; transform: rotate(-12deg) scale(1); }
}
.sa-h-line {
  display: block; font-size: 180px; color: #FFF5EB;
  animation: sa-headline-pop 0.6s 0.2s both cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sa-h-accent {
  color: var(--accent);
  animation: sa-headline-pop 0.6s 0.4s both cubic-bezier(0.34, 1.56, 0.64, 1), sa-shake 0.4s 1s 2;
}
@keyframes sa-headline-pop {
  0% { opacity: 0; transform: translateY(-60px) scale(0.7) skewX(-10deg) }
  100% { opacity: 1; transform: translateY(0) scale(1) skewX(-8deg) }
}
@keyframes sa-shake {
  0%,100% { transform: scale(1) skewX(-8deg) }
  25% { transform: scale(1.04) skewX(-10deg) rotate(-1deg) }
  75% { transform: scale(1.04) skewX(-6deg) rotate(1deg) }
}
@keyframes sa-slide-down {
  from { opacity: 0; transform: translateY(-20px) }
  to   { opacity: 1; transform: translateY(0) }
}

.sa-car-wrap {
  position: absolute; left: 0; right: 0; top: 380px; height: 480px;
  z-index: 5;
  overflow: hidden;
}
.sa-road {
  position: absolute; left: -50%; right: -50%; bottom: 0; height: 280px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.08) 100%);
  transform: perspective(900px) rotateX(58deg);
  transform-origin: center bottom;
  border-top: 1px solid rgba(255,255,255,0.1);
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 80px,
      rgba(255,245,235,0.5) 80px 140px,
      transparent 140px 220px);
  animation: sa-road-rush 0.4s linear infinite;
}
@keyframes sa-road-rush {
  from { background-position: 0 0; }
  to   { background-position: -220px 0; }
}
.sa-car-track {
  position: absolute; left: 50%; top: 0;
  width: 760px; height: 380px;
  margin-left: -380px;
  animation: sa-car-flythru 13s cubic-bezier(0.45, 0, 0.55, 1) forwards;
  transform-origin: 50% 60%;
}
@keyframes sa-car-flythru {
  0%   { transform: translate(0, -120px) scale(0.08); opacity: 0; }
  6%   { transform: translate(0, -100px) scale(0.12); opacity: 1; }
  22%  { transform: translate(0, -40px)  scale(0.4); }
  40%  { transform: translate(20px, 60px) scale(1.0); }
  55%  { transform: translate(0, 100px) scale(1.15); }
  72%  { transform: translate(0, 100px) scale(1.15); }
  90%  { transform: translate(900px, 130px) scale(1.3); }
  100% { transform: translate(2200px, 160px) scale(1.5); opacity: 0; }
}
.sa-car-bounce { animation: sa-car-bounce 0.35s infinite alternate ease-in-out; transform-origin: center; transform-box: fill-box; }
@keyframes sa-car-bounce { from { transform: translateY(0) rotate(-0.3deg); } to { transform: translateY(-4px) rotate(0.4deg); } }
.sa-wheel-spin { animation: sa-wheel-spin 0.18s linear infinite; }
@keyframes sa-wheel-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.sa-honk-arm { transform-origin: 460px 185px; transform-box: fill-box; animation: sa-honk-arm 0.25s infinite alternate; }
@keyframes sa-honk-arm { from { transform: rotate(0deg); } to { transform: rotate(-12deg); } }
.sa-horn-burst { animation: sa-horn-burst 0.5s 0.2s ease-out infinite; transform-origin: 540px 60px; transform-box: fill-box; }
@keyframes sa-horn-burst {
  0% { opacity: 0; transform: scale(0.5); }
  20% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.4) rotate(-4deg); }
}
.sa-speedlines { animation: sa-speed 0.4s linear infinite; }
@keyframes sa-speed { from { transform: translateX(0); } to { transform: translateX(120px); } }

.sa-lower {
  position: absolute; left: 80px; right: 80px; bottom: 130px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 60px; align-items: end; z-index: 10;
  animation: sa-slide-up 0.6s 0.6s both ease-out;
}
@keyframes sa-slide-up { from { opacity: 0; transform: translateY(40px) } to { opacity: 1; transform: translateY(0) } }

.sa-namecard { display: flex; gap: 28px; align-items: center; }
.sa-avatar {
  width: 140px; height: 140px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  font-family: 'Anybody', sans-serif; font-style: italic; font-weight: 900; font-size: 60px;
  color: #FFF5EB;
  border: 5px solid var(--accent);
  box-shadow: 0 0 40px rgba(255,152,0,0.6);
}
.sa-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sa-info-eyebrow { font-family: 'Geist Mono', monospace; font-size: 14px; letter-spacing: 0.24em; color: var(--accent); margin-bottom: 6px; }
.sa-info-name { font-family: 'Anybody', sans-serif; font-style: italic; font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -0.02em; color: #FFF5EB; }
.sa-info-squad { font-size: 22px; color: rgba(255,245,235,0.7); margin-top: 8px; }
.sa-amount { text-align: right; }
.sa-amount-eyebrow { font-family: 'Geist Mono', monospace; font-size: 14px; letter-spacing: 0.24em; color: var(--accent); margin-bottom: 6px; }
.sa-amount-val {
  font-family: 'Anybody', sans-serif; font-style: italic; font-weight: 900;
  font-size: 130px; line-height: 0.9; color: var(--accent); letter-spacing: -0.02em;
  text-shadow: 0 0 60px rgba(255,152,0,0.45);
}

.sa-music {
  position: absolute; bottom: 60px; left: 80px; right: 80px;
  display: flex; align-items: center; gap: 14px;
  font-size: 20px; color: rgba(255,245,235,0.85);
  font-family: 'Geist Mono', monospace; letter-spacing: 0.06em;
  z-index: 10;
  animation: sa-slide-up 0.6s 1.2s both ease-out;
}
.sa-music-icon { color: var(--accent); display: flex; }
.sa-music strong { color: #FFF5EB; font-family: 'Geist', sans-serif; font-weight: 600; letter-spacing: 0; margin-left: 4px; }

.sa-eq { display: inline-flex; gap: 4px; margin-left: 12px; height: 22px; align-items: end; }
.sa-eq i {
  display: block; width: 4px; background: var(--accent); border-radius: 2px;
  animation: sa-eq 0.7s infinite ease-in-out;
}
.sa-eq i:nth-child(1) { animation-delay: 0s;  height: 14px; }
.sa-eq i:nth-child(2) { animation-delay: 0.15s; height: 22px; }
.sa-eq i:nth-child(3) { animation-delay: 0.3s; height: 10px; }
.sa-eq i:nth-child(4) { animation-delay: 0.45s; height: 18px; }
@keyframes sa-eq { 0%,100% { transform: scaleY(0.4) } 50% { transform: scaleY(1) } }

.sa-skip {
  position: absolute; top: 30px; right: 30px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,245,235,0.7); padding: 8px 16px; border-radius: 8px;
  font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.1em;
  cursor: pointer; z-index: 50;
}
.sa-skip:hover { color: #FFF5EB; }

/* Confetti */
.sa-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.sa-confetti span {
  position: absolute; top: -30px; display: block; border-radius: 2px;
  animation: sa-confetti-fall linear forwards;
}
@keyframes sa-confetti-fall {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(1200px) rotate(var(--rot, 360deg)); opacity: 0.6; }
}

/* ── Aceleração por GPU só nos elementos HTML que se movem (não no .tv-stage,
   que escalado vira textura borrada na TV 4K; e não em SVG, que não compõe bem) ── */
.sa-car-track, .sa-car-bounce, .sa-wheel-spin, .sa-honk-arm { will-change: transform; }
.sa-confetti span { will-change: transform, opacity; }

/* ── MODO LEVE (TV): cena COM movimento (foto corre + chuta a bola no gol),
   feita com foto/emoji + CSS transform = composta na GPU, leve e sem travar ── */
.sa-overlay.sa-lite .sa-stripes { animation: none; }
.sa-lite-scene { position: absolute; left: 0; right: 0; top: 36%; height: 42%; z-index: 5; pointer-events: none; }

.sl-goal { position: absolute; right: 11%; top: 44%; transform: translateY(-50%); font-size: 150px; will-change: transform; animation: sl-net 0.45s ease-out 1.55s; }
@keyframes sl-net { 0%,100% { transform: translateY(-50%); } 40% { transform: translate(6px,-46%); } 70% { transform: translate(-4px,-53%); } }

.sl-keeper { position: absolute; right: 19%; top: 52%; font-size: 80px; will-change: transform; animation: sl-dive 1.8s ease-out forwards; }
@keyframes sl-dive { 0%,58% { transform: translateY(-50%); } 100% { transform: translate(-30px,6%) rotate(50deg); } }

.sl-player { position: absolute; left: 28%; top: 50%; width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 6px solid var(--accent); box-shadow: 0 0 34px rgba(0,0,0,.5); will-change: transform; animation: sl-run 1.8s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes sl-run {
  0%   { transform: translate(-60vw, -50%); }
  48%  { transform: translate(0, -50%); }
  58%  { transform: translate(4%, -50%) rotate(-12deg); }
  100% { transform: translate(0, -50%) rotate(0); }
}
.sl-player-emoji { display: grid; place-items: center; font-family: 'Anybody', sans-serif; font-style: italic; font-weight: 900; font-size: 62px; color: #FFF5EB; }

.sl-foot { position: absolute; left: 35%; top: 60%; font-size: 64px; opacity: 0; will-change: transform, opacity; animation: sl-kick 1.8s ease-out forwards; }
@keyframes sl-kick { 0%,50% { opacity: 0; transform: translateX(-4vw); } 56% { opacity: 1; transform: translateX(0) rotate(-28deg); } 64% { opacity: 1; transform: translateX(2vw) rotate(22deg); } 78%,100% { opacity: 0; transform: translateX(2vw); } }

.sl-ball { position: absolute; left: 39%; top: 62%; font-size: 86px; will-change: transform; animation: sl-shot 1.8s cubic-bezier(.25,.5,.35,1) forwards; }
@keyframes sl-shot { 0%,56% { transform: translate(0,0) rotate(0); } 100% { transform: translate(30vw,-13vh) rotate(1080deg); } }

.sl-car { position: absolute; left: 0; top: 50%; font-size: 110px; will-change: transform; animation: sl-drive 2s ease-in-out forwards; }
@keyframes sl-drive { 0% { transform: translateX(-25vw); } 100% { transform: translateX(95vw); } }

/* ARCADE variation overrides */
.sa-overlay.arcade { --bg: #0A0224; }
.sa-overlay.arcade .sa-h-line { color: #00F0FF; text-shadow: 0 0 30px #00F0FF, 4px 4px 0 #FF2D7B; }
.sa-overlay.arcade .sa-h-accent { color: #FF2D7B; text-shadow: 0 0 30px #FF2D7B, 4px 4px 0 #00F0FF; }
.sa-overlay.arcade .sa-amount-val { color: #00F0FF; text-shadow: 0 0 60px #00F0FF, 6px 6px 0 #FF2D7B; }
.sa-overlay.arcade .sa-eyebrow,
.sa-overlay.arcade .sa-info-eyebrow,
.sa-overlay.arcade .sa-amount-eyebrow { color: #00F0FF; }
.sa-overlay.arcade .sa-music-icon { color: #FF2D7B; }
.sa-overlay.arcade .sa-eq i { background: #FF2D7B; }
.sa-overlay.arcade .sa-avatar { border-color: #FF2D7B; box-shadow: 0 0 40px rgba(255,45,123,0.7); }


/* ─── Buzina de gás ─── */
.buzina-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 360px; height: 240px;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.45));
  animation: buzina-entry 0.55s 0.2s both cubic-bezier(0.34, 1.56, 0.64, 1);
}
.buzina-svg { width: 100%; height: 100%; overflow: visible; }
.buzina-shake {
  transform-origin: 80px 170px;
  animation: buzina-shake 0.09s 0.7s 18 alternate;
}
.buzina-waves {
  transform-origin: 320px 100px;
  animation: buzina-pulse 0.18s 0.7s 18 alternate;
}
.buzina-notes text {
  animation: buzina-note-float 1.2s 0.7s infinite ease-out;
  transform-origin: center;
}
.buzina-notes text:nth-child(2) { animation-delay: 0.95s; }
.buzina-notes text:nth-child(3) { animation-delay: 1.2s;  }
@keyframes buzina-entry {
  0%   { opacity: 0; transform: rotate(-30deg) scale(0.4); }
  100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}
@keyframes buzina-shake {
  from { transform: rotate(-3deg) translateX(0)   scale(1); }
  to   { transform: rotate(2deg)  translateX(-4px) scale(1.02); }
}
@keyframes buzina-pulse {
  from { opacity: 0.35; transform: scale(0.92); }
  to   { opacity: 1;    transform: scale(1.12); }
}
@keyframes buzina-note-float {
  0%   { opacity: 0; transform: translateY(0)    scale(0.6) rotate(-12deg); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50px) scale(1.2) rotate(20deg); }
}