/*
 * Digital Innovation Group @ UCF - Animations
 * Micro-interactions and dynamic effects
 */

/* ============================================
   Keyframe Animations
   ============================================ */

/* Floating animation for hero elements */
@keyframes float {

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

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

/* Subtle pulse for glowing elements */
@keyframes pulse-glow {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 20px var(--color-primary-glow);
    }

    50% {
        opacity: 0.8;
        box-shadow: 0 0 40px var(--color-primary-glow), 0 0 60px var(--color-primary-glow);
    }
}

/* Typing cursor blink */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Gradient shift */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

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

/* Slide in from bottom */
@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

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

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

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

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

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

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

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

    to {
        opacity: 1;
    }
}

/* Rotate */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

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

/* Glitch effect */
@keyframes glitch {
    0% {
        text-shadow: 0.05em 0 0 var(--color-primary), -0.05em -0.025em 0 var(--color-secondary),
            -0.025em 0.05em 0 var(--color-accent);
    }

    14% {
        text-shadow: 0.05em 0 0 var(--color-primary), -0.05em -0.025em 0 var(--color-secondary),
            -0.025em 0.05em 0 var(--color-accent);
    }

    15% {
        text-shadow: -0.05em -0.025em 0 var(--color-primary), 0.025em 0.025em 0 var(--color-secondary),
            -0.05em -0.05em 0 var(--color-accent);
    }

    49% {
        text-shadow: -0.05em -0.025em 0 var(--color-primary), 0.025em 0.025em 0 var(--color-secondary),
            -0.05em -0.05em 0 var(--color-accent);
    }

    50% {
        text-shadow: 0.025em 0.05em 0 var(--color-primary), 0.05em 0 0 var(--color-secondary),
            0 -0.05em 0 var(--color-accent);
    }

    99% {
        text-shadow: 0.025em 0.05em 0 var(--color-primary), 0.05em 0 0 var(--color-secondary),
            0 -0.05em 0 var(--color-accent);
    }

    100% {
        text-shadow: -0.025em 0 0 var(--color-primary), -0.025em -0.025em 0 var(--color-secondary),
            -0.025em -0.05em 0 var(--color-accent);
    }
}

/* Neon flicker */
@keyframes neon-flicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        text-shadow:
            0 0 5px var(--color-primary),
            0 0 10px var(--color-primary),
            0 0 20px var(--color-primary),
            0 0 40px var(--color-primary);
        opacity: 1;
    }

    20%,
    24%,
    55% {
        opacity: 0.8;
        text-shadow: none;
    }
}

/* ============================================
   Animation Classes
   ============================================ */

/* Float effect */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

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

/* Pulse glow */
.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Gradient animation */
.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 5s ease infinite;
}

/* Glitch effect */
.animate-glitch:hover {
    animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

/* Neon flicker */
.animate-neon {
    animation: neon-flicker 1.5s ease-in-out infinite alternate;
}

/* Spin animation */
.animate-spin {
    animation: rotate 1s linear infinite;
}

/* ============================================
   Scroll-triggered Animations
   ============================================ */

/* Elements start hidden, then animate in */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Staggered animations for lists */
.stagger-1 {
    transition-delay: 0.1s;
}

.stagger-2 {
    transition-delay: 0.2s;
}

.stagger-3 {
    transition-delay: 0.3s;
}

.stagger-4 {
    transition-delay: 0.4s;
}

.stagger-5 {
    transition-delay: 0.5s;
}

.stagger-6 {
    transition-delay: 0.6s;
}

/* ============================================
   Hover Effects
   ============================================ */

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

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

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

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

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

.hover-glow:hover {
    box-shadow: 0 0 30px var(--color-primary-glow);
}

/* Border glow on hover */
.hover-border-glow {
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.hover-border-glow:hover {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 20px var(--color-primary-glow);
}

/* ============================================
   Interactive Elements
   ============================================ */

/* Ripple effect on click */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, var(--color-primary) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 1s;
}

.ripple:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

/* Typing animation for text */
.typing {
    overflow: hidden;
    border-right: 2px solid var(--color-primary);
    white-space: nowrap;
    animation:
        typing 3.5s steps(40, end),
        blink 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* Parallax container */
.parallax-container {
    perspective: 1000px;
    overflow: hidden;
}

.parallax-layer {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ============================================
   Page Transitions
   ============================================ */

/* Page fade in */
.page-enter {
    animation: fade-in 0.3s ease-out;
}

/* Content sections animation on load */
.section-animate {
    animation: slide-up 0.6s ease-out;
    animation-fill-mode: both;
}

.section-animate:nth-child(1) {
    animation-delay: 0.1s;
}

.section-animate:nth-child(2) {
    animation-delay: 0.2s;
}

.section-animate:nth-child(3) {
    animation-delay: 0.3s;
}

.section-animate:nth-child(4) {
    animation-delay: 0.4s;
}

.section-animate:nth-child(5) {
    animation-delay: 0.5s;
}

/* ============================================
   Special Effects
   ============================================ */

/* Cyber lines decoration */
.cyber-lines::before,
.cyber-lines::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

.cyber-lines::before {
    top: 0;
    left: 0;
}

.cyber-lines::after {
    bottom: 0;
    right: 0;
}

/* Corner accents */
.corner-accents {
    position: relative;
}

.corner-accents::before,
.corner-accents::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--color-primary);
    border-style: solid;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.corner-accents:hover::before,
.corner-accents:hover::after {
    opacity: 1;
}

.corner-accents::before {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
}

.corner-accents::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 2px 2px 0;
}

/* Scanline overlay */
.scanline-overlay {
    position: relative;
}

.scanline-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.1) 2px,
            rgba(0, 0, 0, 0.1) 4px);
    pointer-events: none;
}

/* CRT vignette effect */
.crt-vignette {
    position: relative;
}

.crt-vignette::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center,
            transparent 60%,
            rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {

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

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1;
        transform: none;
    }
}