/* ============================================================
   KIT — base compartilhada dos overlays da VSL
   Formato: 1080 x 1920 (9:16, vertical / mobile)
   Design System: DS OURO (MVP Time de Marketing)
   ============================================================ */
:root{
  --gold-deep:#AA8B4F; --gold:#C49F6A; --gold-light:#E8CFA0; --gold-bright:#FFF1CC;
  --bg:#0a0a0a; --bg-elev:#141210; --bg-panel:#0d0b08;
  --text:#f5f2ea; --muted:#a8a29a; --danger:#c0392b; --danger-soft:#d4675a;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --grad:linear-gradient(135deg,#E8CFA0,#C49F6A,#AA8B4F);
  --grad-headline:linear-gradient(100deg,#AA8B4F,#C49F6A 18%,#E8CFA0 32%,#FFF1CC 46%,#E8CFA0 60%,#C49F6A 78%,#AA8B4F);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;background:var(--bg);overflow:hidden}

.wrap{position:fixed;inset:0;background:var(--bg);overflow:hidden}
.stage{position:absolute;left:50%;top:50%;width:1080px;height:1920px;
  transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:center;
  background:var(--bg);overflow:hidden;font-family:var(--font);color:var(--text)}

/* atmosfera */
.atmo{position:absolute;inset:0;transition:background 1s ease;
  background:radial-gradient(52% 40% at 50% 48%,rgba(196,159,106,.10),transparent 70%);
  animation:drift 20s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(-2%,-1%)}to{transform:translate(2%,1%)}}
.atmo.hot{background:radial-gradient(52% 40% at 50% 48%,rgba(192,57,43,.14),transparent 70%)}
.stars{position:absolute;inset:0}
.stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold-light);
  opacity:0;animation:tw 5s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:0}50%{opacity:.45}}

/* título de fase — topo */
.phase{position:absolute;top:150px;left:60px;right:60px;text-align:center;z-index:9}
.phase h2{font-size:62px;font-weight:800;letter-spacing:-.045em;line-height:1.1;
  opacity:0;transform:translateY(12px);transition:.6s cubic-bezier(.2,.8,.2,1)}
.phase h2.show{opacity:1;transform:none}
.phase .g{background-image:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.phase .r{color:var(--danger-soft)}

/* legenda — rodapé */
.caption{position:absolute;left:50px;right:50px;bottom:96px;text-align:center;z-index:9}
.caption .k{font-family:var(--mono);font-size:27px;letter-spacing:.22em;text-transform:uppercase;
  line-height:1.5;color:var(--gold-light);opacity:0;transition:.6s}
.caption .k.show{opacity:1}
.caption .k.bad{color:var(--danger-soft)}

/* sobrancelha mono */
.eyebrow{font-family:var(--mono);font-size:26px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-light);text-align:center;opacity:.9}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}