/* ============================================================
   INTRO — Cortina Cinematográfica
   3.0s de sequência → split shutter abre revelando o hero
   já em movimento por trás.
   ============================================================ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
}
body.intro-locked { overflow: hidden; }

/* ===== Shutters (duas metades que formam a cortina) ===== */
.intro__shutter {
  position: absolute;
  left: 0; right: 0;
  height: 50.2%;
  background: radial-gradient(120% 100% at 50% 50%, #0b1b33 0%, #050a18 60%, #000 100%);
  will-change: transform;
  transition: transform 0.9s cubic-bezier(.76,0,.24,1);
}
.intro__shutter--top { top: 0; transform: translateY(0); }
.intro__shutter--bot { bottom: 0; transform: translateY(0); }
.intro.is-out .intro__shutter--top { transform: translateY(-100%); }
.intro.is-out .intro__shutter--bot { transform: translateY(100%); }

/* Filete azul luminoso na fenda quando a cortina abre */
.intro__shutter--top::after,
.intro__shutter--bot::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(46,111,184,0) 18%, rgba(46,111,184,.95) 50%, rgba(46,111,184,0) 82%, transparent 100%);
  opacity: 0;
  transition: opacity .35s ease;
}
.intro__shutter--top::after { bottom: 0; }
.intro__shutter--bot::before { top: 0; }
.intro.is-out .intro__shutter--top::after,
.intro.is-out .intro__shutter--bot::before { opacity: 1; }

/* ===== Grain + vignette ===== */
.intro__grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: overlay;
  opacity: .55;
  pointer-events: none;
  animation: introGrain 1.8s steps(6) infinite;
}
@keyframes introGrain {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-2px,1px); }
  40%  { transform: translate(1px,-2px); }
  60%  { transform: translate(-1px,2px); }
  80%  { transform: translate(2px,-1px); }
  100% { transform: translate(0,0); }
}
.intro__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.65) 100%);
  pointer-events: none;
}

/* ===== Stage central ===== */
.intro__inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(20px, 3vw, 36px);
  padding: 0 24px;
  color: #F5F2EA;
  text-align: center;
  transition: opacity .5s ease, transform .9s cubic-bezier(.76,0,.24,1);
}
.intro.is-out .intro__inner {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .35s ease, transform .9s cubic-bezier(.76,0,.24,1);
}

/* ===== Eyebrow ===== */
.intro__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 242, 234, .85);
  opacity: 0;
  animation: introFadeIn .8s ease .25s forwards;
}
.intro__eyebrow-line {
  display: inline-block;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #2E6FB8 50%, transparent);
  animation: introLineDraw 1s cubic-bezier(.76,0,.24,1) .35s forwards;
}
.intro__eyebrow-text { white-space: nowrap; }
@keyframes introLineDraw { to { width: clamp(60px, 12vw, 140px); } }

/* ===== Logo — clip-path reveal (bottom→top) ===== */
.intro__logo-wrap {
  display: block;
  width: min(72vw, 380px);
}
.intro__logo {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  clip-path: inset(100% 0 0 0);
  transform: scale(1.06);
  opacity: 0;
  animation:
    introLogoReveal 1.1s cubic-bezier(.76,0,.24,1) .7s forwards,
    introLogoScale 1.6s cubic-bezier(.2,.7,.2,1) .7s forwards;
}
@keyframes introLogoReveal {
  0%   { clip-path: inset(100% 0 0 0); opacity: 0; }
  10%  { opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes introLogoScale { to { transform: scale(1); } }

/* ===== Tagline ===== */
.intro__tagline {
  margin: 0;
  font-family: 'Fraunces', 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: rgba(245, 242, 234, .92);
  max-width: 22ch;
  opacity: 0;
  transform: translateY(14px);
  animation: introTagline .9s cubic-bezier(.2,.7,.2,1) 1.3s forwards;
}
.intro__tagline em {
  font-style: italic;
  color: #6BA3DE;
  font-weight: 400;
}
@keyframes introTagline { to { opacity: 1; transform: translateY(0); } }

/* ===== Meta line ===== */
.intro__meta {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 242, 234, .55);
  opacity: 0;
  animation: introFadeIn .8s ease 1.8s forwards;
}
.intro__meta-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: #2E6FB8;
  display: inline-block;
}

@keyframes introFadeIn { to { opacity: 1; } }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .intro__shutter { transition: none; }
  .intro__inner, .intro__eyebrow, .intro__eyebrow-line,
  .intro__logo, .intro__tagline, .intro__meta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .intro__eyebrow-line { width: clamp(60px, 12vw, 140px); }
  .intro__grain { animation: none; }
}