/* ============================================
   PREMIUM ANIMATIONS - APPLE STYLE
   High-end scroll interactions and micro-animations
   ============================================ */

:root {
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* ============================================
   TEXT REVEAL ANIMATIONS
   ============================================ */

.reveal-text {
    position: relative;
    overflow: hidden;
    display: block;
}

.reveal-text .word {
    display: inline-block;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 1s var(--ease-out-expo), opacity 1s var(--ease-out-quart);
    will-change: transform, opacity;
}

.reveal-text.visible .word {
    transform: translateY(0);
    opacity: 1;
}

/* Stagger delays are handled by JS, but generic classes helpers */
.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

/* ============================================
   SCROLL PARALLAX & SCALE
   ============================================ */

.parallax-wrapper {
    position: relative;
    overflow: hidden;
}

.parallax-img {
    will-change: transform;
    transform: scale(1.1);
    transition: transform 0.1s linear;
    /* Smoothness handled by JS usually, or CSS scroll-timeline */
}

.scale-on-scroll {
    opacity: 0;
    transform: scale(0.95) translateY(30px);
    transition: all 1.2s var(--ease-out-expo);
}

.scale-on-scroll.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ============================================
   FADE UP REVEAL
   ============================================ */

.fade-up-stagger {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-out-quart), transform 0.8s var(--ease-out-quart);
}

.fade-up-stagger.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   MAGNETIC BUTTONS
   ============================================ */

.magnetic-btn {
    display: inline-block;
    transition: transform 0.3s var(--ease-out-quart);
}

/* ============================================
   GLASS CLONE EFFECT (For Sticky Headers)
   ============================================ */

.glass-clone {
    background: rgba(10, 10, 10, 0.7);
    /* Darker for dark theme */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================
   IMAGE REVEAL SHUTTERS
   ============================================ */

.shutter-image {
    position: relative;
    overflow: hidden;
}

.shutter-image img {
    opacity: 0;
    transform: scale(1.1);
    transition: all 1.5s var(--ease-out-expo);
}

.shutter-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--black-primary);
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 1.2s var(--ease-out-expo);
    z-index: 2;
}

.shutter-image.visible img {
    opacity: 1;
    transform: scale(1);
}

.shutter-image.visible::after {
    transform: scaleY(0);
}

/* ============================================
   SMOOTH MARQUEE
   ============================================ */

.marquee-container {
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: inline-block;
    animation: marquee 20s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ============================================
   CUSTOM CURSOR (Desktop Only)
   ============================================ */

@media (min-width: 992px) {
    .custom-cursor {
        width: 20px;
        height: 20px;
        border: 1px solid var(--gold-metallic);
        border-radius: 50%;
        position: fixed;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: width 0.3s, height 0.3s, background-color 0.3s;
        mix-blend-mode: difference;
    }

    .custom-cursor.hovered {
        width: 50px;
        height: 50px;
        background-color: rgba(212, 175, 55, 0.2);
        border-color: transparent;
    }
}