/* ===== CENA 1 — Abertura cinematográfica viva ===== */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}

.hero-bg{
  position:absolute;inset:-4%;width:108%;height:108%;
  object-fit:cover;object-position:center 16%;
  filter:saturate(.72) hue-rotate(6deg) brightness(.6) contrast(1.1);
  animation:breathe 10s ease-in-out infinite;will-change:transform;
}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.fog{position:absolute;top:0;height:100%;width:65%;pointer-events:none;filter:blur(26px);mix-blend-mode:screen;opacity:.5}
.fog1{left:-12%;background:radial-gradient(50% 50% at 50% 55%,rgba(120,200,195,.22),transparent 70%);animation:fogA 19s ease-in-out infinite alternate}
.fog2{right:-12%;background:radial-gradient(50% 50% at 50% 45%,rgba(90,150,170,.18),transparent 70%);animation:fogB 26s ease-in-out infinite alternate}
@keyframes fogA{0%{transform:translateX(-12%)}100%{transform:translateX(12%)}}
@keyframes fogB{0%{transform:translateX(10%)}100%{transform:translateX(-14%)}}

.hero-spot{position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 30%,rgba(120,210,200,.10),transparent 55%);animation:glow 7s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.25}50%{opacity:.5}}

.hero-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,10,12,.35) 0%,transparent 30%,rgba(0,8,10,.5) 68%,rgba(0,6,8,.96) 100%),
  linear-gradient(90deg,rgba(0,7,9,.55) 0%,transparent 26%,transparent 74%,rgba(0,7,9,.55) 100%);
}
/* Telas largas: afunila o foco no centro (vinheta lateral) e sobe pro rosto,
   recriando a intimidade do formato retrato em widescreen. */
@media (min-width:1100px){
  .hero-bg{object-position:center 20%}
  .hero-veil{background:
    linear-gradient(180deg,rgba(0,10,12,.35) 0%,transparent 30%,rgba(0,8,10,.5) 66%,rgba(0,6,8,.96) 100%),
    linear-gradient(90deg,rgba(0,6,8,.92) 0%,rgba(0,6,8,.4) 17%,transparent 37%,transparent 63%,rgba(0,6,8,.4) 83%,rgba(0,6,8,.92) 100%);
  }
}

.hero-nav{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:22px 30px}
.hero-logo{font-weight:700;font-size:22px;letter-spacing:2px;color:#fff}
.hero-links{display:flex;gap:24px}
.hero-links a{font-weight:300;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft);transition:color .3s}
.hero-links a:hover{color:var(--teal)}

.hero-center{position:absolute;left:0;right:0;bottom:14%;z-index:3;text-align:center;padding:0 20px}
.hero-pre{font-size:13px;letter-spacing:5px;text-transform:uppercase;color:var(--ink-soft);opacity:.9;margin-bottom:10px}
.hero-title{font-size:clamp(52px,11vw,120px);font-weight:700;letter-spacing:7px;line-height:.9;color:var(--ink);text-shadow:0 4px 44px rgba(0,0,0,.6)}
.hero-sub{font-size:19px;color:#cdd8d6;opacity:.85;margin-top:14px}

.hero-scroll{position:absolute;bottom:24px;left:0;right:0;z-index:3;text-align:center;color:#6f8a86;font-size:11px;letter-spacing:3px;text-transform:uppercase;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

@media (prefers-reduced-motion:reduce){
  .hero-bg,.fog1,.fog2,.hero-spot,.hero-scroll{animation:none}
}