/* ============================================
   ANCIENT MUSEUM - ADVANCED ANIMATIONS
   Divine Light, Sacred Geometry, Lotus Blooms
   ============================================ */

/* Divine Light Rays */
.light-rays {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.light-ray {
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(201, 169, 97, 0.2), transparent);
    animation: light-beam 8s ease-in-out infinite;
    opacity: 0;
}

@keyframes light-beam {
    0%, 100% {
        opacity: 0;
        transform: translateY(-100%);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sacred Geometry Rotation */
.sacred-geometry {
    animation: rotate-sacred 60s linear infinite;
    opacity: 0.08;
}

@keyframes rotate-sacred {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Lotus Bloom Animation */
.lotus-bloom {
    position: relative;
    animation: bloom 3s ease-out forwards;
}

@keyframes bloom {
    0% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Floating Lotus Petals */
.lotus-petal {
    position: absolute;
    width: 40px;
    height: 40px;
    background: radial-gradient(ellipse, rgba(255, 192, 203, 0.6), rgba(255, 182, 193, 0.3));
    border-radius: 50% 0 50% 0;
    animation: petal-float 15s ease-in-out infinite;
    opacity: 0;
}

@keyframes petal-float {
    0% {
        transform: translateY(-50px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(100vh) translateX(100px) rotate(360deg);
        opacity: 0;
    }
}

/* Golden Particle Effect */
.golden-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, var(--primary-gold), transparent);
    border-radius: 50%;
    animation: particle-rise 6s ease-in-out infinite;
    opacity: 0;
}

@keyframes particle-rise {
    0% {
        transform: translateY(0) translateX(0) scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: translateY(-150px) translateX(var(--drift-x, 30px)) scale(1);
    }
    100% {
        transform: translateY(-300px) translateX(var(--drift-x, 60px)) scale(0.3);
        opacity: 0;
    }
}

/* Parallax Elements */
.parallax-layer {
    transition: transform 0.3s ease-out;
}

/* Fade In Up */
.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease, transform 1s ease;
}

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

/* Scale In */
.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Shimmer Effect */
.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer-slide 3s ease-in-out infinite;
}

@keyframes shimmer-slide {
    to {
        left: 100%;
    }
}

/* Glow Pulse */
.glow-pulse {
    animation: glow-effect 3s ease-in-out infinite;
}

@keyframes glow-effect {
    0%, 100% {
        box-shadow: 0 0 20px rgba(201, 169, 97, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(201, 169, 97, 0.6);
    }
}

/* Mandala Rotation */
.mandala-rotate {
    animation: mandala-spin 120s linear infinite;
}

@keyframes mandala-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Sacred Symbol Pulse */
.sacred-pulse {
    animation: sacred-beat 4s ease-in-out infinite;
}

@keyframes sacred-beat {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* Smooth Parallax */
.smooth-parallax {
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover Lift */
.hover-lift {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

/* Reveal Left */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s ease, transform 1s ease;
}

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

/* Reveal Right */
.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s ease, transform 1s ease;
}

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

/* Sacred Border Glow */
.border-glow {
    position: relative;
}

.border-glow::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        45deg,
        var(--primary-gold),
        var(--light-gold),
        var(--primary-gold)
    );
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: border-flow 3s linear infinite;
}

.border-glow:hover::after {
    opacity: 0.5;
}

@keyframes border-flow {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* Floating Animation */
.floating {
    animation: float-gentle 4s ease-in-out infinite;
}

@keyframes float-gentle {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* Ripple Effect on Click */
.ripple-container {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(201, 169, 97, 0.4);
    transform: scale(0);
    animation: ripple-expand 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-expand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Text Gradient Animation */
.text-gradient {
    background: linear-gradient(
        90deg,
        var(--primary-gold),
        var(--light-gold),
        var(--primary-gold)
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 3s linear infinite;
}

@keyframes gradient-flow {
    to {
        background-position: 200% center;
    }
}

/* Scroll Indicator */
.scroll-indicator {
    animation: bounce-gentle 2s ease-in-out infinite;
}

@keyframes bounce-gentle {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-8px);
    }
}

/* Page Load Animation */
.page-load-fade {
    animation: page-fade-in 0.8s ease-out;
}

@keyframes page-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sacred Flame Flicker */
.flame-effect {
    animation: flame-flicker 2s ease-in-out infinite;
}

@keyframes flame-flicker {
    0%, 100% {
        opacity: 1;
        transform: scaleY(1) scaleX(1);
    }
    25% {
        opacity: 0.9;
        transform: scaleY(1.05) scaleX(0.98);
    }
    50% {
        opacity: 0.95;
        transform: scaleY(0.98) scaleX(1.02);
    }
    75% {
        opacity: 0.92;
        transform: scaleY(1.02) scaleX(0.99);
    }
}

/* Om Symbol Pulse */
.om-pulse {
    animation: om-vibration 3s ease-in-out infinite;
}

@keyframes om-vibration {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.03) rotate(2deg);
        filter: brightness(1.2);
    }
}