/* Hero — extras: intro de entrada (fullscreen) + card com tilt 3D (como as landing pages). */

/* ---------- Intro (animação de entrada) — fullscreen, tapa o header ---------- */
.hero-intro {
  position: fixed; inset: 0; z-index: 10001; display: none;
  flex-direction: column; align-items: center; justify-content: flex-start;
  background: #06080c;
}
.hero-intro.is-playing { display: flex; }
.hero-intro.is-done { animation: heroIntroOut .6s var(--ease-out-expo, ease) forwards; }
.hero-intro-inner { display: flex; flex-direction: column; align-items: center; margin-top: 200px; }
.hero-intro-logo { width: clamp(170px, 20vw, 250px); height: auto; opacity: 0; }
.hero-intro.is-playing .hero-intro-logo { animation: heroWordIn .6s ease forwards; }
.hero-intro-list {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(6px, 1.4vh, 14px); text-align: center; margin-top: clamp(36px, 7vh, 80px);
}
.hero-intro.is-playing .hero-intro-word {
  opacity: 0; transform: translateY(16px);
  animation: heroWordIn .55s ease forwards; animation-delay: calc(.55s + var(--i) * .3s);
}
.hero-intro-word {
  font-family: var(--font-display, sans-serif); font-weight: 700;
  font-size: clamp(1.7rem, 6vw, 3.4rem); letter-spacing: .04em; color: #f2f2f4;
}
.hero-intro-word:nth-child(3) { color: var(--acc); }
.hero-intro-word:nth-child(4) { color: var(--acc-orange); }
.hero-intro.is-collapsing .hero-intro-inner {
  transition: transform .75s var(--ease-out-expo, ease), opacity .75s ease;
  transform: scale(.6) translateY(-4vh); opacity: 0;
}
@keyframes heroWordIn { to { opacity: 1; transform: translateY(0); } }
@keyframes heroIntroOut { to { opacity: 0; visibility: hidden; } }
@media (max-width: 860px) { .hero-intro-inner { margin-top: 100px; } }

/* ---------- Card do hero com tilt 3D (mesma interação das caixas das landing pages) ---------- */
.hero-card {
  --tilt-x: 0deg; --tilt-y: 0deg; --lift: 0px;
  position: relative; width: min(580px, 96%); aspect-ratio: 3.8 / 5; margin: 0 auto;
  border-radius: clamp(30px, 4vw, 54px); overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 46px 140px rgba(0,0,0,.72), 0 0 70px rgba(32,136,202,.14);
  transform-style: preserve-3d; will-change: transform;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1);
}
.hero-card.is-hover { --lift: -6px; box-shadow: 0 60px 160px rgba(0,0,0,.78), 0 0 96px rgba(32,136,202,.3); }
.hero-card img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: saturate(.86) contrast(1.1) brightness(.84);
  -webkit-user-drag: none; pointer-events: none;
}

/* Realce do H1 a azul (sem dourado). */
.hero-cinematic.hero-value h1 .hero-hl { color: var(--acc); }

@media (prefers-reduced-motion: reduce) {
  .hero-intro { display: none !important; }
  .hero-card { transition: none; transform: none; }
}