/* Hero Film — efeito de câmera de filmagem (interactive/visual)
   Carregado via index.html (ver <link>). */

.hero-film{
  width:min(360px, 36vw);
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 55%),
              radial-gradient(ellipse 70% 70% at 50% 20%, rgba(0,0,255,.22) 0%, transparent 60%),
              #070715;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
  transform: translateZ(0);
}

.hero-film__frame{
  position:absolute; inset:0;
  border:1.5px solid rgba(255,255,255,.14);
  border-radius: 18px;
}

/* Scanline vertical */
.hero-film__scan{
  position:absolute; inset:-30% -30%;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.08) 40%,
      rgba(255,255,255,0) 70%);
  opacity:.35;
  transform: translateY(-35%);
  animation: filmScan 3.4s linear infinite;
}
@keyframes filmScan{
  0%{ transform: translateY(-45%); }
  100%{ transform: translateY(45%); }
}

/* Grain */
.hero-film__grain{
  position:absolute; inset:0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="180" height="180" filter="url(%23n)" opacity="0.4"/></svg>');
  background-size: 240px 240px;
  mix-blend-mode: overlay;
  opacity: .18;
  animation: grainShift 1.3s steps(2) infinite;
}
@keyframes grainShift{
  0%{ transform: translate(0,0); }
  50%{ transform: translate(-6px, 4px); }
  100%{ transform: translate(0,0); }
}

/* Flares / light leaks */
.hero-film__flares{
  position:absolute; inset:-40% -30%;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,0,255,.25) 0%, transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(255,0,120,.14) 0%, transparent 48%),
    radial-gradient(circle at 55% 20%, rgba(255,255,255,.10) 0%, transparent 40%);
  opacity:.85;
  animation: flareDrift 6.5s ease-in-out infinite alternate;
}
@keyframes flareDrift{
  0%{ transform: translate(-1%, -1%) scale(1.02); }
  100%{ transform: translate(1.5%, 1%) scale(1.05); }
}

/* HUD */
.hero-film__hud{
  position:absolute; inset:auto 0 0 0;
  padding: 14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  background: linear-gradient(0deg, rgba(7,7,21,.85) 0%, rgba(7,7,21,.05) 100%);
}
.hero-film__t{
  font-family: var(--disp);
  color: rgba(255,255,255,.9);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .18em;
}
.hero-film__m{
  font-family: var(--disp);
  color: rgba(0,0,255,.95);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Cinematic vignette */
.hero-film::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(ellipse 70% 70% at 50% 50%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}

/* Interaction: move light with pointer (if enabled) */
@media (hover:hover){
  .hero-film{ cursor: none; }
  .hero-film[data-tilt="on"]{ cursor: none; }
}

@media (prefers-reduced-motion: reduce){
  .hero-film__scan, .hero-film__grain, .hero-film__flares{ animation:none !important; }
}