Staggered Reveal Animations for Page Hero and Featured Sections
   ========================================================================== */

/* Override parent container to prevent compound shift and blur animations on generic reveal */
.page-hero-banner.reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

/* 3D Entry Zoom on Load for Banner Card */
.page-hero-banner .banner-card {
    opacity: 0;
    transform: perspective(1200px) translateY(120px) rotateX(12deg) scale(0.9);
    filter: blur(15px);
    transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.8s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

.page-hero-banner.is-visible .banner-card {
    opacity: 1;
    transform: perspective(1200px) translateY(0) rotateX(0deg) scale(1);
    filter: blur(0);
}

/* 1. Page Hero Banner Copy Stagger */
.page-hero-banner .banner-copy > * {
    opacity: 0;
    transform: perspective(1000px) translateY(80px) rotateX(-20deg) scale(0.92);
    filter: blur(8px);
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.5s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

.page-hero-banner.is-visible .banner-copy > * {
    opacity: 1;
    transform: perspective(1000px) translateY(0) rotateX(0) scale(1);
    filter: blur(0);
}

.page-hero-banner.is-visible .banner-copy .metric-label {
    transition-delay: 200ms;
}

.page-hero-banner.is-visible .banner-copy h1 {
    transition-delay: 380ms;
}

.page-hero-banner.is-visible .banner-copy .page-lead {
    transition-delay: 560ms;
}

/* 2. Featured Section (cinematic-feature) Element Stagger */

/* Override parent container to prevent compound shift and blur animations */
.cinematic-feature.reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

/* Background video: Camera Zoom Out and autofocus entrance */
.cinematic-feature .work-media--feature-video {
    opacity: 0;
    transform: scale(1.06);
    filter: blur(8px);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

.cinematic-feature.is-visible .work-media--feature-video {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* Details Panel: Glass panel sliding from left + progressive blur activation */
.cinematic-feature .cinematic-left {
    opacity: 0;
    transform: translateX(-40px);
    backdrop-filter: blur(0px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                backdrop-filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, backdrop-filter;
}

.cinematic-feature.is-visible .cinematic-left {
    opacity: 1;
    transform: translateX(0);
    backdrop-filter: blur(20px);
    transition-delay: 400ms;
}

/* Badge row & Title group slide and fade in */
.cinematic-feature .cinematic-badge-row,
.cinematic-feature .cinematic-title-group {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.cinematic-feature.is-visible .cinematic-badge-row {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 450ms;
}

.cinematic-feature.is-visible .cinematic-title-group {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 520ms;
}

/* Poetic description texts: Staggered subtitle-like reveal line by line */
.cinematic-feature .poetic-text-left .arc-line-left {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.cinematic-feature.is-visible .poetic-text-left .arc-line-left.l1 { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
.cinematic-feature.is-visible .poetic-text-left .arc-line-left.l2 { opacity: 1; transform: translateY(0); transition-delay: 700ms; }
.cinematic-feature.is-visible .poetic-text-left .arc-line-left.l3 { opacity: 1; transform: translateY(0); transition-delay: 800ms; }
.cinematic-feature.is-visible .poetic-text-left .arc-line-left.l4 { opacity: 1; transform: translateY(0); transition-delay: 900ms; }

/* Right-hand keyframe cards: Cascade entry bottom-up */
.cinematic-feature .keyframe-card {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    filter: blur(4px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

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

.cinematic-feature.is-visible .keyframe-card:nth-child(1) { transition-delay: 800ms; }
.cinematic-feature.is-visible .keyframe-card:nth-child(2) { transition-delay: 900ms; }
.cinematic-feature.is-visible .keyframe-card:nth-child(3) { transition-delay: 1000ms; }
.cinematic-feature.is-visible .keyframe-card:nth-child(4) { transition-delay: 1100ms; }

/* Custom green accent for Page Hero metric-label */
.page-hero-banner .banner-copy .metric-label {
    color: #4ea57f !important;
    border-color: rgba(78, 165, 127, 0.28) !important;
}