/**
 * HyzenPro Landing Page - Animations
 * 
 * Keyframe animations matching the Lovable design.
 */

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

/* Float - Gentle up/down movement */
@keyframes hyzen-float {

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

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

/* Morph - Shape-shifting blob effect (GPU-composited with transform) */
@keyframes hyzen-morph {

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

    25% {
        transform: scale(1.05, 0.95) rotate(1deg);
    }

    50% {
        transform: scale(0.95, 1.05) rotate(-1deg);
    }

    75% {
        transform: scale(1.02, 0.98) rotate(0.5deg);
    }
}

/* Orbit - Circular rotation around center */
@keyframes hyzen-orbit {
    from {
        transform: rotate(0deg) translateX(120px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(120px) rotate(-360deg);
    }
}

/* Pulse Ring - Expanding ring effect */
@keyframes hyzen-pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Slide Up - Entry from below */
@keyframes hyzen-slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Slide Down - Entry from above */
@keyframes hyzen-slide-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

/* Slide Left - Entry from right */
@keyframes hyzen-slide-left {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

/* Slide Right - Entry from left */
@keyframes hyzen-slide-right {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

/* Fade In - Simple opacity fade */
@keyframes hyzen-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Scale In - Entry with scale */
@keyframes hyzen-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

/* Rotate Slow - Continuous rotation */
@keyframes hyzen-rotate-slow {
    from {
        transform: rotate(0deg);
    }

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

/* Marquee - Continuous horizontal scroll */
@keyframes hyzen-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Bounce Subtle - Gentle bounce */
@keyframes hyzen-bounce {

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

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

/* Pulse Soft - Subtle opacity pulse */
@keyframes hyzen-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* Shine - Moving highlight effect (GPU-composited with transform) */
@keyframes hyzen-shine {
    0% {
        transform: translateX(-100%);
    }

    50%,
    100% {
        transform: translateX(100%);
    }
}

/* Wiggle */
@keyframes hyzen-wiggle {

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

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

/* ========================================
   ANIMATION CLASSES
   ======================================== */

.hyzen-animate-float {
    animation: hyzen-float 6s ease-in-out infinite;
}

.hyzen-animate-morph {
    animation: hyzen-morph 8s ease-in-out infinite;
}

.hyzen-animate-orbit {
    animation: hyzen-orbit 10s linear infinite;
}

.hyzen-animate-orbit-2 {
    animation: hyzen-orbit 12s linear infinite;
    animation-delay: -3s;
}

.hyzen-animate-orbit-3 {
    animation: hyzen-orbit 14s linear infinite;
    animation-delay: -6s;
}

.hyzen-animate-orbit-4 {
    animation: hyzen-orbit 16s linear infinite;
    animation-delay: -9s;
}

.hyzen-animate-pulse-ring {
    animation: hyzen-pulse-ring 2s ease-out infinite;
}

.hyzen-animate-pulse-ring-2 {
    animation: hyzen-pulse-ring 2s ease-out infinite;
    animation-delay: 0.5s;
}

.hyzen-animate-pulse-ring-3 {
    animation: hyzen-pulse-ring 2s ease-out infinite;
    animation-delay: 1s;
}

.hyzen-animate-slide-up {
    animation: hyzen-slide-up 0.6s ease-out forwards;
}

.hyzen-animate-slide-down {
    animation: hyzen-slide-down 0.5s ease-out forwards;
}

.hyzen-animate-slide-left {
    animation: hyzen-slide-left 0.6s ease-out forwards;
}

.hyzen-animate-slide-right {
    animation: hyzen-slide-right 0.6s ease-out forwards;
}

.hyzen-animate-fade-in {
    animation: hyzen-fade-in 0.8s ease-out forwards;
}

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

.hyzen-animate-rotate-slow {
    animation: hyzen-rotate-slow 20s linear infinite;
}

.hyzen-animate-marquee {
    animation: hyzen-marquee 30s linear infinite;
}

.hyzen-animate-marquee:hover {
    animation-play-state: paused;
}

.hyzen-animate-bounce {
    animation: hyzen-bounce 2s ease-in-out infinite;
}

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

.hyzen-animate-wiggle {
    animation: hyzen-wiggle 0.5s ease-in-out;
}

/* ========================================
   STAGGER DELAYS
   ======================================== */

.hyzen-stagger-1 {
    animation-delay: 0.1s;
    opacity: 0;
}

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

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

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

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

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

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

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

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

.hyzen-hover-lift {
    transition: all 0.3s ease;
}

.hyzen-hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--hyzen-shadow-hover);
}

.hyzen-hover-scale {
    transition: transform 0.3s ease;
}

.hyzen-hover-scale:hover {
    transform: scale(1.05);
}

.hyzen-hover-glow {
    transition: box-shadow 0.3s ease;
}

.hyzen-hover-glow:hover {
    box-shadow: 0 0 40px hsl(var(--hyzen-fg) / 0.15);
}

/* Link underline animation */
.hyzen-link-underline {
    position: relative;
    display: inline-block;
}

.hyzen-link-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s ease;
}

.hyzen-link-underline:hover::after {
    width: 100%;
}

/* Shine effect on cards */
.hyzen-shine-effect {
    position: relative;
    overflow: hidden;
}

.hyzen-shine-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent 30%,
            hsl(var(--hyzen-primary-fg) / 0.1) 50%,
            transparent 70%);
    animation: hyzen-shine 3s infinite;
    will-change: transform;
}

/* Card interactive */
.hyzen-card-interactive {
    transition: all 0.3s ease;
}

.hyzen-card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--hyzen-shadow-hover);
    border-color: hsl(var(--hyzen-fg) / 0.2);
}

/* ========================================
   SCROLL-TRIGGERED ANIMATIONS
   ======================================== */

/* Elements start hidden until JS adds visible class */
[data-hyzen-animate] {
    opacity: 0;
}

[data-hyzen-animate].hyzen-visible {
    opacity: 1;
}

[data-hyzen-animate="fade-up"].hyzen-visible {
    animation: hyzen-slide-up 0.6s ease-out forwards;
}

[data-hyzen-animate="fade-in"].hyzen-visible {
    animation: hyzen-fade-in 0.6s ease-out forwards;
}

[data-hyzen-animate="scale-in"].hyzen-visible {
    animation: hyzen-scale-in 0.5s ease-out forwards;
}

[data-hyzen-animate="slide-left"].hyzen-visible {
    animation: hyzen-slide-left 0.6s ease-out forwards;
}

[data-hyzen-animate="slide-right"].hyzen-visible {
    animation: hyzen-slide-right 0.6s ease-out forwards;
}

/* ========================================
   REDUCED MOTION
   ======================================== */

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

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

    .hyzen-animate-marquee {
        animation: none;
    }
}