/* Explain: Styling for video cards, modals, and interactive elements. - */
.eyebrow {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.hero-cinematic {
    position: relative;
    z-index: 70;
    isolation: isolate;
}

/* Modais de Vídeo */
.video-modal {
    z-index: 1000;
}

.video-modal::backdrop {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.video-card {
    transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.video-card:hover {
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 0 25px color-mix(in srgb, var(--primary-color) 40%, transparent);
}

.play-icon-wrapper {
    box-shadow: 0 0 15px color-mix(in srgb, var(--secondary-color) 50%, transparent);
    transition: transform 300ms ease;
}

.video-card:hover .play-icon-wrapper {
    transform: scale(1.15);
    box-shadow: 0 0 25px var(--primary-color);
}