/* Advanced Animations & Hover Effects */

/* --- Shared Utilities --- */
:root {
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure SVGs overflow is visible for glow effects */
.feature-icon svg,
.sparkle svg {
    overflow: visible;
    width: 100%;
    height: 100%;
}

/* --- 1. Sparkle (Chat Message) --- */
.anim-sparkle {
    transform-origin: center;
    animation: float-y 3s ease-in-out infinite;
}

.sparkle-core {
    transform-origin: center;
    animation: pulse-glow 2s ease-in-out infinite;
}

.sparkle-shimmer {
    transform-origin: center;
    animation: spin-slow 8s linear infinite;
}

/* Hover Effect for Sparkle (if interactive) */
.chat-message:hover .anim-sparkle {
    /* Removed animation replacement to prevent jump */
}

.chat-message:hover .sparkle-core {
    animation: scale-pop 0.6s var(--ease-elastic);
}

.chat-message:hover .sparkle-shimmer {
    animation: spin-fast 1s linear infinite;
}

/* --- 2. Robot (AI Astrologer) --- */
.anim-robot .robot-body {
    transform-origin: center bottom;
    animation: breathe 4s ease-in-out infinite;
}

.anim-robot .robot-head {
    transform-origin: 32px 45px;
    animation: head-tilt 5s ease-in-out infinite;
}

.anim-robot .robot-eyes {
    transform-origin: center;
    animation: blink 4s infinite;
}

.anim-robot .robot-antenna-ball {
    animation: glow-pulse 2s infinite alternate;
}

/* Hover: Robot gets excited */
.feature-card:hover .anim-robot .robot-head {
    animation: head-bob-fast 0.5s var(--ease-bounce) infinite alternate;
}

.feature-card:hover .anim-robot .robot-eyes {
    animation: blink-fast 0.2s infinite;
    /* Alert eyes */
    fill: #00FFFF;
    /* Eyes turn bright cyan */
}

.feature-card:hover .anim-robot .robot-antenna-ball {
    animation: signal-transmit 0.5s infinite;
}

/* --- 3. Star/Sparkle (Daily Focus) --- */
.anim-focus-star .star-main {
    transform-origin: center;
    animation: scale-pulse 3s ease-in-out infinite;
}

.anim-focus-star .star-ring {
    transform-origin: center;
    animation: spin-reverse 12s linear infinite;
    opacity: 0.7;
}

.anim-focus-star .star-rays {
    transform-origin: center;
    animation: spin-slow 10s linear infinite;
}

/* Hover: Star spins and energizes */
.feature-card:hover .anim-focus-star .star-main {
    animation: scale-pop 0.6s var(--ease-elastic) forwards;
}

.feature-card:hover .anim-focus-star .star-rays {
    animation: spin-fast 2s linear infinite;
}

.feature-card:hover .anim-focus-star .star-ring {
    animation: spin-reverse-fast 2s linear infinite;
    opacity: 1;
}

/* --- 4. Waves (Elemental Patterns) --- */
.anim-wave .wave-back {
    animation: wave-slide 4s ease-in-out infinite alternate;
}

.anim-wave .wave-front {
    animation: wave-slide 3s ease-in-out infinite alternate-reverse;
}

.anim-wave .wave-particles circle {
    animation: particle-rise 3s ease-in infinite;
}

/* Hover: Stormy/Active water */
.feature-card:hover .anim-wave .wave-back {
    animation: wave-slide-fast 1s ease-in-out infinite alternate;
}

.feature-card:hover .anim-wave .wave-front {
    animation: wave-slide-fast 0.8s ease-in-out infinite alternate-reverse;
}

.feature-card:hover .anim-wave .wave-particles circle {
    animation-duration: 1.5s;
}

/* --- 5. Heart (Compatibility) --- */
.anim-heart {
    transform-origin: center;
}

.anim-heart .heart-shape {
    transform-origin: center;
    animation: heartbeat-slow 2s ease-in-out infinite;
}

.anim-heart .heart-line {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw-line 3s ease-in-out infinite;
}

/* Hover: Excited heartbeat */
.feature-card:hover .anim-heart .heart-shape {
    animation: heartbeat-fast 0.6s var(--ease-elastic) infinite;
    filter: drop-shadow(0 0 8px #ff6b6b);
}

.feature-card:hover .anim-heart .heart-line {
    animation: draw-line-fast 1s linear infinite;
}

/* --- 6. Crystal Ball (Birth Chart) --- */
.anim-crystal .ball-glass {
    animation: float-y 4s ease-in-out infinite;
}

.anim-crystal .ball-mist {
    transform-origin: center;
    animation: mist-swirl 8s linear infinite;
}

.anim-crystal .ball-stars {
    animation: twinkle-random 3s infinite;
}

/* Hover: Future revealing */
.feature-card:hover .anim-crystal .ball-glass {
    animation: float-y-active 2s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(157, 78, 221, 0.8));
}

.feature-card:hover .anim-crystal .ball-mist {
    animation: mist-swirl-fast 2s linear infinite;
    opacity: 0.8;
}

/* --- 7. Galaxy (Transit Insights) --- */
.anim-galaxy .galaxy-arms {
    transform-origin: center;
    animation: spin-slow 20s linear infinite;
}

.anim-galaxy .galaxy-core {
    animation: pulse-core 3s ease-in-out infinite;
}

.anim-galaxy .galaxy-planet {
    offset-path: path("M32 32 m-20,0 a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0");
    animation: orbit-motion 6s linear infinite;
}

/* Hover: Warp speed */
.feature-card:hover .anim-galaxy .galaxy-arms {
    animation: spin-fast 2s linear infinite;
}

.feature-card:hover .anim-galaxy .galaxy-core {
    animation: pulse-core-fast 0.5s infinite;
}

/* --- Keyframes Definitions --- */

@keyframes float-y {

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

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

@keyframes float-y-active {

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

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

@keyframes pulse-glow {

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

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

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-fast {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-reverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes spin-reverse-fast {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes shake-happy {
    0% {
        transform: rotate(0deg);
    }

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

    50% {
        transform: rotate(15deg);
    }

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

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

@keyframes breathe {

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

    50% {
        transform: scaleY(1.02);
    }
}

@keyframes head-tilt {

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

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

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

@keyframes head-bob-fast {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-2px);
    }
}

@keyframes blink {

    0%,
    48%,
    52%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0.1);
    }
}

@keyframes blink-fast {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

@keyframes glow-pulse {
    0% {
        fill-opacity: 0.5;
    }

    100% {
        fill-opacity: 1;
    }
}

@keyframes signal-transmit {
    0% {
        stroke-width: 1;
        opacity: 1;
    }

    100% {
        stroke-width: 4;
        opacity: 0;
    }
}

@keyframes scale-pulse {

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

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

@keyframes scale-pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

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

@keyframes wave-slide {
    0% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(2px);
    }
}

@keyframes wave-slide-fast {
    0% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(5px);
    }
}

@keyframes particle-rise {
    0% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateY(-20px) scale(1);
        opacity: 0;
    }
}

@keyframes heartbeat-slow {

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

    10% {
        transform: scale(1.05);
    }

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

@keyframes heartbeat-fast {

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

    25% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(1);
    }

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

@keyframes draw-line {
    0% {
        stroke-dashoffset: 100;
    }

    50% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -100;
    }
}

@keyframes draw-line-fast {
    0% {
        stroke-dashoffset: 50;
    }

    100% {
        stroke-dashoffset: -50;
    }
}

@keyframes mist-swirl {
    0% {
        transform: rotate(0deg) scale(1);
    }

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

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

@keyframes mist-swirl-fast {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes twinkle-random {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

@keyframes pulse-core {

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

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes pulse-core-fast {

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

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

@keyframes orbit-motion {
    0% {
        offset-distance: 0%;
    }

    100% {
        offset-distance: 100%;
    }
}