/* ============================================================
   hero-cinematic.css — Hero fullscreen com video/foto + word reveal
   Módulo opcional do template Jornada Ads PRO.
   Inclua junto com scroll-animations.css.

   Zero dependência. CSS puro + clip-path + keyframes.
   ============================================================ */

/* ---- Overlay com tensão dramática ---- */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 19, 25, 1);
  z-index: 1;
  animation: hero-overlay-reveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

@keyframes hero-overlay-reveal {
  to {
    background: linear-gradient(
      to bottom,
      rgba(15, 19, 25, 0.88) 0%,
      rgba(15, 19, 25, 0.80) 40%,
      rgba(15, 19, 25, 0.90) 100%
    );
  }
}

/* Customizar cor do overlay via variável CSS:
   :root { --hero-overlay-rgb: 15, 19, 25; }
   e usar rgba(var(--hero-overlay-rgb), ...) */

/* ---- Text shadow pra legibilidade sobre vídeo/foto ---- */
.hero-text-shadow {
  text-shadow:
    0 2px 20px rgba(0, 0, 0, 0.8),
    0 4px 40px rgba(0, 0, 0, 0.5);
}

/* ---- Word reveal com clip-path ---- */
.word-reveal {
  display: inline-block;
  clip-path: inset(100% 0 0 0);
  transform: translateY(40px);
  opacity: 0;
  transition:
    clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s ease;
}

.word-reveal.is-visible {
  clip-path: inset(0);
  transform: translateY(0);
  opacity: 1;
}

/* Delays por palavra — aplicar via style="transition-delay: Xs" inline
   ou via classes .word-delay-1 a .word-delay-10 abaixo */
.word-delay-1  { transition-delay: 0.6s; }
.word-delay-2  { transition-delay: 0.75s; }
.word-delay-3  { transition-delay: 0.9s; }
.word-delay-4  { transition-delay: 1.05s; }
.word-delay-5  { transition-delay: 1.2s; }
.word-delay-6  { transition-delay: 1.35s; }
.word-delay-7  { transition-delay: 1.5s; }
.word-delay-8  { transition-delay: 1.65s; }
.word-delay-9  { transition-delay: 1.8s; }
.word-delay-10 { transition-delay: 1.95s; }

/* ---- Sub-elementos (badge, subtitle, checklist, CTAs) ---- */
.hero-sub {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-sub.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay pra cada sub-elemento — aparecem após o headline */
.hero-sub-1 { transition-delay: 1.8s; }
.hero-sub-2 { transition-delay: 2.0s; }
.hero-sub-3 { transition-delay: 2.2s; }
.hero-sub-4 { transition-delay: 2.4s; }
.hero-sub-5 { transition-delay: 2.6s; }

/* ---- Scroll indicator ---- */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  animation: scroll-indicator-fadein 0.5s ease 3s forwards;
  transition: opacity 0.4s ease;
}

.scroll-indicator.is-hidden {
  opacity: 0 !important;
}

.scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, currentColor, transparent);
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.4);
}

.scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 50%;
  background: currentColor;
  animation: scroll-line-move 1.8s ease-in-out infinite;
}

@keyframes scroll-line-move {
  0%   { top: -50%; }
  100% { top: 100%; }
}

@keyframes scroll-indicator-fadein {
  to { opacity: 1; }
}

/* ---- Acessibilidade ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-overlay {
    animation: none;
    background: rgba(15, 19, 25, 0.85);
  }
  .word-reveal {
    clip-path: none;
    transform: none;
    opacity: 1;
    transition: none;
  }
  .hero-sub {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .scroll-indicator {
    animation: none;
    opacity: 1;
  }
  .scroll-line::after {
    animation: none;
  }
}