/* ===================================================================

   animations.css

   Purpose: Defines all motion, interactivity, and state changes

   for the website. This includes @keyframes, transitions,

   transforms, and hover effects. Load this file AFTER global.css.

   =================================================================== */



/* ===================================

   TRANSITION & ANIMATION VARIABLES

   =================================== */

:root {

    --transition-fast: 0.3s ease;

    --transition-medium: 0.6s ease;

    --transition-smooth: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    --transition-slow: 1s ease;

}





/* ===================================

   KEYFRAME DEFINITIONS

   =================================== */

@keyframes ripple {

    0% {

        transform: scale(1);

        text-shadow: 0 0 8px #00C8FF;

        opacity: 0.8;

    }

    to {

        text-shadow: 0 0 20px #00C8FF;

    }

}



@keyframes gradientFlow {

    0%,

    100% {

        transform: translateX(0) translateY(0) scale(1) rotate(0deg);

        opacity: 0.6;

    }

    25% {

        transform: translateX(-30px) translateY(-20px) scale(1.1) rotate(1deg);

        opacity: 0.8;

    }

    50% {

        transform: translateX(20px) translateY(-30px) scale(0.9) rotate(-1deg);

        opacity: 0.7;

    }

    75% {

        transform: translateX(-15px) translateY(15px) scale(1.05) rotate(0.5deg);

        opacity: 0.9;

    }

}



@keyframes blink {

    0%,

    50% {

        opacity: 1;

    }

    51%,

    100% {

        opacity: 0;

    }

}



@keyframes scrollWheel {

    0%,

    100% {

        opacity: 0.3;

        transform: translateX(-50%) translateY(0);

    }

    50% {

        opacity: 1;

        transform: translateX(-50%) translateY(10px);

    }

}



@keyframes dataPulse {

    0%,

    100% {

        r: 3;

        opacity: 0.8;

    }

    50% {

        r: 5;

        opacity: 1;

    }

}



@keyframes intelligentFlow {

    0%,

    100% {

        stroke-dashoffset: 120;

        opacity: 0.2;

        stroke: var(--primary-cyan);

    }

    25% {

        stroke-dashoffset: 60;

        opacity: 0.6;

        stroke: var(--primary-blue);

    }

    50% {

        stroke-dashoffset: 0;

        opacity: 0.9;

        stroke: var(--primary-cyan);

    }

    75% {

        stroke-dashoffset: -60;

        opacity: 0.6;

        stroke: var(--primary-purple);

    }

}



@keyframes pulse {

    0%,

    100% {

        opacity: 0.6;

        transform: scale(1);

    }

    50% {

        opacity: 1;

        transform: scale(1.2);

    }

}



@keyframes subtlePulse {

    0%,

    100% {

        filter: brightness(1);

    }

    50% {

        filter: brightness(1.02);

    }

}



@keyframes slideDown {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes typing {

    from {

        width: 0;

    }

    to {

        width: 100%;

    }

}



@keyframes blink-caret {

    from,

    to {

        border-color: transparent;

    }

    50% {

        border-color: var(--primary-cyan);

    }

}



@keyframes fadeInUp {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}



@keyframes float {

    0%,

    100% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-10px);

    }

}



@keyframes simpleDotGlow {

    from {

        text-shadow: 0 0 6px #00C8FF;

        opacity: 0.8;

    }

    to {

        text-shadow: 0 0 20px #00C8FF;

        opacity: 1;

    }

}



@keyframes scroll {

    0% {

        transform: translateX(0);

    }

    100% {

        transform: translateX(-50%);

    }

}



/* ===================================

   GENERAL TRANSITIONS

   =================================== */

a {

    transition: color var(--transition-fast);

}



a:hover {

    color: var(--accent-cyan);

}



.card-design {

    transition: all 0.4s ease;

}



.card-cta {

    transition: all 0.3s ease;

}



.form-input,

.form-textarea {

    transition: all 0.3s ease;

}



.form-label {

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.submit-button {

    transition: all 0.3s ease;

}



.cta-button {

    transition: all var(--transition-smooth);

}



/* ===================================

   COMPONENT-SPECIFIC ANIMATIONS

   =================================== */



/* --- Ticker --- */

.ticker-content {

    animation: scroll 30s linear infinite;

}



.ticker-container .ticker-content {

    animation-duration: 40s;

}



.ticker-content:hover,

.ticker-container:hover .ticker-content {

    animation-play-state: paused;

}



/* --- Industries --- */

.industry-card {

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    border: 2px solid transparent;

}



.industry-card:hover {

    transform: translateY(-10px) scale(1.02);

    box-shadow: 0 25px 50px rgba(0, 188, 212, 0.2);

    border-color: #00bcd4;

}



.industries-grid {

    animation: subtlePulse 8s ease-in-out infinite;

}



/* --- Contact Section --- */

.contact-subtitle {

    overflow: hidden;

    border-right: 2px solid var(--primary-cyan);

    white-space: nowrap;

    animation: typing 3s steps(60, end), blink-caret 0.75s step-end infinite;

}



.contact-item {

    transition: all 0.3s ease;

}



.contact-item:hover {

    background: rgba(0, 188, 212, 0.05);

    border-color: rgba(0, 188, 212, 0.1);

    transform: translateX(2px);

}



.contact-card {

    opacity: 0;

    transform: translateY(30px);

    animation: fadeInUp 0.8s ease-out forwards;

}



.contact-card:nth-child(2) {

    animation-delay: 0.2s;

}



/* --- Buttons --- */

.submit-button.loading::after {

    content: '';

    position: absolute;

    right: 20px;

    width: 18px;

    height: 18px;

    border: 2px solid transparent;

    border-top-color: white;

    border-radius: 50%;

    animation: spin 1s linear infinite;

}



/* ===================================

   ACCESSIBILITY - REDUCED MOTION

   =================================== */

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

    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        animation-delay: -0.01ms !important;

        transition-delay: -0.01ms !important;

    }



    .contact-subtitle {

        animation: none;

        border-right: none;

        white-space: normal;

    }

}



/* ===================================

   MOBILE ANIMATION ADJUSTMENTS

   =================================== */

@media (max-width: 768px) {

    .ticker-content {

        animation-duration: 20s;

    }

}



@media (max-width: 480px) {

    .contact-subtitle {

        animation: none;

        border-right: none;

        white-space: normal;

    }

}