/* Cassiano & Martins — v2 FILME · canvas fixo + overlays de capítulo + HUD */
@import url('fonts/fonts.css');

:root{
  --rubi:#6a1015; --rubi-vivo:#8f1620; --rubi-fundo:#3d080b; --rubi-quase-preto:#25060a;
  --rubi-claro:#c2434e; --cobre:#b0875a; --cobre-claro:#c9a273; --filete-c:#bcb6ab;
  --creme:#f5f0e8; --creme-2:#efe7da; --tinta:#241014;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"EB Garamond",Georgia,serif; color:var(--creme); background:#1c0508;
  font-size:20px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}

/* ---------- o filme ---------- */
#bg3d{position:fixed;inset:0;width:100%;height:100%;z-index:0}
#track{height:800vh}          /* o trilho: o scroll move a câmera, não seções */

/* ---------- moldura de cinema ---------- */
.letterbox{position:fixed;left:0;right:0;height:3.6vh;background:#0d0204;z-index:6}
.lb-top{top:0}.lb-bottom{bottom:0}
.grain{position:fixed;inset:-10px;z-index:5;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E")}
.vignette{position:fixed;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(13,2,4,.55) 100%)}

/* ---------- HUD do percurso ---------- */
#hud{position:fixed;z-index:7;inset:0;pointer-events:none;font-family:"EB Garamond"}
.hud-left{position:absolute;left:4vw;bottom:6.5vh;display:flex;align-items:baseline;gap:14px}
.hud-label{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--cobre-claro);opacity:.85}
#hud-val{font-family:"Cormorant Garamond";font-size:30px;font-weight:600;color:var(--creme)}
#hud-cap{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--creme);opacity:.55}
.hud-track{position:absolute;right:3vw;top:14vh;bottom:14vh;width:2px;background:rgba(245,240,232,.14)}
#hud-bar{position:absolute;inset:0;background:linear-gradient(180deg,var(--cobre),var(--rubi-claro));
  transform-origin:top;transform:scaleY(0)}

.assinatura-local{position:fixed;top:5.6vh;right:4vw;z-index:7;font-size:12.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--cobre-claro);opacity:.85;font-family:"EB Garamond"}

/* ---------- capítulos (overlays sobre o filme) ---------- */
#ovl{position:fixed;inset:0;z-index:3;pointer-events:none}
.chapter{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:12vh 7vw;opacity:0;visibility:hidden}
.content{max-width:1040px}
.eyebrow{letter-spacing:.3em;text-transform:uppercase;font-size:13px;font-weight:500;margin-bottom:22px;color:var(--cobre-claro)}
.filete{width:66px;height:2px;background:var(--cobre);margin:0 0 28px}
h1,h2{font-family:"Cormorant Garamond";font-weight:600;line-height:1.04;letter-spacing:-.01em;
  text-shadow:0 2px 30px rgba(13,2,4,.55)}
h1{font-size:clamp(40px,7.2vw,90px)}
h2{font-size:clamp(31px,5.2vw,62px)}
.sub{font-size:clamp(18px,2.1vw,25px);max-width:44ch;margin-top:26px;color:#efe2da;
  text-shadow:0 1px 16px rgba(13,2,4,.6)}
.dica{margin-top:6vh;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--cobre-claro);
  opacity:.75;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.85}}

/* 3 portas (sobre o filme, translúcidas de vidro) */
.portas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:40px;max-width:980px}
.porta{background:rgba(20,4,7,.55);border:1px solid rgba(201,162,115,.35);border-top:2px solid var(--cobre);
  border-radius:4px;padding:26px 24px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.porta .n{font-family:"Cormorant Garamond";font-weight:700;font-size:42px;color:var(--cobre-claro);line-height:1}
.porta p{font-size:17.5px;margin-top:12px;color:#efe2da}

/* CTA */
.cta-title{font-size:clamp(34px,5.8vw,74px)}
.cta-wa{display:inline-flex;align-items:center;gap:12px;background:var(--rubi-claro);color:#fff;
  font-size:21px;padding:17px 40px;border-radius:2px;text-decoration:none;margin-top:36px;
  letter-spacing:.02em;pointer-events:auto;box-shadow:0 14px 40px -12px rgba(194,67,78,.8);
  transition:background .25s,transform .25s}
.cta-wa:hover{background:#d6555f;transform:translateY(-2px)}
.oab{margin-top:40px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--cobre-claro)}

/* ---------- fallback estático (reduced-motion / sem WebGL) ---------- */
body.static-mode #bg3d,body.static-mode #track,body.static-mode #hud,
body.static-mode .letterbox,body.static-mode .grain,body.static-mode .dica{display:none}
body.static-mode .vignette{display:none}
body.static-mode #ovl{position:static;pointer-events:auto}
body.static-mode .chapter{position:relative;min-height:100svh;opacity:1;visibility:visible}
body.static-mode .chapter:nth-child(odd){background:linear-gradient(155deg,var(--rubi-fundo),var(--rubi))}
body.static-mode .chapter:nth-child(even){background:var(--creme);color:var(--tinta)}
body.static-mode .chapter:nth-child(even) h1,body.static-mode .chapter:nth-child(even) h2{color:var(--tinta);text-shadow:none}
body.static-mode .chapter:nth-child(even) .sub{color:#5a3138;text-shadow:none}
body.static-mode .assinatura-local{position:absolute}

@media (max-width:640px){
  .chapter{padding:10vh 8vw}
  .letterbox{height:2.4vh}
  .hud-left{left:6vw;bottom:4.5vh}
  #hud-cap{display:none}
  .assinatura-local{font-size:10.5px;right:6vw}
  .sub{max-width:100%}
}