/* ============================================================
   InfoTech Ninja — Animations Stylesheet
   CSS keyframes, scroll reveal states, hover effects, glows.
   All animation features respect prefers-reduced-motion.
   ============================================================ */

/* ══════════════════════════════════════
   @KEYFRAMES
   ══════════════════════════════════════ */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes glowPulseCyan {
    0%, 100% { box-shadow: 0 0 12px rgba(0,212,255,0.2); }
    50%       { box-shadow: 0 0 28px rgba(0,212,255,0.5), 0 0 60px rgba(0,212,255,0.15); }
}

@keyframes glowPulseOrange {
    0%, 100% { box-shadow: 0 0 12px rgba(255,107,53,0.2); }
    50%       { box-shadow: 0 0 28px rgba(255,107,53,0.5), 0 0 60px rgba(255,107,53,0.15); }
}

@keyframes glowDrift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(30px, 20px) scale(1.1); }
}

@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes scanLine {
    0%   { transform: translateY(-100vh); }
    100% { transform: translateY(100vh); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-12px); }
}

@keyframes rotateGear {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.25); opacity: 0.7; }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(8px); }
}

@keyframes slideInFromRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* Hero entrance — individual word animation */
@keyframes wordEntrance {
    from {
        opacity: 0;
        transform: translateY(40px) rotateX(-15deg);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
        filter: blur(0);
    }
}

/* ══════════════════════════════════════
   SCROLL REVEAL — Base States
   ══════════════════════════════════════ */

.scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--delay, 0s);
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delay helpers */
.scroll-reveal[style*="--delay:0.05s"] { transition-delay: 0.05s; }
.scroll-reveal[style*="--delay:0.1s"]  { transition-delay: 0.1s;  }
.scroll-reveal[style*="--delay:0.12s"] { transition-delay: 0.12s; }
.scroll-reveal[style*="--delay:0.15s"] { transition-delay: 0.15s; }
.scroll-reveal[style*="--delay:0.2s"]  { transition-delay: 0.2s;  }
.scroll-reveal[style*="--delay:0.3s"]  { transition-delay: 0.3s;  }
.scroll-reveal[style*="--delay:0.35s"] { transition-delay: 0.35s; }
.scroll-reveal[style*="--delay:0.4s"]  { transition-delay: 0.4s;  }
.scroll-reveal[style*="--delay:0.5s"]  { transition-delay: 0.5s;  }
.scroll-reveal[style*="--delay:0.65s"] { transition-delay: 0.65s; }
.scroll-reveal[style*="--delay:0.8s"]  { transition-delay: 0.8s;  }

/* Variant: fade from left */
.scroll-reveal--left {
    transform: translateX(-24px);
}
.scroll-reveal--left.visible {
    transform: translateX(0);
}

/* Variant: fade from right */
.scroll-reveal--right {
    transform: translateX(24px);
}
.scroll-reveal--right.visible {
    transform: translateX(0);
}

/* Variant: scale in */
.scroll-reveal--scale {
    transform: scale(0.92);
}
.scroll-reveal--scale.visible {
    transform: scale(1);
}

/* ══════════════════════════════════════
   HERO SECTION ANIMATIONS
   ══════════════════════════════════════ */

/* Hero words — fired when scroll-reveal becomes visible */
.hero-word {
    display: inline-block;
    opacity: 0;
    transform: perspective(600px) translateY(40px) rotateX(-15deg);
    filter: blur(4px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.7s ease;
}

.hero-word.visible {
    opacity: 1;
    transform: perspective(600px) translateY(0) rotateX(0deg);
    filter: blur(0);
}

.hero-word--1 { transition-delay: 0.1s; }
.hero-word--2 { transition-delay: 0.25s; }
.hero-word--3 { transition-delay: 0.4s; }

/* Hero badge dot pulse */
.hero-badge__dot {
    animation: pulse 2.5s ease-in-out infinite;
}

/* Scan line */
.hero-bg__scan-line {
    animation: scanLine 8s linear infinite;
}

/* Glow drift for hero backgrounds */
.hero-bg__glow--cyan {
    animation: glowDrift 14s ease-in-out infinite alternate;
}
.hero-bg__glow--orange {
    animation: glowDrift 18s ease-in-out infinite alternate-reverse;
}

/* Terminal float */
.hero-terminal,
.about-terminal {
    animation: float 7s ease-in-out infinite;
}

/* Floating about badges */
.about-badge--tl { animation: float 5s ease-in-out infinite; animation-delay: -2s; }
.about-badge--br { animation: float 6s ease-in-out infinite; }

/* Terminal cursor blink */
.terminal-cursor {
    animation: blink 1s step-end infinite;
}

/* Scroll indicator bounce */
.scroll-indicator__chevron {
    animation: bounce 2.2s ease-in-out infinite;
}

/* ══════════════════════════════════════
   NAVIGATION ANIMATIONS
   ══════════════════════════════════════ */

/* Mobile nav items slide in staggered */
.nav-open .nav-menu li {
    animation: fadeInRight 0.3s ease forwards;
    opacity: 0;
}
.nav-open .nav-menu li:nth-child(1) { animation-delay: 0.05s; }
.nav-open .nav-menu li:nth-child(2) { animation-delay: 0.10s; }
.nav-open .nav-menu li:nth-child(3) { animation-delay: 0.15s; }
.nav-open .nav-menu li:nth-child(4) { animation-delay: 0.20s; }
.nav-open .nav-menu li:nth-child(5) { animation-delay: 0.25s; }
.nav-open .nav-menu li:nth-child(6) { animation-delay: 0.30s; }

/* ══════════════════════════════════════
   HOVER ANIMATIONS
   ══════════════════════════════════════ */

/* Service cards — icon glow on hover */
.service-card:hover .service-card__icon--cyan {
    animation: glowPulseCyan 2s ease-in-out infinite;
}
.service-card--orange:hover .service-card__icon--orange {
    animation: glowPulseOrange 2s ease-in-out infinite;
}

/* Gear icon on automation card — rotates on hover */
.service-card:hover .service-card__icon svg {
    transition: transform 0.5s ease;
}
/* Target the gear (third card, index 2 = automation) */
.services-grid .service-card:nth-child(3):hover .service-card__icon svg {
    animation: rotateGear 3s linear infinite;
}

/* Service card link arrow push */
.service-card__link svg {
    transition: transform var(--transition);
}
.service-card:hover .service-card__link svg {
    transform: translateX(4px);
}

/* Button arrow push */
.btn svg {
    transition: transform var(--transition);
}
.btn:hover svg {
    transform: translateX(3px);
}

/* Blog card thumbnail zoom */
.blog-card__thumb {
    overflow: hidden;
}
.blog-card .blog-card__thumb img {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-card:hover .blog-card__thumb img {
    transform: scale(1.06);
}

/* Social link hover — bounce up */
.social-link {
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform 0.2s ease;
}
.social-link:hover {
    transform: translateY(-3px);
}

/* Team card hover */
.team-card {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover {
    box-shadow: 0 8px 32px rgba(0,212,255,0.12);
}

/* MVV card hover */
.mvv-card {
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Timeline dot glow on hover */
.timeline-item:hover .timeline-item__dot {
    box-shadow: 0 0 16px rgba(0,212,255,0.6);
    transform: scale(1.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Header CTA shimmer effect */
.btn--orange {
    background-size: 200% auto;
    transition: all 0.3s ease;
}
.btn--orange:hover {
    background-image: linear-gradient(135deg, var(--clr-orange), var(--clr-amber), var(--clr-orange));
    background-size: 200% auto;
    animation: gradientShift 2s linear infinite;
}

/* Stat counter glow on completion (added by JS) */
.stat-counter.counted {
    animation: glowPulseCyan 3s ease-in-out;
}

/* ══════════════════════════════════════
   PAGE TRANSITIONS
   ══════════════════════════════════════ */

/* Body fade-in on page load */
body {
    animation: fadeIn 0.4s ease forwards;
}

/* Back to top reveal animation */
.back-to-top.is-visible {
    animation: scaleIn 0.25s ease forwards;
}

/* Search drawer */
.search-drawer {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ══════════════════════════════════════
   CURSOR GLOW ANIMATION
   ══════════════════════════════════════ */

.cursor-glow {
    transition: opacity 0.3s ease;
}

/* ══════════════════════════════════════
   CONTACT FORM MICRO-INTERACTIONS
   ══════════════════════════════════════ */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.wpcf7 input[type="submit"] {
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Spinner on CF7 submit */
.wpcf7-spinner {
    filter: hue-rotate(170deg);
}

/* ══════════════════════════════════════
   READING PROGRESS BAR
   ══════════════════════════════════════ */

.reading-progress {
    transition: width 0.1s linear;
}

/* ══════════════════════════════════════
   ERROR 404 — digit glow
   ══════════════════════════════════════ */

.error-digit--cyan {
    animation: glowPulseCyan 3s ease-in-out infinite;
}

.error-digit--orange {
    animation: glowPulseOrange 3s ease-in-out infinite;
}

/* ══════════════════════════════════════
   CATEGORY TAB TRANSITION
   ══════════════════════════════════════ */

.cat-tab {
    transition: all 0.2s ease;
}

/* Blog card hide/show during category filter */
.blog-card.hidden {
    display: none;
}

/* ══════════════════════════════════════
   PREFERS-REDUCED-MOTION
   All animations and transitions disabled
   ══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Force scroll-reveal elements visible immediately */
    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hero-word {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    /* Disable cursor glow */
    .cursor-glow { display: none; }

    /* Disable float */
    .hero-terminal,
    .about-terminal,
    .about-badge { animation: none; }

    /* Disable scan line */
    .hero-bg__scan-line { display: none; }

    /* Disable hover transforms */
    .service-card:hover,
    .blog-card:hover,
    .btn:hover,
    .team-card:hover,
    .mvv-card:hover,
    .social-link:hover,
    .back-to-top:hover {
        transform: none !important;
    }

    /* Keep glow/border-color hover for accessibility (visual focus indicator) */
    .service-card:hover { border-color: var(--clr-cyan); }

    /* Remove body fade-in */
    body { animation: none; }

    /* Freeze all background animations */
    .site-bg-orb,
    .blog-masthead,
    .site-footer,
    body,
    .shurikan { animation: none !important; rotate: 0deg !important; }
}

/* ══════════════════════════════════════
   BACKGROUND ORB ANIMATIONS
   ══════════════════════════════════════ */

@keyframes orbFloat1 {
    0%   { transform: translate(0,      0)      scale(1);    }
    20%  { transform: translate(4%,     2%)     scale(1.06); }
    45%  { transform: translate(-2%,    6%)     scale(0.96); }
    70%  { transform: translate(5%,    -3%)     scale(1.04); }
    100% { transform: translate(0,      0)      scale(1);    }
}

@keyframes orbFloat2 {
    0%   { transform: translate(0,      0)      scale(1);    }
    25%  { transform: translate(-5%,   -3%)     scale(1.08); }
    55%  { transform: translate(3%,    -5%)     scale(0.94); }
    80%  { transform: translate(-2%,    4%)     scale(1.03); }
    100% { transform: translate(0,      0)      scale(1);    }
}

@keyframes orbFloat3 {
    0%   { transform: translate(-50%, -50%) scale(1);    }
    30%  { transform: translate(-47%, -53%) scale(1.10); }
    60%  { transform: translate(-53%, -46%) scale(0.92); }
    100% { transform: translate(-50%, -50%) scale(1);    }
}

@keyframes dotGridPulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.7; }
}

@keyframes lightBgShift {
    0%   { background-position: 0%   50%; }
    25%  { background-position: 50%  0%;  }
    50%  { background-position: 100% 50%; }
    75%  { background-position: 50%  100%; }
    100% { background-position: 0%   50%; }
}

/* ── Shurikan animations ── */
/* rotate is a separate CSS property from transform so both compose freely */
@keyframes shuricanSpin {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
}

/* Three float path variants for organic variety */
@keyframes shuricanFloatA {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(6px, -16px); }
}
@keyframes shuricanFloatB {
    0%, 100% { transform: translate(0, 0); }
    30%      { transform: translate(-8px, -12px); }
    65%      { transform: translate(5px, -20px); }
}
@keyframes shuricanFloatC {
    0%, 100% { transform: translate(0, 0); }
    40%      { transform: translate(4px, -8px); }
    75%      { transform: translate(-5px, -18px); }
}

/* Subtle dark gradient shift — used by masthead and footer in dark mode */
@keyframes mastheadShift {
    0%   { background-position: 0%   50%; }
    33%  { background-position: 100% 0%;  }
    66%  { background-position: 50%  100%; }
    100% { background-position: 0%   50%; }
}