/**
 * ═══════════════════════════════════════════════════════════════════════════
 * ANIMATION STYLES
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * ENTRANCE ANIMATIONS
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Fade In Up ─── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ─── Fade In Scale ─── */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

/* ─── Slide In From Right ─── */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

/* ─── Blur In ─── */
@keyframes blurIn {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(10px);
    }

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

/* ═══════════════════════════════════════════════════════════════════════════
 * ANIMATION CLASSES
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Base animation setup - elements start hidden */
.animate-on-load {
    opacity: 0;
}

/* When JS loads, trigger animations */
.animate-ready .animate-on-load {
    animation-fill-mode: both;
}

/* ─── Profile Animations ─── */
.animate-ready .profile__avatar-wrapper {
    animation: fadeInScale 0.6s var(--ease-out) 0.1s both;
}

.animate-ready .profile__name-wrapper {
    animation: fadeInUp 0.5s var(--ease-out) 0.2s both;
}

.animate-ready .profile__bio {
    animation: fadeInUp 0.5s var(--ease-out) 0.3s both;
}

.animate-ready .profile__location {
    animation: fadeInUp 0.5s var(--ease-out) 0.4s both;
}

/* ─── Theme Toggle Animation ─── */
.animate-ready .theme-toggle {
    animation: slideInRight 0.4s var(--ease-out) 0.1s both;
}

/* ─── Link Card Staggered Animations ─── */
.animate-ready .link-card,
.animate-ready .links__section-header {
    animation: fadeInUp 0.5s var(--ease-out) both;
}

/* Stagger delays via CSS custom property */
.animate-ready .link-card:nth-child(1),
.animate-ready .links__section-header:nth-child(1) {
    animation-delay: 0.3s;
}

.animate-ready .link-card:nth-child(2),
.animate-ready .links__section-header:nth-child(2) {
    animation-delay: 0.35s;
}

.animate-ready .link-card:nth-child(3),
.animate-ready .links__section-header:nth-child(3) {
    animation-delay: 0.4s;
}

.animate-ready .link-card:nth-child(4),
.animate-ready .links__section-header:nth-child(4) {
    animation-delay: 0.45s;
}

.animate-ready .link-card:nth-child(5),
.animate-ready .links__section-header:nth-child(5) {
    animation-delay: 0.5s;
}

.animate-ready .link-card:nth-child(6),
.animate-ready .links__section-header:nth-child(6) {
    animation-delay: 0.55s;
}

.animate-ready .link-card:nth-child(7),
.animate-ready .links__section-header:nth-child(7) {
    animation-delay: 0.6s;
}

.animate-ready .link-card:nth-child(8),
.animate-ready .links__section-header:nth-child(8) {
    animation-delay: 0.65s;
}

.animate-ready .link-card:nth-child(9),
.animate-ready .links__section-header:nth-child(9) {
    animation-delay: 0.7s;
}

.animate-ready .link-card:nth-child(10),
.animate-ready .links__section-header:nth-child(10) {
    animation-delay: 0.75s;
}

.animate-ready .link-card:nth-child(11),
.animate-ready .links__section-header:nth-child(11) {
    animation-delay: 0.8s;
}

.animate-ready .link-card:nth-child(12),
.animate-ready .links__section-header:nth-child(12) {
    animation-delay: 0.85s;
}

.animate-ready .link-card:nth-child(13),
.animate-ready .links__section-header:nth-child(13) {
    animation-delay: 0.9s;
}

.animate-ready .link-card:nth-child(14),
.animate-ready .links__section-header:nth-child(14) {
    animation-delay: 0.95s;
}

.animate-ready .link-card:nth-child(15),
.animate-ready .links__section-header:nth-child(15) {
    animation-delay: 1s;
}

/* For items beyond 15, cap at 1s delay */
.animate-ready .link-card:nth-child(n+16),
.animate-ready .links__section-header:nth-child(n+16) {
    animation-delay: 1s;
}

/* ─── Footer Animation ─── */
.animate-ready .footer {
    animation: fadeInUp 0.5s var(--ease-out) 1.1s both;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ICON HOVER ANIMATIONS
 * ═══════════════════════════════════════════════════════════════════════════ */

@keyframes iconBounce {

    0%,
    100% {
        transform: scale(1.1) rotate(5deg);
    }

    50% {
        transform: scale(1.15) rotate(-5deg);
    }
}

@keyframes iconPulse {

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

    50% {
        transform: scale(1.1);
    }
}

@keyframes iconShake {

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

    25% {
        transform: rotate(5deg);
    }

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

/* Apply subtle animation on sustained hover */
.link-card:hover .link-card__icon {
    animation: iconPulse 1s var(--ease-in-out) infinite;
    animation-delay: 0.2s;
}

.link-card--featured:hover .link-card__icon {
    animation: iconBounce 0.8s var(--ease-spring) infinite;
    animation-delay: 0.2s;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MICRO-INTERACTIONS
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Click/Tap Ripple Effect ─── */
.link-card {
    -webkit-tap-highlight-color: transparent;
}

.link-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
            rgba(var(--color-accent-rgb), 0.3) 0%,
            transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition:
        opacity 0.3s var(--ease-out),
        transform 0.3s var(--ease-out);
    pointer-events: none;
    z-index: 1;
}

.link-card.ripple::after {
    opacity: 1;
    transform: scale(2.5);
}

/* ─── Button Press Feedback ─── */
.theme-toggle:active,
.link-card:active {
    transform: scale(0.97);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LOADING STATE
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Skeleton loading animation */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

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

.skeleton {
    background: linear-gradient(90deg,
            var(--color-bg-tertiary) 0%,
            var(--color-bg-card-hover) 50%,
            var(--color-bg-tertiary) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

.skeleton-avatar {
    width: 110px;
    height: 110px;
    border-radius: var(--radius-full);
}

.skeleton-text {
    height: 1em;
    margin: var(--space-2) 0;
}

.skeleton-text--short {
    width: 40%;
}

.skeleton-text--medium {
    width: 70%;
}

.skeleton-text--long {
    width: 90%;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * REDUCED MOTION
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

    /* Disable all animations */
    .animate-on-load,
    .animate-ready .animate-on-load,
    .animate-ready .profile__avatar-wrapper,
    .animate-ready .profile__name-wrapper,
    .animate-ready .profile__bio,
    .animate-ready .profile__location,
    .animate-ready .theme-toggle,
    .animate-ready .link-card,
    .animate-ready .links__section-header,
    .animate-ready .footer {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    /* Keep essential transitions for usability */
    .link-card,
    .theme-toggle,
    .link-card__icon {
        transition:
            background-color var(--transition-fast) ease,
            border-color var(--transition-fast) ease,
            color var(--transition-fast) ease !important;
    }

    /* Disable continuous animations */
    .link-card:hover .link-card__icon,
    .link-card--featured:hover .link-card__icon {
        animation: none !important;
    }

    /* Disable ripple effect */
    .link-card::after {
        display: none;
    }

    /* Disable avatar glow pulse */
    .profile__avatar-wrapper::before {
        animation: none;
        opacity: 0.3;
    }
}