/* ========================================
   FV QUALITY - ANIMATIONS
   Advanced Keyframes & Motion
   ======================================== */

/* ========== LOADING ANIMATIONS ========== */
@keyframes counterPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes logoReveal {
    0% {
        opacity: 0;
        transform: scale(0.8);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

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

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* ========== HERO ANIMATIONS ========== */
@keyframes heroTextReveal {
    0% {
        opacity: 0;
        transform: translateY(100px) rotate(5deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotate(0);
    }
}

@keyframes subtitleFade {
    0% {
        opacity: 0;
        letter-spacing: 0.5em;
    }

    100% {
        opacity: 0.9;
        letter-spacing: 0.1em;
    }
}

@keyframes scrollIndicator {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

/* ========== KINETIC TYPOGRAPHY ========== */
.kinetic-char {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.kinetic-char:hover {
    transform: translateY(-10px) scale(1.1);
    color: var(--color-gold);
}

/* ========== CURSOR ANIMATIONS ========== */
@keyframes cursorPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.cursor.pulse {
    animation: cursorPulse 1s ease-in-out infinite;
}

/* ========== CARD ANIMATIONS ========== */
@keyframes cardFloat {

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

    25% {
        transform: translateY(-5px) rotate(0.5deg);
    }

    75% {
        transform: translateY(5px) rotate(-0.5deg);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

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

.shimmer {
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* ========== MAP ANIMATIONS ========== */
@keyframes pointPulse {

    0%,
    100% {
        r: 4;
        opacity: 0.5;
    }

    50% {
        r: 8;
        opacity: 1;
    }
}

@keyframes pointGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 5px var(--color-gold));
    }

    50% {
        filter: drop-shadow(0 0 15px var(--color-gold));
    }
}

.map__point.pulse {
    animation: pointPulse 2s ease-in-out infinite;
}

.map__point.glow {
    animation: pointGlow 1.5s ease-in-out infinite;
}

/* ========== PROCESS CARD ANIMATIONS ========== */
@keyframes cardEnter {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.process-card {
    animation: cardEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-play-state: paused;
}

.process-card.in-view {
    animation-play-state: running;
}

/* ========== BENTO CARD TILT ========== */
.bento-card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card.tilting {
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

/* ========== PARALLAX LAYERS ========== */
.parallax-container {
    overflow: hidden;
    position: relative;
}

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

.parallax-layer--slow {
    transform: translateY(calc(var(--scroll-y, 0) * 0.3));
}

.parallax-layer--medium {
    transform: translateY(calc(var(--scroll-y, 0) * 0.5));
}

.parallax-layer--fast {
    transform: translateY(calc(var(--scroll-y, 0) * 0.7));
}

/* ========== STAGGER DELAYS ========== */
.stagger>*:nth-child(1) {
    animation-delay: 0.05s;
}

.stagger>*:nth-child(2) {
    animation-delay: 0.1s;
}

.stagger>*:nth-child(3) {
    animation-delay: 0.15s;
}

.stagger>*:nth-child(4) {
    animation-delay: 0.2s;
}

.stagger>*:nth-child(5) {
    animation-delay: 0.25s;
}

.stagger>*:nth-child(6) {
    animation-delay: 0.3s;
}

.stagger>*:nth-child(7) {
    animation-delay: 0.35s;
}

.stagger>*:nth-child(8) {
    animation-delay: 0.4s;
}

/* ========== SCROLL REVEAL CLASSES ========== */
[data-reveal] {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="up"] {
    transform: translateY(60px);
}

[data-reveal="down"] {
    transform: translateY(-60px);
}

[data-reveal="left"] {
    transform: translateX(-60px);
}

[data-reveal="right"] {
    transform: translateX(60px);
}

[data-reveal="scale"] {
    transform: scale(0.9);
}

[data-reveal].revealed {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* ========== MAGNETIC BUTTON ========== */
.magnetic {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========== TEXT SPLIT ANIMATION ========== */
.split-text .line {
    overflow: hidden;
}

.split-text .line-inner {
    display: block;
    transform: translateY(100%);
    animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ========== NOISE ANIMATION ========== */
@keyframes noise {

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

    10% {
        transform: translate(-5%, -10%);
    }

    20% {
        transform: translate(-15%, 5%);
    }

    30% {
        transform: translate(7%, -25%);
    }

    40% {
        transform: translate(-5%, 25%);
    }

    50% {
        transform: translate(-15%, 10%);
    }

    60% {
        transform: translate(15%, 0%);
    }

    70% {
        transform: translate(0%, 15%);
    }

    80% {
        transform: translate(3%, 35%);
    }

    90% {
        transform: translate(-10%, 10%);
    }
}

.noise-bg {
    animation: noise 8s steps(10) infinite;
}

/* ========== GRADIENT ANIMATION ========== */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

.animated-gradient {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* ========== PREFERS REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .parallax-layer {
        transform: none !important;
    }
}