/* ============================================================
   CINEPET — polimento de animação e acabamento
   Mantém a identidade original (âmbar, Fraunces, fotos coloridas,
   fundo quente). Só refina movimento, profundidade e detalhes, e
   veste a Retrospectiva + player (cinepet-retro.js) com a mesma paleta.
   Carregar DEPOIS do <style> do index.html.
   ============================================================ */

:root{
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.45,.5,1);
  --ink-deep:#14100a;
  --cream:#f5efe4;
}

/* ---------- troca de telas: mais suave, com leve desfoque ---------- */
.view{ animation:cpViewIn .55s var(--ease-out) both; }
@keyframes cpViewIn{
  from{ opacity:0; transform:translateY(14px) scale(.995); filter:blur(4px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}
.modal{ animation:cpModalIn .38s var(--ease-spring) both; }
@keyframes cpModalIn{
  from{ opacity:0; transform:translateY(18px) scale(.96); }
  to{ opacity:1; transform:none; }
}

/* ---------- botões: brilho que atravessa no hover, mola no toque ---------- */
.btn{ position:relative; overflow:hidden; transition:transform .35s var(--ease-spring), box-shadow .3s, background .25s, opacity .2s; }
.btn::after{
  content:""; position:absolute; inset:-40% auto -40% -60%; width:38%;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  transform:skewX(-18deg) translateX(0); opacity:0; pointer-events:none;
  transition:opacity .2s;
}
.btn:hover::after{ opacity:1; animation:cpSheen .9s var(--ease-out) 1; }
@keyframes cpSheen{ from{ left:-60%; } to{ left:130%; } }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 44px -8px rgba(240,160,50,.62), 0 2px 0 rgba(255,235,190,.35) inset; }
.btn-ghost:hover{ transform:translateY(-1px); border-color:rgba(242,168,62,.45); }
.btn:active{ transform:scale(.96); transition-duration:.08s; }
.btn:focus-visible,.hub-card:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }

/* ---------- topbar: encolhe e ganha sombra ao rolar ---------- */
.topbar{ transition:padding .35s var(--ease-out), box-shadow .35s, background .35s; }
.topbar.cp-scrolled{ padding-top:9px; padding-bottom:9px; background:rgba(11,9,8,.86); box-shadow:0 10px 30px -14px rgba(0,0,0,.7); }

/* ---------- hero: entrada coreografada (uma vez, no carregamento) ---------- */
.hero > div:first-child > *{ opacity:0; animation:cpRise .8s var(--ease-out) forwards; }
.hero .eyebrow{ animation-delay:.05s; }
.hero h1{ animation-delay:.16s; }
.hero .lead{ animation-delay:.3s; }
.hero .cta-row{ animation-delay:.42s; }
.hero .micro{ animation-delay:.52s; }
.hero .trust-row{ animation-delay:.6s; }
@keyframes cpRise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

.hero h1 em{ background-size:200% 100%; animation:cpShimmer 6s ease-in-out infinite; }
@keyframes cpShimmer{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

.hero-stage{ perspective:1200px; }
.hero-stage .phone.sm{ translate:0 var(--py,0px); }
.hero-stage .phone.main:not(.cp-tilt){ translate:0 calc(var(--py,0px) * .6); }
.hero-stage .phone{ opacity:0; animation:cpPhoneIn 1s var(--ease-spring) forwards, floaty 7s ease-in-out 1s infinite; }
.hero-stage .phone.main{ animation-delay:.35s, 1.35s; }
.hero-stage .phone.sm.l{ animation-delay:.55s, 1.55s; }
.hero-stage .phone.sm.r{ animation-delay:.7s, 1.7s; }
@keyframes cpPhoneIn{ from{ opacity:0; transform:translateY(60px) scale(.9); } to{ opacity:1; transform:none; } }
/* o celular principal segue o mouse (cinepet-polish.js) */
.hero-stage .phone.main.cp-tilt{ animation:none; opacity:1; transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)); transition:transform .25s var(--ease-out); }
.hero-stage .phone.main.cp-tilt .screen::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(calc(115deg + var(--ry,0deg) * 2), transparent 40%, rgba(255,240,210,.14) 50%, transparent 60%);
  transition:background .25s;
}

/* ---------- revelação ao rolar: um só gesto, suave ---------- */
.cp-reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.cp-reveal.cp-in{ opacity:1; transform:none; }
.cp-reveal.cp-stagger > *{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.cp-reveal.cp-in.cp-stagger > *{ opacity:1; transform:none; }
.cp-reveal.cp-in.cp-stagger > :nth-child(1){ transition-delay:.05s } .cp-reveal.cp-in.cp-stagger > :nth-child(2){ transition-delay:.13s }
.cp-reveal.cp-in.cp-stagger > :nth-child(3){ transition-delay:.21s } .cp-reveal.cp-in.cp-stagger > :nth-child(4){ transition-delay:.29s }
.cp-reveal.cp-in.cp-stagger > :nth-child(5){ transition-delay:.37s } .cp-reveal.cp-in.cp-stagger > :nth-child(n+6){ transition-delay:.45s }

/* ---------- cartões: profundidade mais rica, mesma cor ---------- */
.step-card,.price-card,.depo,.lp-plan,.stat-card,.hub-card,.season-card,.ep-item{
  transition:transform .4s var(--ease-spring), box-shadow .4s, border-color .3s, background .3s;
}
.step-card:hover,.stat-card:hover{ transform:translateY(-4px); border-color:rgba(242,168,62,.32); box-shadow:0 22px 50px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(242,168,62,.08) inset; }
.price-card:hover{ transform:translateY(-5px); box-shadow:0 26px 60px -20px rgba(0,0,0,.8); }
.price-card.hot:hover{ box-shadow:0 26px 60px -20px rgba(0,0,0,.8), var(--glow); }
.step-card .ic{ transition:transform .45s var(--ease-spring), box-shadow .3s; }
.step-card:hover .ic{ transform:rotate(-6deg) scale(1.08); box-shadow:0 10px 24px -10px rgba(240,160,50,.6); }
.ep-item:hover{ transform:translateX(4px); border-color:rgba(242,168,62,.3); }
.hub-card .hc-ic{ transition:transform .45s var(--ease-spring); }
.hub-card:hover .hc-ic{ transform:translateY(-3px) rotate(-5deg); }

/* imagens: entrada suave quando carregam */
.gal-main img,.season-card img,.ep-item img,.xp-hero img{ transition:opacity .6s var(--ease-out), transform .8s var(--ease-out); }
img.cp-loading{ opacity:0; transform:scale(1.03); }

/* ---------- rolagem ---------- */
html{ scroll-behavior:smooth; }
::selection{ background:rgba(242,168,62,.35); color:var(--ink); }

/* ============================================================
   PLAYER VISÍVEL (cinepet-retro.js) — vestido com a paleta do site
   ============================================================ */
.cp-player{ position:fixed; left:12px; right:12px; bottom:12px; z-index:79; display:none; grid-template-columns:56px 1fr auto auto; gap:14px; align-items:center;
  padding:10px 14px; background:rgba(24,19,16,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line2); border-radius:20px; color:var(--ink); font-family:var(--font-ui);
  box-shadow:0 20px 50px -16px rgba(0,0,0,.8); animation:cpPlayerIn .5s var(--ease-spring) both; }
@media (min-width:720px){ .cp-player{ left:50%; right:auto; width:min(720px, calc(100vw - 32px)); transform:translateX(-50%); } }
@keyframes cpPlayerIn{ from{ opacity:0; translate:0 24px; } to{ opacity:1; translate:0 0; } }
.cp-player.on{ display:grid; }
body.pn-open .cp-player{ z-index:71; }
.cp-player .art{ width:56px; height:56px; overflow:hidden; border-radius:12px; background:var(--card2); box-shadow:0 6px 16px -6px rgba(0,0,0,.6); }
.cp-player .art img{ width:100%; height:100%; object-fit:cover; }
.cp-player .meta{ min-width:0; }
.cp-player .t{ font-family:var(--font-display); font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-player .a{ font-size:12px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-player .bar{ height:3px; border-radius:3px; background:rgba(244,232,208,.14); margin-top:8px; position:relative; overflow:hidden; }
.cp-player .bar i{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:3px; background:var(--grad); transition:width .5s linear; }
.cp-player .tm{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.cp-player .ctl{ display:flex; gap:8px; }
.cp-player .ctl button{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line2); background:rgba(244,232,208,.06); color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:transform .3s var(--ease-spring), background .2s, color .2s; }
.cp-player .ctl button:hover{ background:var(--grad); color:var(--brand-ink); border-color:transparent; transform:scale(1.08); }
.cp-player .ctl button:active{ transform:scale(.94); }
.cp-player .ctl button svg{ width:18px; height:18px; }
.cp-player .ext{ font-size:12px; color:var(--muted); }
.cp-player .ext a{ color:var(--brand); }
#view-xp.has-player .xp-section:last-of-type{ padding-bottom:140px; }
.xp-sound-control.cp-hidden{ display:none !important; }

/* ============================================================
   RETROSPECTIVA (stories) — âmbar, Fraunces, cantos arredondados
   ============================================================ */
#cpRetro{ position:fixed; inset:0; z-index:120; display:none; background:rgba(6,5,4,.94); backdrop-filter:blur(10px); font-family:var(--font-ui); color:var(--ink); }
#cpRetro.on{ display:block; animation:cpFade .3s ease both; }
@keyframes cpFade{ from{ opacity:0 } to{ opacity:1 } }
#cpRetro .rt-stage{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(100vw, calc(100vh * 9 / 16)); height:100vh; height:100dvh; overflow:hidden; background:var(--ink-deep); user-select:none; -webkit-user-select:none; touch-action:manipulation; container-type:inline-size; animation:cpStageIn .5s var(--ease-spring) both; }
@media (min-width:560px){ #cpRetro .rt-stage{ height:min(100dvh, 92vh); border-radius:28px; box-shadow:0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px var(--line2); } }
@keyframes cpStageIn{ from{ opacity:0; transform:translate(-50%,-50%) scale(.94); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
#cpRetro .rt-bars{ position:absolute; left:4cqw; right:4cqw; top:3cqw; display:flex; gap:1cqw; z-index:6; }
#cpRetro .rt-bars i{ flex:1; height:0.9cqw; border-radius:1cqw; background:rgba(245,239,228,.28); position:relative; overflow:hidden; }
#cpRetro .rt-bars i b{ position:absolute; inset:0; right:auto; width:0; border-radius:1cqw; background:var(--grad); }
#cpRetro .rt-stage.light .rt-bars i{ background:rgba(36,21,3,.18); }
#cpRetro .rt-stage.light .rt-head,#cpRetro .rt-stage.light .rt-close{ color:var(--brand-ink); }
#cpRetro .rt-head{ position:absolute; left:6cqw; top:6.4cqw; display:flex; align-items:center; gap:2.4cqw; z-index:6; font-family:var(--font-display); font-weight:700; font-size:3.6cqw; letter-spacing:.01em; }
#cpRetro .rt-head::before{ content:"🎬"; width:6.4cqw; height:6.4cqw; border-radius:2cqw; background:var(--grad); display:grid; place-items:center; font-size:3.4cqw; box-shadow:var(--glow); }
#cpRetro .rt-close{ position:absolute; right:4cqw; top:4.6cqw; z-index:7; width:9.5cqw; height:9.5cqw; border-radius:50%; border:1px solid rgba(245,239,228,.25); background:rgba(245,239,228,.08); color:inherit; font-size:4.4cqw; font-weight:700; display:grid; place-items:center; cursor:pointer; transition:transform .3s var(--ease-spring), background .2s; }
#cpRetro .rt-close:hover{ transform:scale(1.08) rotate(90deg); background:rgba(245,239,228,.16); }
#cpRetro .rt-card{ position:absolute; inset:0; display:none; padding:24cqw 7cqw 16cqw; box-sizing:border-box; overflow:hidden; }
#cpRetro .rt-card.on{ display:block; }
#cpRetro .rt-card.red{ background:var(--grad); color:var(--brand-ink); }
#cpRetro .rt-card.ink{ background:radial-gradient(120% 80% at 50% 0%, #2a2116 0%, var(--ink-deep) 60%); color:var(--ink); }
#cpRetro .rt-card.light{ background:linear-gradient(180deg, #fbf6ec, var(--cream)); color:var(--brand-ink); }
#cpRetro .rt-k{ font-weight:700; font-size:3cqw; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:3.6cqw; }
#cpRetro .red .rt-k{ color:rgba(36,21,3,.75); }
#cpRetro .rt-rule{ height:3px; border-radius:3px; background:var(--grad); width:12cqw; margin-bottom:4.6cqw; }
#cpRetro .red .rt-rule{ background:rgba(36,21,3,.6); }
#cpRetro .rt-h{ font-family:var(--font-display); font-weight:900; letter-spacing:-.02em; line-height:.98; font-size:12cqw; margin:0; text-wrap:pretty; }
#cpRetro .rt-h.xl{ font-size:22cqw; letter-spacing:-.03em; line-height:.92; }
#cpRetro .rt-h.xxl{ font-size:28cqw; letter-spacing:-.04em; line-height:.9; }
#cpRetro .ink .rt-h.xxl,#cpRetro .ink .rt-h.xl{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
#cpRetro .rt-p{ font-size:4.4cqw; line-height:1.45; margin:4.6cqw 0 0; }
#cpRetro .rt-p.muted{ color:var(--muted); } #cpRetro .light .rt-p.muted{ color:#6b5e4a; } #cpRetro .red .rt-p.muted{ color:rgba(36,21,3,.7); }
#cpRetro .rt-foot{ position:absolute; left:7cqw; right:7cqw; bottom:15cqw; border-top:1px solid currentColor; opacity:.9; padding-top:4cqw; font-size:4.2cqw; line-height:1.4; }
#cpRetro .rt-list{ margin-top:6cqw; }
#cpRetro .rt-row{ display:grid; grid-template-columns:11cqw 16cqw 1fr; gap:3.5cqw; align-items:center; min-height:20cqw; border-top:1px solid rgba(245,239,228,.14); }
#cpRetro .rt-row.nothumb{ grid-template-columns:11cqw 1fr; }
#cpRetro .rt-row .n{ font-family:var(--font-display); font-weight:900; font-size:10.5cqw; letter-spacing:-.04em; line-height:1; color:var(--faint); }
#cpRetro .rt-row:first-child .n{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
#cpRetro .light .rt-row{ border-color:rgba(36,21,3,.14); }
#cpRetro .rt-row .th{ width:16cqw; height:16cqw; border-radius:3.2cqw; overflow:hidden; background:var(--card2); box-shadow:0 8px 20px -10px rgba(0,0,0,.6); }
#cpRetro .rt-row .th img{ width:100%; height:100%; object-fit:cover; }
#cpRetro .rt-row b{ display:block; font-size:4.3cqw; line-height:1.15; }
#cpRetro .rt-row small{ display:block; font-size:3cqw; color:var(--muted); margin-top:1.2cqw; }
#cpRetro .light .rt-row small{ color:#6b5e4a; }
#cpRetro .rt-stat{ border-top:1px solid rgba(36,21,3,.14); padding:4cqw 0 4.6cqw; }
#cpRetro .ink .rt-stat{ border-color:rgba(245,239,228,.14); }
#cpRetro .rt-stat .v{ font-family:var(--font-display); font-weight:900; font-size:17cqw; letter-spacing:-.04em; line-height:.9; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
#cpRetro .rt-stat .l{ font-weight:700; font-size:4.4cqw; margin-top:2cqw; }
#cpRetro .rt-stat .s{ font-size:3.2cqw; color:#6b5e4a; margin-top:.6cqw; }
#cpRetro .ink .rt-stat .s{ color:var(--muted); }
#cpRetro .rt-tags{ position:absolute; left:7cqw; right:7cqw; bottom:15cqw; display:grid; grid-template-columns:1fr 1fr; gap:2cqw; }
#cpRetro .rt-tags span{ background:rgba(245,239,228,.08); border:1px solid rgba(245,239,228,.14); border-radius:3.5cqw; color:var(--ink); font-weight:700; font-size:4.2cqw; padding:4.6cqw 4cqw; }
#cpRetro .rt-tags span:nth-child(n+3){ background:var(--grad-soft); border-color:rgba(242,168,62,.35); color:var(--brand); }
#cpRetro .light .rt-tags span{ background:rgba(36,21,3,.05); border-color:rgba(36,21,3,.12); color:var(--brand-ink); }
#cpRetro .rt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2cqw; margin-top:6cqw; }
#cpRetro .rt-cell{ position:relative; aspect-ratio:4/3.2; border-radius:3.5cqw; overflow:hidden; background:var(--card2); box-shadow:0 10px 24px -12px rgba(0,0,0,.7); }
#cpRetro .rt-cell img{ width:100%; height:100%; object-fit:cover; transition:transform 6s linear; }
#cpRetro .rt-card.on .rt-cell img{ transform:scale(1.08); }
#cpRetro .rt-cell::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(20,16,10,.92)); }
#cpRetro .rt-cell div{ position:absolute; left:3cqw; bottom:2.6cqw; z-index:1; }
#cpRetro .rt-cell b{ display:block; font-family:var(--font-display); font-size:5.2cqw; line-height:1; color:#fff; }
#cpRetro .rt-cell small{ display:block; font-size:2.8cqw; color:var(--muted); margin-top:1cqw; }
#cpRetro .rt-bg{ position:absolute; inset:0; z-index:-1; }
#cpRetro .rt-bg img{ width:100%; height:100%; object-fit:cover; opacity:.6; animation:kbSoft 12s ease-in-out infinite alternate; }
#cpRetro .rt-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,16,10,.15), rgba(20,16,10,.96) 70%); }
#cpRetro .rt-badge{ width:15cqw; height:15cqw; border-radius:4.5cqw; background:var(--grad); color:var(--brand-ink); display:grid; place-items:center; font-weight:900; font-size:7cqw; margin-bottom:4cqw; box-shadow:var(--glow); }
#cpRetro .rt-share{ border:1px solid rgba(36,21,3,.12); border-radius:5cqw; overflow:hidden; background:#fff; color:var(--brand-ink); margin-top:-8cqw; box-shadow:0 24px 50px -20px rgba(36,21,3,.45); }
#cpRetro .rt-share .hero{ position:relative; height:42cqw; overflow:hidden; background:var(--ink-deep); }
#cpRetro .rt-share .hero img{ width:100%; height:100%; object-fit:cover; }
#cpRetro .rt-share .hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(20,16,10,.85)); }
#cpRetro .rt-share .hero b{ position:absolute; left:4cqw; bottom:3cqw; z-index:1; color:#fff; font-family:var(--font-display); font-size:12cqw; letter-spacing:-.03em; line-height:.92; }
#cpRetro .rt-share .body{ padding:4cqw 4cqw 4.4cqw; display:grid; gap:3cqw; }
#cpRetro .rt-share .two{ display:grid; grid-template-columns:1fr 1fr; gap:3cqw; }
#cpRetro .rt-share .k{ font-weight:700; font-size:2.6cqw; letter-spacing:.12em; text-transform:uppercase; color:var(--brand2); }
#cpRetro .rt-share .v{ font-family:var(--font-display); font-weight:900; font-size:8.4cqw; letter-spacing:-.03em; line-height:1; margin-top:1.4cqw; }
#cpRetro .rt-share .v.sm{ font-size:4.2cqw; line-height:1.1; margin-top:2cqw; font-family:var(--font-ui); font-weight:700; }
#cpRetro .rt-share .top{ border-top:1px solid rgba(36,21,3,.12); padding-top:2.6cqw; font-size:3.5cqw; }
#cpRetro .rt-share .top div{ display:grid; grid-template-columns:5.5cqw 1fr; margin-top:1.4cqw; }
#cpRetro .rt-share .top b{ color:var(--brand2); }
#cpRetro .rt-share .url{ border-top:1px solid rgba(36,21,3,.12); padding-top:2.6cqw; font-weight:700; font-size:3.3cqw; color:#6b5e4a; }
#cpRetro .rt-actions{ position:absolute; left:7cqw; right:7cqw; bottom:9cqw; display:grid; gap:2.4cqw; }
#cpRetro .rt-actions button{ height:12.5cqw; display:flex; align-items:center; justify-content:center; gap:2cqw; padding:0 4cqw; border-radius:999px; font-family:inherit; font-weight:700; font-size:3.9cqw; cursor:pointer; border:0; background:var(--grad); color:var(--brand-ink); box-shadow:var(--glow); transition:transform .3s var(--ease-spring), box-shadow .3s; }
#cpRetro .rt-actions button.ghost{ background:rgba(36,21,3,.06); color:var(--brand-ink); border:1px solid rgba(36,21,3,.18); box-shadow:none; }
#cpRetro .rt-actions button:hover{ transform:translateY(-2px); }
#cpRetro .rt-actions button:active{ transform:scale(.96); }
#cpRetro .rt-tap{ position:absolute; top:0; bottom:30cqw; width:34%; z-index:5; }
#cpRetro .rt-tap.l{ left:0; } #cpRetro .rt-tap.r{ right:0; width:66%; }
#cpRetro .rt-hint{ position:absolute; left:7cqw; right:7cqw; bottom:5cqw; text-align:center; font-size:2.8cqw; color:var(--faint); z-index:6; }
#cpRetro .rt-word{ display:block; opacity:0; transform:translateY(24px) rotate(-1deg); animation:rtWord .65s var(--ease-spring) forwards; }
#cpRetro .rt-in{ opacity:0; transform:translateY(22px); animation:rtIn .7s var(--ease-out) forwards; }
#cpRetro .rt-card.on > .rt-in:nth-child(2){ animation-delay:.08s } #cpRetro .rt-card.on > .rt-in:nth-child(3){ animation-delay:.16s }
#cpRetro .rt-card.on > .rt-in:nth-child(4){ animation-delay:.24s } #cpRetro .rt-card.on > .rt-in:nth-child(n+5){ animation-delay:.32s }
@keyframes rtWord{ to{ opacity:1; transform:none; } }
@keyframes rtIn{ to{ opacity:1; transform:none; } }


/* cartão âmbar: chrome escuro por cima do gradiente */
#cpRetro .rt-stage:has(.rt-card.red.on) .rt-head,#cpRetro .rt-stage:has(.rt-card.red.on) .rt-close{ color:var(--brand-ink); }
#cpRetro .rt-stage:has(.rt-card.red.on) .rt-close{ border-color:rgba(36,21,3,.3); background:rgba(36,21,3,.08); }
#cpRetro .rt-stage:has(.rt-card.red.on) .rt-head::before{ background:var(--brand-ink); box-shadow:none; }
#cpRetro .rt-stage:has(.rt-card.red.on) .rt-bars i{ background:rgba(36,21,3,.22); }
#cpRetro .rt-stage:has(.rt-card.red.on) .rt-bars i b{ background:var(--brand-ink); }
#cpRetro .rt-stage:has(.rt-card.red.on) .rt-hint{ color:rgba(36,21,3,.6); }
#cpRetro .rt-stage.light .rt-hint{ color:#6b5e4a; }


/* ============================================================
   V2 — "MELHORE TUDO": cinema de verdade
   ============================================================ */

/* ---------- textura de filme (grão) e vinheta ---------- */
.cp-grain{ position:fixed; inset:-40px; z-index:9998; pointer-events:none; opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:cpGrain 1.2s steps(6) infinite; }
@keyframes cpGrain{ 0%{ transform:translate(0,0) } 20%{ transform:translate(-14px,9px) } 40%{ transform:translate(9px,-16px) } 60%{ transform:translate(-6px,14px) } 80%{ transform:translate(13px,-5px) } 100%{ transform:translate(0,0) } }
body.cp-xp .cp-grain{ opacity:.09; }

/* holofote âmbar que acompanha o mouse na landing */
.cp-glow{ position:fixed; left:0; top:0; width:680px; height:680px; margin:-340px 0 0 -340px; z-index:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, rgba(242,168,62,.16) 0%, rgba(226,113,44,.06) 35%, transparent 70%);
  transform:translate(var(--gx,50vw), var(--gy,40vh)); transition:transform 1.4s var(--ease-out), opacity .6s; opacity:0; filter:blur(10px); }
body.cp-landing .cp-glow{ opacity:1; }
#app{ position:relative; z-index:1; }

/* ---------- transição entre telas: flash de projetor ---------- */
.cp-wipe{ position:fixed; inset:0; z-index:9997; pointer-events:none; opacity:0;
  background:radial-gradient(80% 60% at 50% 45%, rgba(255,214,140,.55) 0%, rgba(242,168,62,.25) 30%, rgba(11,9,8,0) 70%); }
.cp-wipe.go{ animation:cpFlash .7s var(--ease-out) both; }
@keyframes cpFlash{ 0%{ opacity:0; transform:scale(.6) } 18%{ opacity:1; transform:scale(1) } 100%{ opacity:0; transform:scale(1.3) } }

/* ---------- cartões com "spotlight" que segue o ponteiro ---------- */
.step-card,.price-card,.hub-card,.xs-card,.opt-card,.depo,.lp-plan,.stat-card,.award-card,.cast-card{ position:relative; }
.cp-spot::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:0; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(242,168,62,.28), transparent 45%); }
.cp-spot:hover::before{ opacity:1; }
.cp-spot > *{ position:relative; z-index:1; }
/* borda que acende perto do ponteiro */
.cp-spot::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:0; opacity:0; transition:opacity .35s;
  padding:1px; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(246,189,81,.9), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.cp-spot:hover::after{ opacity:1; }
/* os hub-cards já usam ::before para o gradiente — usa só a borda */
.hub-card.cp-spot::before,.xs-card.cp-spot::before{ inset:0; }

/* ---------- botões magnéticos ---------- */
.btn-primary.cp-mag{ transform:translate(var(--tx,0), var(--ty,0)); transition:transform .25s var(--ease-out), box-shadow .3s; }
.btn-primary.cp-mag:hover{ box-shadow:0 18px 48px -10px rgba(240,160,50,.7); }

/* ---------- fotos: tratamento cinematográfico ---------- */
.season-card img,.ep-item img,.gal-main img,.gal-thumbs img,.rt-cell img,.lt-cover img,.cast-card img{ transition:transform .9s var(--ease-out), filter .6s; }
.season-card:hover img,.ep-item:hover img,.gal-thumbs img:hover{ transform:scale(1.06); filter:saturate(1.12) contrast(1.04); }
.season-card::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s;
  background:linear-gradient(160deg, rgba(246,189,81,.18), transparent 45%), radial-gradient(120% 80% at 50% 110%, transparent 55%, rgba(0,0,0,.45)); }
.season-card:hover::after{ opacity:1; }
/* skeleton enquanto a imagem não chegou */
.season-card,.ep-item .th,.gal-main,.rt-cell,.rt-row .th{ background-image:linear-gradient(100deg, var(--card) 30%, var(--card2) 50%, var(--card) 70%); background-size:220% 100%; animation:cpShimmerBg 1.6s linear infinite; }
.season-card:has(img:not(.cp-loading)),.rt-cell:has(img:not(.cp-loading)){ animation:none; }
@keyframes cpShimmerBg{ from{ background-position:120% 0 } to{ background-position:-120% 0 } }

/* ---------- abertura da experiência (gate): sala escura + foto viva ---------- */
.xp-gate .gate-bg{ opacity:.55; }
.xp-gate .gate-bg img{ filter:blur(1.5px) brightness(.72) saturate(1.18) sepia(.1); transform:scale(1.08); animation:cpGateKen 22s ease-in-out infinite alternate; }
@keyframes cpGateKen{ from{ transform:scale(1.08) translate(0,0) } to{ transform:scale(1.16) translate(-1.5%,-1%) } }
.xp-gate .gate-bg::after{ background:radial-gradient(90% 70% at 50% 42%, rgba(7,6,5,.05) 0%, rgba(7,6,5,.7) 60%, #070605 100%), linear-gradient(180deg, rgba(7,6,5,.5), transparent 30%, transparent 70%, rgba(7,6,5,.8)); }
.xp-gate::before{ content:""; position:absolute; left:50%; top:-20%; width:70vmin; height:140%; transform:translateX(-50%) skewX(-6deg); pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(246,189,81,.16), rgba(246,189,81,.04) 55%, transparent); filter:blur(30px); animation:cpBeam 6s ease-in-out infinite alternate; }
@keyframes cpBeam{ from{ transform:translateX(-56%) skewX(-8deg); opacity:.7 } to{ transform:translateX(-44%) skewX(-4deg); opacity:1 } }
.xp-gate .gate-inner{ position:relative; z-index:2; }
.xp-gate .gate-presents{ animation:cpRise .9s .2s var(--ease-out) both; }
.xp-gate .gate-line{ animation:cpRise .9s .45s var(--ease-out) both; }
.xp-gate .gate-title{ animation:cpTitle 1.3s .6s var(--ease-out) both; text-shadow:0 10px 60px rgba(242,168,62,.25); }
@keyframes cpTitle{ from{ opacity:0; transform:translateY(30px) scale(.94); letter-spacing:.12em; filter:blur(8px) } to{ opacity:1; transform:none; letter-spacing:0; filter:blur(0) } }
.xp-gate .gate-from{ animation:cpRise .9s 1s var(--ease-out) both; }
.xp-gate .gate-btns{ animation:cpRise .9s 1.2s var(--ease-out) both; }
.xp-gate .gate-hint{ animation:cpRise .9s 1.45s var(--ease-out) both; }
.xp-gate .gate-btns .btn-primary{ animation:cpRise .9s 1.2s var(--ease-out) both, cpPulse 2.6s 2.4s ease-in-out infinite; }
@keyframes cpPulse{ 0%,100%{ box-shadow:0 8px 32px -6px rgba(240,160,50,.45) } 50%{ box-shadow:0 12px 48px -4px rgba(240,160,50,.85), 0 0 0 8px rgba(242,168,62,.08) } }

/* hero da experiência: leve parallax e brilho na borda de baixo */
.xp-hero .bg::before{ content:""; position:absolute; inset:auto 0 0 0; height:40%; z-index:1; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(11,9,8,.85)); }

/* ---------- hub: cartões em cascata + ícone flutuante ---------- */
.hub-grid .hub-card{ animation:cpRise .7s var(--ease-out) both; }
.hub-grid .hub-card:nth-child(1){ animation-delay:.05s } .hub-grid .hub-card:nth-child(2){ animation-delay:.12s } .hub-grid .hub-card:nth-child(3){ animation-delay:.19s }
.hub-grid .hub-card:nth-child(4){ animation-delay:.26s } .hub-grid .hub-card:nth-child(5){ animation-delay:.33s } .hub-grid .hub-card:nth-child(6){ animation-delay:.4s }
.hub-grid .hub-card:nth-child(n+7){ animation-delay:.47s }

/* ---------- wizard: passos deslizam, opção escolhida "assenta" ---------- */
.wiz-step{ animation:cpStep .5s var(--ease-out) both; }
@keyframes cpStep{ from{ opacity:0; transform:translateX(28px) } to{ opacity:1; transform:none } }
.opt-card{ transition:transform .35s var(--ease-spring), border-color .25s, background .25s, box-shadow .3s; }
.opt-card.sel{ transform:translateY(-2px) scale(1.015); box-shadow:0 14px 34px -14px rgba(240,160,50,.55); }
.opt-card.sel::after{ animation:cpPop .45s var(--ease-spring) both; }
@keyframes cpPop{ from{ transform:scale(0) rotate(-40deg) } to{ transform:scale(1) rotate(0) } }
.wiz-progress i,.wiz-progress b,.wiz-progress span{ transition:background .4s, transform .4s var(--ease-spring); }

/* ---------- FAQ: abre com suavidade ---------- */
details{ transition:border-color .3s, background .3s; }
details[open]{ border-color:rgba(242,168,62,.35); background:linear-gradient(180deg, rgba(242,168,62,.05), var(--card)); }
details p{ animation:cpRise .45s var(--ease-out) both; }
details summary::after{ transition:transform .4s var(--ease-spring), color .2s; }
details:hover summary::after{ transform:scale(1.2); }
details[open] summary::after{ transform:rotate(135deg); }

/* ---------- módulos-chip pulsam ao passar ---------- */
.module-chip{ transition:transform .3s var(--ease-spring), border-color .25s, background .25s; }
.module-chip:hover{ transform:translateY(-2px) scale(1.04); border-color:rgba(242,168,62,.5); background:var(--grad-soft); }

/* ---------- preço em destaque respira ---------- */
.price-card.hot .flag{ animation:cpFlag 3s ease-in-out infinite; }
@keyframes cpFlag{ 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(-3px) } }

/* ---------- tipografia e detalhes ---------- */
h1,h2,.gate-title{ text-wrap:balance; }
::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--card2), #2e261c); border-radius:10px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--brand2); }
.eyebrow::before{ animation:cpLine 1s var(--ease-out) both; transform-origin:left; }
@keyframes cpLine{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

@media (prefers-reduced-motion: reduce){
  .cp-grain,.cp-glow,.cp-wipe{ display:none !important; }
  .xp-gate .gate-bg img,.xp-gate::before,.xp-gate .gate-inner > *,.hub-grid .hub-card,.wiz-step,.price-card.hot .flag,.season-card{ animation:none !important; opacity:1 !important; transform:none !important; }
}
@media (max-width:720px){ .cp-glow{ display:none } .cp-grain{ opacity:.04 } }

/* ---------- acessibilidade: sem movimento se o sistema pedir ---------- */
@media (prefers-reduced-motion: reduce){
  .view,.modal,.hero > div:first-child > *,.hero-stage .phone,.hero h1 em,#cpRetro .rt-word,#cpRetro .rt-in,#cpRetro .rt-stage,.cp-player{ animation:none !important; opacity:1 !important; transform:none !important; }
  .cp-reveal,.cp-reveal > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn::after{ display:none; }
  html{ scroll-behavior:auto; }
}