/* ============================================
   FoldedSkies - Animation Library
   Motion Guidelines: Float, Drift, Breathe
   ============================================ */

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Solar Flare - Breathing CTA Button */
@keyframes solarFlare {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px var(--primary-glow), 0 0 30px transparent;
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 25px var(--primary-glow), 0 0 50px var(--primary-glow);
    }
}

/* Float Drift - Idle Paper Plane */
@keyframes floatDrift {

    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    25% {
        transform: translateY(-15px) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(2deg);
    }

    75% {
        transform: translateY(-20px) rotate(0deg);
    }
}

/* Gentle Bob - Floating Elements */
@keyframes gentleBob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Cloud Drift - Background Clouds */
@keyframes cloudDrift {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100vw);
    }
}

/* Fade In Up - Reveal Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Scale - Card Reveal */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Shimmer - Subtle Highlight */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* Pulse Glow - Interactive Elements */
@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 20px var(--primary-glow);
    }

    50% {
        box-shadow: 0 0 40px var(--primary-glow), 0 0 60px var(--primary-glow);
    }
}

/* Gradient Shift - Sky Background */
@keyframes gradientShift {

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

    50% {
        background-position: 100% 50%;
    }
}

/* Jelly Press - Button Feedback */
@keyframes jellyPress {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(0.95);
    }

    60% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

/* Rotate Float - Paper Plane */
@keyframes rotateFloat {

    0%,
    100% {
        transform: rotate(-5deg) translateY(0);
    }

    50% {
        transform: rotate(5deg) translateY(-20px);
    }
}

/* ============================================
   ANIMATION CLASSES
   ============================================ */

/* Base reveal - hidden by default */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Staggered reveals */
.reveal-1 {
    transition-delay: 0s;
}

.reveal-2 {
    transition-delay: 0.1s;
}

.reveal-3 {
    transition-delay: 0.2s;
}

.reveal-4 {
    transition-delay: 0.3s;
}

.reveal-5 {
    transition-delay: 0.4s;
}

.reveal-6 {
    transition-delay: 0.5s;
}

/* Float animation class */
.float {
    animation: gentleBob 6s ease-in-out infinite;
}

.float--slow {
    animation-duration: 8s;
}

.float--fast {
    animation-duration: 4s;
}

/* Drift animation for paper plane */
.drift {
    animation: floatDrift 8s ease-in-out infinite;
}

/* Solar Flare for CTAs */
.solar-flare {
    animation: solarFlare 4s ease-in-out infinite;
}

/* Gradient background animation */
.gradient-animate {
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
}

/* ============================================
   PARALLAX ELEMENTS
   ============================================ */

.parallax {
    will-change: transform;
    transition: transform 0.1s linear;
}

.parallax--slow {
    --parallax-speed: 0.3;
}

.parallax--medium {
    --parallax-speed: 0.5;
}

.parallax--fast {
    --parallax-speed: 0.8;
}

/* ============================================
   HOVER EFFECTS
   ============================================ */

/* Lift effect */
.hover-lift {
    transition: transform var(--transition-float), box-shadow var(--transition-float);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-float-hover);
}

/* Scale effect */
.hover-scale {
    transition: transform var(--transition-base);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Glow effect */
.hover-glow {
    transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
    box-shadow: 0 0 30px var(--primary-glow);
}

/* Jelly effect */
.hover-jelly:active {
    animation: jellyPress 0.4s ease;
}

/* ============================================
   PAGE TRANSITIONS
   ============================================ */

.page-transition {
    animation: fadeInUp 0.5s ease-out;
}

/* Smooth section transitions */
.section-enter {
    opacity: 0;
    transform: translateY(40px);
}

.section-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ============================================
   SPECIAL EFFECTS
   ============================================ */

/* Paper texture overlay */
.paper-texture {
    position: relative;
}

.paper-texture::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    border-radius: inherit;
}

/* Shimmer text effect */
.shimmer-text {
    background: linear-gradient(90deg,
            var(--text) 0%,
            var(--primary) 50%,
            var(--text) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

/* Glowing border */
.glow-border {
    position: relative;
}

.glow-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: -1;
    filter: blur(10px);
}

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

/* ============================================
   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 {
        opacity: 1;
        transform: none;
    }

    .parallax {
        transform: none !important;
    }
}