/*
 * sections/hero.css
 *
 * Camadas (ordem de empilhamento):
 *   .hero-media    z 0  vídeo + overlay (aria-hidden, sem interação)
 *   .hero-inner    z 1  conteúdo textual e CTAs
 *   .site-header   z --z-header (fixed, fora do hero)
 *
 * Estado inicial da animação — EXCEÇÃO documentada ao progressive enhancement:
 * o texto do Hero está acima da dobra; se ficasse visível até o JS rodar,
 * haveria flash (visível → some → anima). Por isso, apenas sob html.js,
 * [data-hero-reveal] começa com opacity 0, com três redes de segurança:
 *   1. sem JS: não existe .js → texto visível;
 *   2. reduced motion: media query mantém o texto visível;
 *   3. módulo JS falhou: animação CSS de failsafe revela após 4s.
 * Quando sections/hero.js assume o controle, ele define data-hero-state no
 * .hero, o que desliga o failsafe (o JS passa a ser responsável).
 */

.hero {
    --color-focus: var(--color-on-dark);

    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    /* Fundo enquanto o vídeo carrega — mantém o texto branco legível. */
    background: var(--color-brand-navy);
    color: var(--color-on-dark);
}

/* Mídia */

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero[data-video-state="error"] .hero-video {
    display: none;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-overlay);
}

/* Conteúdo */

.hero-inner {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--header-height) + var(--space-lg));
    padding-bottom: var(--space-xl);
}

.hero-content {
    max-width: 40rem;
}

.hero-eyebrow {
    margin-bottom: var(--space-sm);
    color: var(--color-brand-orange-light);
    font-size: 0.875rem;
    font-weight: var(--font-weight-subheading);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-title {
    font-size: clamp(2.125rem, 1.4rem + 3.2vw, 4rem);
    font-weight: var(--font-weight-heading);
    letter-spacing: -0.02em;
}

.hero-description {
    max-width: 34rem;
    margin-top: var(--space-md);
    color: var(--color-on-dark-muted);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

/* Telas estreitas: CTAs empilhados em largura total. */
@media (max-width: 479px) {
    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }
}

/* Estado inicial da animação (ver cabeçalho) */

.js [data-hero-reveal] {
    opacity: 0;
    animation: hero-reveal-failsafe 600ms ease 4s forwards;
}

.js .hero[data-hero-state] [data-hero-reveal] {
    animation: none;
}

/* Revelado sem animação (reduced motion ou failsafe já concluído). */
.js .hero[data-hero-state="revealed"] [data-hero-reveal] {
    opacity: 1;
}

@keyframes hero-reveal-failsafe {
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .js [data-hero-reveal] {
        opacity: 1;
        animation: none;
    }
}