/*
 * modkavartini Portfolio - Animations
 * Floating effects, spring physics, and micro-interactions
 */

/* ========================================
   FLOATING ANIMATIONS
   ======================================== */

/* Subtle idle float for widgets */
@keyframes float {

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

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

@keyframes float-gentle {

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

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

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

@keyframes float-delayed {

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

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

/* Apply floating animation */
.float {
    animation: float 6s ease-in-out infinite;
}

.float-gentle {
    animation: float-gentle 8s ease-in-out infinite;
}

.float-delayed {
    animation: float-delayed 7s ease-in-out infinite;
    animation-delay: 0.5s;
}

/* Different delays for variety */
.float-delay-1 {
    animation-delay: 0s;
}

.float-delay-2 {
    animation-delay: 1s;
}

.float-delay-3 {
    animation-delay: 2s;
}

.float-delay-4 {
    animation-delay: 0.5s;
}

.float-delay-5 {
    animation-delay: 1.5s;
}

/* ========================================
   GLOW PULSE ANIMATIONS
   ======================================== */
@keyframes glow-pulse {

    0%,
    100% {
        box-shadow:
            0 0 20px rgba(203, 166, 247, 0.2),
            0 0 40px rgba(203, 166, 247, 0.1);
    }

    50% {
        box-shadow:
            0 0 30px rgba(203, 166, 247, 0.3),
            0 0 60px rgba(203, 166, 247, 0.15);
    }
}

@keyframes border-glow-pulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.glow-pulse {
    animation: glow-pulse 3s ease-in-out infinite;
}

/* ========================================
   FADE IN ANIMATIONS
   ======================================== */
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

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

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

@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

@keyframes fade-in-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

@keyframes fade-in-scale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

.fade-in {
    animation: fade-in 0.5s ease-out forwards;
}

.fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
}

.fade-in-down {
    animation: fade-in-down 0.6s ease-out forwards;
}

.fade-in-left {
    animation: fade-in-left 0.6s ease-out forwards;
}

.fade-in-right {
    animation: fade-in-right 0.6s ease-out forwards;
}

.fade-in-scale {
    animation: fade-in-scale 0.5s ease-out forwards;
}

/* Staggered animation delays */
.stagger-1 {
    animation-delay: 0.1s;
    opacity: 0;
}

.stagger-2 {
    animation-delay: 0.2s;
    opacity: 0;
}

.stagger-3 {
    animation-delay: 0.3s;
    opacity: 0;
}

.stagger-4 {
    animation-delay: 0.4s;
    opacity: 0;
}

.stagger-5 {
    animation-delay: 0.5s;
    opacity: 0;
}

.stagger-6 {
    animation-delay: 0.6s;
    opacity: 0;
}

.stagger-7 {
    animation-delay: 0.7s;
    opacity: 0;
}

.stagger-8 {
    animation-delay: 0.8s;
    opacity: 0;
}

/* ========================================
   SPRING PHYSICS ANIMATIONS
   ======================================== */

/* Spring bounce effect */
@keyframes spring-bounce {
    0% {
        transform: scale(0.8);
    }

    40% {
        transform: scale(1.08);
    }

    60% {
        transform: scale(0.98);
    }

    80% {
        transform: scale(1.02);
    }

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

@keyframes spring-pop {
    0% {
        transform: scale(0) rotate(-10deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.1) rotate(3deg);
    }

    70% {
        transform: scale(0.95) rotate(-1deg);
    }

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

.spring-bounce {
    animation: spring-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.spring-pop {
    animation: spring-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ========================================
   LETTER SWAP ANIMATION (Origin Page)
   This creates the visual foundation,
   JS handles the actual spring physics
   ======================================== */
.letter-swap-container {
    position: relative;
    display: inline-flex;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.letter {
    display: inline-block;
    position: relative;
    transition: transform 0.1s linear;
}

.letter--swapping {
    color: var(--ctp-mauve);
}

.letter--v,
.letter--m {
    color: var(--ctp-pink);
    font-weight: 700;
}

/* Glow effect during swap */
.letter--glowing {
    text-shadow:
        0 0 10px var(--ctp-mauve),
        0 0 20px var(--ctp-mauve),
        0 0 40px rgba(203, 166, 247, 0.5);
}

/* ========================================
   TYPEWRITER EFFECT
   ======================================== */
@keyframes typewriter-cursor {

    0%,
    50% {
        border-color: var(--ctp-mauve);
    }

    51%,
    100% {
        border-color: transparent;
    }
}

.typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--ctp-mauve);
    animation: typewriter-cursor 1s step-end infinite;
}

/* ========================================
   SHIMMER EFFECT
   ======================================== */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

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

.shimmer {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(203, 166, 247, 0.1) 50%,
            transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

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

/* Lift on hover */
.hover-lift {
    transition: transform var(--transition-spring);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

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

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

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

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(203, 166, 247, 0.3);
}

/* ========================================
   PARALLAX UTILITIES
   ======================================== */
.parallax-slow {
    will-change: transform;
    transition: transform 0.1s linear;
}

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

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

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

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

    .float,
    .float-gentle,
    .float-delayed {
        animation: none;
    }
}