/* ============================================================
   BSC AI Factory — Hero Animation & Cinematic Reveal
   100dvh Layout, Dissolve Overlay Fade, LED Glow Effects
   ============================================================ */

/* ── 1. Hero 100dvh Container ──────────────────────────────── */
.hero-cinematic {
  position: relative;
  min-height: 100dvh;
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-color: #06080f;
  padding-top: 80px; /* nav offset */
}

/* ── 2. Background Image & Dark Overlay ────────────────────── */
.hero-media-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

/* ── 3. Dissolve Overlay (Fade Global Dissolvente) ─────────── */
.hero-overlay-dissolve {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #101010; 
  opacity: 1;
  animation: heroDissolveFade 5s cubic-bezier(0.7, 0, 0.84, 0) forwards;
  animation-delay: 0s;
  pointer-events: none;
}

@keyframes heroDissolveFade {
  0% {
    opacity: 1;
  }

  40% {
    opacity: 0.95;
  }

  70% {
    opacity: 0.7;
  }

  85% {
    opacity: 0.3;
  }

  100% {
    opacity: 0;
  }
}

/* Gradient mask over text area for max legibility (Left 0.85 opacity -> Right 0 opacity) */
.hero-text-protection {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(90deg, rgba(6, 8, 15, 0.95) 0%, rgba(6, 8, 15, 0.65) 40%, rgba(6, 8, 15, 0) 75%);
  pointer-events: none;
}

/* ── 4. Canvas LED Overlay Layer ────────────────────────────── */
.hero-led-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

/* ── 5. Content Z-Index Layer ──────────────────────────────── */
.hero-content-layer {
  position: relative;
  z-index: 10;
  width: 100%;
}

/* ── 6. Reduced Motion Fallback ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-overlay-dissolve {
    opacity: 0;
    animation: none;
  }
  .hero-bg-image {
    transition: none;
  }
}