/* Page transition */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.page-enter {
    animation: fadeIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.page-exit {
    animation: fadeOut 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* Loading bar */
@keyframes loading-bar {
    0% {
        width: 0;
        opacity: 0.5;
    }
    50% {
        width: 40px;
        opacity: 1;
    }
    100% {
        width: 0;
        opacity: 0.5;
    }
}

/* Text reveal */
@keyframes revealText {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: 0.7;
    }
    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.reveal-text {
    display: inline-block;
    animation: revealText 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Subtle glow */
@keyframes softGlow {
    0% {
        box-shadow: 0 0 5px rgba(199, 240, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 15px rgba(199, 240, 255, 0.2);
    }
    100% {
        box-shadow: 0 0 5px rgba(199, 240, 255, 0.1);
    }
}

.soft-glow {
    animation: softGlow 4s infinite ease-in-out;
}

/* Smooth border */
@keyframes borderFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.border-flow {
    background: linear-gradient(
        90deg,
        var(--color-pink),
        var(--color-green-bright),
        var(--color-cyan),
        var(--color-pink)
    );
    background-size: 300% 100%;
    animation: borderFlow 8s ease infinite;
}

/* Content entry */
.content-entry {
    opacity: 0;
    transform: translateY(20px);
    animation: contentEntry 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes contentEntry {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Quote */
.quote p {
    opacity: 0;
    transform: translateX(20px);
    animation: quoteLines 0.7s forwards;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes quoteLines {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.quote p:nth-child(1) {
    animation-delay: 0.1s;
}
.quote p:nth-child(2) {
    animation-delay: 0.3s;
}
.quote p:nth-child(3) {
    animation-delay: 0.5s;
}
.quote p:nth-child(4) {
    animation-delay: 0.7s;
}
.quote p:nth-child(5) {
    animation-delay: 0.9s;
}
.quote p:nth-child(6) {
    animation-delay: 1.1s;
}

/* Error shake */
@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}

.error {
    animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}