/* ============================================================
   DB Films — Luxury Animation & Motion Design System
   High-performance, hardware-accelerated reveals & transitions
   ============================================================ */


/* ─── Reveal Up (Silky hardware-accelerated entrance) ───────── */
.reveal-up {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-up.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Reveal Fade ───────────────────────────────────────────── */
.reveal-fade {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity;
}

.reveal-fade.revealed {
    opacity: 1;
}

/* ─── Reveal Mask (High-fashion smooth reveal) ──────────────── */
.reveal-mask {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-mask.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Split Text Heading Reveals ────────────────────────────── */
.split-text {
    overflow: hidden;
    display: block;
}

.split-text .line {
    overflow: hidden;
    display: block;
}

.split-text .line-inner {
    display: block;
    transform: translateY(105%);
    transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.split-text.revealed .line-inner,
.split-text.revealed {
    transform: translateY(0);
}

/* Heading entrance fallback when JS split is ready */
.split-text.reveal-ready {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.split-text.reveal-ready.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Parallax Container ────────────────────────────────────── */
.parallax-container {
    overflow: hidden;
    position: relative;
}

.parallax-img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ─── Hero Cinematic Ken Burns Subtle Drift ──────────────────── */
.hero__slide.is-active .hero__image {
    animation: kenBurnsLuxury 14s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    will-change: transform;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
}

@keyframes kenBurnsLuxury {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1.04);
    }
}

/* ─── Stagger Delay Support ─────────────────────────────────── */
[style*="--delay"] {
    transition-delay: var(--delay, 0s);
}

/* ─── Luxury Micro-Interactions & Accents ───────────────────── */
.nav__link {
    position: relative;
}
.nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__link:hover::after,
.nav__link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Play button pulse */
.film-row__play circle {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.4s ease, opacity 0.4s ease;
    transform-origin: center;
}
.film-row__video:hover .film-row__play circle {
    transform: scale(1.1);
    stroke: var(--color-gold);
    opacity: 1;
}

/* ─── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .reveal-up,
    .reveal-fade,
    .reveal-mask,
    .split-text.reveal-ready {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
    
    .split-text .line-inner {
        transform: none !important;
        transition: none !important;
    }
    
    .marquee__track {
        animation: none !important;
    }
    
    .hero__slide.is-active .hero__image {
        animation: none !important;
    }
}