/* ==========================================================================
   ANIMATIONS - Scroll reveals, hover effects, transitions
   ========================================================================== */

/* ===== REVEAL ANIMATIONS ===== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s var(--ease-apple), transform 0.9s var(--ease-apple);
    transition-delay: calc(var(--delay, 0) * 1ms);
}

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

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.9s var(--ease-apple), transform 0.9s var(--ease-apple);
}

.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.9s var(--ease-apple), transform 0.9s var(--ease-apple);
}

.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.9s var(--ease-apple), transform 0.9s var(--ease-apple);
}

.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ===== TEXT REVEAL ===== */
.reveal-text span {
    display: block;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s var(--ease-apple), transform 1s var(--ease-apple);
}

.reveal-text span:nth-child(1) { transition-delay: 0s; }
.reveal-text span:nth-child(2) { transition-delay: 0.15s; }
.reveal-text span:nth-child(3) { transition-delay: 0.3s; }
.reveal-text span:nth-child(4) { transition-delay: 0.45s; }

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

/* ===== MARQUEE (optional) ===== */
.marquee {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    padding: 20px 0;
}

.marquee-content {
    display: flex;
    animation: marquee 30s linear infinite;
    gap: 60px;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ===== GLOW EFFECT ===== */
.glow {
    position: relative;
}

.glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-radius: inherit;
    opacity: 0;
    filter: blur(20px);
    z-index: -1;
    transition: opacity 0.4s;
}

.glow:hover::before {
    opacity: 0.6;
}

/* ===== TILT ON HOVER (3D) ===== */
.tilt {
    transform-style: preserve-3d;
    transition: transform 0.5s var(--ease-apple);
}

.tilt-inner {
    transform: translateZ(20px);
}

/* ===== LOADER ===== */
.loader {
    position: fixed;
    inset: 0;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.6s var(--ease-apple), visibility 0.6s;
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-shield {
    width: 80px;
    height: 80px;
    color: var(--gold);
    animation: shieldPulse 1.5s var(--ease-apple) infinite;
}

@keyframes shieldPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

/* ===== HOVER EFFECTS ===== */
.hover-lift {
    transition: transform 0.4s var(--ease-apple);
}

.hover-lift:hover {
    transform: translateY(-8px);
}

/* ===== GRADIENT ANIMATION ===== */
.gradient-animated {
    background: linear-gradient(
        270deg,
        var(--gold),
        var(--gold-bright),
        var(--gold-dark),
        var(--gold)
    );
    background-size: 300% 300%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ===== COUNT UP ANIMATION ===== */
.count-up {
    font-variant-numeric: tabular-nums;
}

/* ===== PAGE TRANSITIONS ===== */
.page-transition {
    animation: pageEnter 0.8s var(--ease-apple);
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== WIZARD STEP TRANSITIONS ===== */
.wizard-step {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.5s var(--ease-apple);
    pointer-events: none;
}

.wizard-step.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.wizard-step.exiting {
    opacity: 0;
    transform: translateX(-40px);
}

/* ===== SHIMMER LOADING ===== */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer {
    background: linear-gradient(
        90deg,
        var(--graphite) 0%,
        var(--steel) 50%,
        var(--graphite) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ===== PULSE DOT ===== */
.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-green);
    border-radius: 50%;
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(22, 163, 74, 0);
    }
}

/* ===== FADE IN ===== */
.fade-in {
    animation: fadeIn 0.6s var(--ease-apple);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== SLIDE IN ===== */
.slide-in-up {
    animation: slideInUp 0.6s var(--ease-apple);
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== MOUSE PARALLAX ===== */
.parallax-element {
    transition: transform 0.1s linear;
}

/* ===== NOISE TEXTURE ===== */
.noise {
    position: relative;
}

.noise::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-text span {
        opacity: 1 !important;
        transform: none !important;
    }
}