/* ═══════════════════════════════════════════════════════════════════════════════
   ANIMATIONS.CSS — All Keyframes, Scroll Reveals & Micro-Interactions
   Single source for all animation definitions — no more duplicates
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── SCROLL REVEAL SYSTEM ──────────────────────────────────────────────────── */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

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

.scroll-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

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

.scroll-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

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

.scroll-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

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

/* Stagger Delays */
.delay-100 { transition-delay: 0.1s !important; }
.delay-200 { transition-delay: 0.2s !important; }
.delay-300 { transition-delay: 0.3s !important; }
.delay-400 { transition-delay: 0.4s !important; }
.delay-500 { transition-delay: 0.5s !important; }
.delay-600 { transition-delay: 0.6s !important; }


/* ─── ENTRANCE ANIMATIONS ───────────────────────────────────────────────────── */
.animate-fade-in {
    animation: fadeIn 0.6s var(--ease-out) both;
}

.animate-slide-up {
    animation: slideUp 0.6s var(--ease-out) both;
}

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

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

@keyframes fadeScale {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes codeFadeIn {
    to { opacity: 1; }
}


/* ─── HOVER EFFECTS ─────────────────────────────────────────────────────────── */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

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

.hover-glow:hover {
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.08);
    border-color: var(--gold-border);
}

.hover-glow-cyan:hover {
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.08);
    border-color: var(--cyan-border);
}

.hover-glow-purple:hover {
    box-shadow: 0 0 40px rgba(138, 43, 226, 0.08);
    border-color: var(--purple-border);
}

/* Tilt Card Effect */
.tilt-card {
    transition: transform var(--transition-slow);
    transform-style: preserve-3d;
}


/* ─── MICRO-ANIMATIONS ──────────────────────────────────────────────────────── */

/* Float */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* Pulse */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

/* Bounce */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

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

/* Shimmer */
.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Icon Bounce */
.icon-bounce {
    transition: transform var(--transition-base);
}

.icon-bounce:hover,
.premium-card:hover .icon-bounce {
    animation: iconBounce 0.5s var(--ease-bounce);
}

@keyframes iconBounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.15); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Glow Pulse */
@keyframes glowPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

/* Border Glow */
.border-glow {
    position: relative;
}

.border-glow::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, var(--primary-gold), var(--primary-cyan), var(--primary-purple), var(--primary-gold));
    opacity: 0;
    z-index: -1;
    transition: opacity var(--transition-base);
}

.border-glow:hover::before {
    opacity: 0.3;
}


/* ─── CURSOR / BLINK ────────────────────────────────────────────────────────── */
@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

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


/* ─── BAR / CHART ANIMATIONS ────────────────────────────────────────────────── */
@keyframes barShine {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

@keyframes barGrow1 { from { height: 0; } to { height: 30%; } }
@keyframes barGrow2 { from { height: 0; } to { height: 45%; } }
@keyframes barGrow3 { from { height: 0; } to { height: 70%; } }
@keyframes barGrow4 { from { height: 0; } to { height: 100%; } }
@keyframes barGrow5 { from { height: 0; } to { height: 70%; } }

@keyframes loadingBar {
    0% { width: 0%; }
    50% { width: 100%; }
    100% { width: 0%; }
}


/* ─── FLOATING ELEMENTS ─────────────────────────────────────────────────────── */
@keyframes iconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
    50% { transform: translateY(-20px) rotate(10deg); opacity: 0.6; }
}

@keyframes techFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
    50% { transform: translateY(-25px) rotate(-10deg); opacity: 0.6; }
}

@keyframes aiFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
    50% { transform: translateY(-30px) scale(1.1); opacity: 0.7; }
}

@keyframes partnerFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.35; }
    50% { transform: translateY(-25px) scale(1.05); opacity: 0.6; }
}

@keyframes brandFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.15; }
    50% { transform: translateY(-30px) rotate(5deg); opacity: 0.25; }
}


/* ─── ORBIT / FLOW ANIMATIONS ───────────────────────────────────────────────── */
@keyframes orbitRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

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

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


/* ─── SERVICE FLOAT ANIMATIONS (About Page) ─────────────────────────────────── */
@keyframes floatService1 {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-15px); }
}

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

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


/* ─── CONTACT PAGE ANIMATIONS ───────────────────────────────────────────────── */
@keyframes flapOpen {
    0%, 40%, 100% { transform: rotateX(0deg); }
    20% { transform: rotateX(-180deg); }
}

@keyframes flyMessage1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    50% { transform: translate(40px, -40px) rotate(15deg); opacity: 0.7; }
}

@keyframes flyMessage2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    50% { transform: translate(-30px, 30px) rotate(-12deg); opacity: 0.7; }
}

@keyframes particle1 {
    0%, 100% { transform: translate(0, 0); opacity: 0; }
    50% { transform: translate(20px, -30px); opacity: 1; }
}

@keyframes particle2 {
    0%, 100% { transform: translate(0, 0); opacity: 0; }
    50% { transform: translate(-25px, 20px); opacity: 1; }
}

@keyframes particle3 {
    0%, 100% { transform: translate(0, 0); opacity: 0; }
    50% { transform: translate(15px, -20px); opacity: 1; }
}


/* ─── DIGITAL PAGE ANIMATIONS ───────────────────────────────────────────────── */
@keyframes codeScroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(40px); }
}

@keyframes terminalType {
    to { max-width: 200px; }
}

@keyframes terminalFade {
    to { opacity: 1; }
}

@keyframes floatSnippet1 {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(-8deg); }
}

@keyframes floatSnippet2 {
    0%, 100% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-12px) rotate(8deg); }
}

@keyframes orbitGear1 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(20px, 15px); }
    100% { transform: translate(0, 0); }
}

@keyframes orbitGear2 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-20px, 15px); }
    100% { transform: translate(0, 0); }
}

@keyframes orbitGear3 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(20px, -15px); }
    100% { transform: translate(0, 0); }
}

@keyframes dataFlow1 {
    0% { left: 20%; top: 20%; opacity: 0; }
    50% { left: 50%; top: 50%; opacity: 1; }
    100% { left: 80%; top: 80%; opacity: 0; }
}

@keyframes dataFlow2 {
    0% { right: 20%; top: 20%; opacity: 0; }
    50% { right: 50%; top: 50%; opacity: 1; }
    100% { right: 20%; bottom: 20%; opacity: 0; }
}

/* ─── STUDIO PAGE ANIMATIONS ────────────────────────────────────────────────── */
@keyframes neuralPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ─── ABOUT PAGE ANIMATIONS ─────────────────────────────────────────────────── */
@keyframes numberPulse {
    0% { opacity: 0; transform: scale(0.5); }
    60% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes fillBar {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes drawCircle {
    to { stroke-dashoffset: 16; }
}

@keyframes ripple {
    0% { transform: scale(0.8); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 0.4; }
    100% { transform: scale(0.8); opacity: 0.8; }
}

@keyframes underlineDraw {
    from { stroke-dasharray: 0 300; }
    to { stroke-dasharray: 300 0; }
}


/* ─── REDUCED MOTION ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

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