/* Explain: Styles for homepage video hero and scroll-reveal transitions. */
/* ============================================================
   Motion — video hero backgrounds + scroll reveal transitions
   ============================================================ */

/* Homepage video hero */
.hero-video-section {
    background: var(--background-color);
}

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

.hero-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.hero-media video.is-active {
    opacity: 1;
}

.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(242, 246, 251, 0.98) 0%, rgba(232, 240, 249, 0.94) 34%, rgba(210, 226, 242, 0.70) 66%, rgba(74, 144, 217, 0.36) 100%);
}

@media (max-width: 767px) {
    .hero-media {
        opacity: 0.85;
    }

    .hero-scrim {
        background: linear-gradient(180deg, rgba(242, 246, 251, 0.98) 0%, rgba(235, 242, 250, 0.95) 55%, rgba(198, 217, 238, 0.82) 100%);
    }
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(140px) scale(0.88);
    filter: blur(18px);
    transition: opacity 1500ms cubic-bezier(0.22, 1, 0.36, 1), transform 1500ms cubic-bezier(0.22, 1, 0.36, 1), filter 1500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.reveal-card {
    opacity: 0;
    transform: translateY(130px) scale(0.78);
    filter: blur(16px);
    transition: opacity 1400ms cubic-bezier(0.22, 1, 0.36, 1), transform 1400ms cubic-bezier(0.22, 1, 0.36, 1), filter 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-card,
    .hero-media video {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}