/* ============================================================
   ALPHA7 — v7 : camada cinematográfica
   Profundidade 3D, grão de filme, entrada de cena, shimmer
   Tudo gated em prefers-reduced-motion / body.no-motion
   ============================================================ */

/* ---------- BARRA DE PROGRESSO DE LEITURA ---------- */
.cine-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  z-index: 90; pointer-events: none; transform-origin: left;
  background: var(--gold-grad); transform: scaleX(0);
  box-shadow: 0 0 12px -2px var(--gold);
}

/* ---------- GRÃO DE FILME + VINHETA (muito sutis) ---------- */
.cine-grain {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: cine-grain-shift 1.2s steps(3) infinite;
}
@keyframes cine-grain-shift {
  0% { background-position: 0 0; }
  33% { background-position: 40px -25px; }
  66% { background-position: -30px 35px; }
  100% { background-position: 0 0; }
}
.cine-vignette {
  position: fixed; inset: 0; z-index: 69; pointer-events: none;
  background: radial-gradient(130% 110% at 50% 45%, transparent 62%, rgba(0,0,0,0.28) 100%);
}
@media (prefers-reduced-motion: reduce) { .cine-grain { animation: none; } }
body.no-motion .cine-grain { animation: none; }

/* ---------- HERO: ENTRADA DE CENA + CÂMERA LENTA ---------- */
@media (prefers-reduced-motion: no-preference) {
  body:not(.no-motion) .hero .bgvideo,
  body:not(.no-motion) .hero .vposter {
    animation: cine-kenburns 36s ease-in-out infinite alternate;
  }
  body:not(.no-motion) .hero .eyebrow  { animation: cine-rise 1s var(--ease) .15s both; }
  body:not(.no-motion) .hero h1        { animation: cine-rise 1.1s var(--ease) .3s both; }
  body:not(.no-motion) .hero .lead     { animation: cine-rise 1.1s var(--ease) .5s both; }
  body:not(.no-motion) .hero .hero-actions { animation: cine-rise 1.1s var(--ease) .68s both; }
  body:not(.no-motion) .hero .hero-creds   { animation: cine-rise 1.1s var(--ease) .85s both; }
  body:not(.no-motion) .hero-bar { animation: cine-fade 1.4s var(--ease) 1.1s both; }
}
@keyframes cine-kenburns {
  from { transform: scale(1.02) translate3d(0,0,0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}
@keyframes cine-rise {
  from { opacity: 0; transform: translateY(34px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes cine-fade { from { opacity: 0; } to { opacity: 1; } }

/* shimmer dourado discreto no sub-título do hero */
@media (prefers-reduced-motion: no-preference) {
  body:not(.no-motion) .hero h1 .sub-line {
    background: linear-gradient(100deg, var(--gold-lt) 40%, #fff7e0 50%, var(--gold-lt) 60%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: cine-shimmer 6.5s var(--ease) infinite;
  }
}
@keyframes cine-shimmer {
  0%, 55% { background-position: 120% 0; }
  85%, 100% { background-position: -60% 0; }
}

/* ---------- REVEAL CINEMATOGRÁFICO (profundidade + foco) ---------- */
@media (prefers-reduced-motion: no-preference) {
  body:not(.no-motion) .reveal {
    transform: translateY(var(--reveal-y)) scale(.985);
    filter: blur(5px);
    transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
  }
  body:not(.no-motion) .reveal.in { transform: none; filter: blur(0); }
}

/* ---------- TILT 3D NOS CARDS (JS define --rx/--ry/--mx/--my) ---------- */
.tilt {
  transform-style: preserve-3d;
  will-change: transform;
}
body:not(.no-motion) .tilt.tilting {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px);
  transition: none;
}
.tilt .tilt-glare {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  opacity: 0; border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(230,207,148,0.12), transparent 65%);
  transition: opacity .4s var(--ease);
}
.tilt.tilting .tilt-glare { opacity: 1; }

/* ---------- VARREDURA DE LUZ NOS BOTÕES DOURADOS ---------- */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 46%;
  left: -60%; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  body:not(.no-motion) .btn-gold::after { animation: cine-sweep 5.2s var(--ease) infinite; }
}
@keyframes cine-sweep {
  0%, 72% { left: -60%; }
  100% { left: 130%; }
}

/* ---------- GLOBO 3D (mercados conectados) ---------- */
.gband-3d {
  position: absolute; right: -3%; top: 50%; transform: translateY(-50%);
  width: min(52%, 700px); aspect-ratio: 1 / 1; z-index: 1;
  cursor: grab; touch-action: pan-y;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 55%, transparent 78%);
          mask-image: radial-gradient(70% 70% at 50% 50%, #000 55%, transparent 78%);
}
.gband-3d.grabbing { cursor: grabbing; }
.gband-3d canvas { width: 100% !important; height: 100% !important; display: block; }
@media (min-width: 1081px) { .gband--3d .gband-routes { display: none; } }
@media (max-width: 1080px) { .gband-3d { display: none; } }

/* ---------- PROFUNDIDADE EXTRA NAS BANDAS ---------- */
.vband, .pband { transform-style: preserve-3d; }
.vband .vband-inner, .pband .pband-frame { will-change: transform; }