/* ============================================
   TCL — ANIMATIONS & 3D EFFECTS
   ============================================ */

/* ===== FLOAT ANIMATION ===== */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(3deg); }
}

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

.float { animation: float 6s ease-in-out infinite; }
.float-slow { animation: floatSlow 8s ease-in-out infinite; }
.float-reverse { animation: floatReverse 7s ease-in-out infinite; }
.float-delay-1 { animation-delay: 1s; }
.float-delay-2 { animation-delay: 2s; }
.float-delay-3 { animation-delay: 3s; }

/* ===== GLOW EFFECTS ===== */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(var(--accent-main-rgb), 0.1);
    }
    50% {
        box-shadow: 0 0 40px rgba(var(--accent-main-rgb), 0.2), 0 0 80px rgba(var(--accent-cyan-rgb), 0.1);
    }
}

@keyframes borderGlow {
    0%, 100% {
        border-color: rgba(var(--accent-main-rgb), 0.2);
    }
    50% {
        border-color: rgba(var(--accent-main-rgb), 0.5);
    }
}

.glow-pulse { animation: glowPulse 4s ease-in-out infinite; }
.border-glow { animation: borderGlow 3s ease-in-out infinite; }

/* ===== 3D PARALLAX ===== */
.parallax-container {
    perspective: 1200px;
    transform-style: preserve-3d;
}

.parallax-layer-back {
    transform: translateZ(-100px) scale(1.1);
}

.parallax-layer-mid {
    transform: translateZ(-50px) scale(1.05);
}

.parallax-layer-front {
    transform: translateZ(0px);
}

/* ===== SCROLL REVEAL ANIMATIONS ===== */
.anim-fade-up {
    opacity: 0;
    transform: translateY(60px);
}

.anim-fade-up.animated {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.anim-fade-left {
    opacity: 0;
    transform: translateX(-60px);
}

.anim-fade-left.animated {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.anim-fade-right {
    opacity: 0;
    transform: translateX(60px);
}

.anim-fade-right.animated {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.anim-scale-up {
    opacity: 0;
    transform: scale(0.85);
}

.anim-scale-up.animated {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.anim-rotate-in {
    opacity: 0;
    transform: perspective(1000px) rotateY(-15deg) translateX(-30px);
}

.anim-rotate-in.animated {
    opacity: 1;
    transform: perspective(1000px) rotateY(0deg) translateX(0);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

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

/* ===== GRADIENT BORDER ===== */
.gradient-border {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    padding: 1px;
    background: var(--gradient-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity var(--duration-normal) var(--ease-out);
}

.gradient-border:hover::before {
    opacity: 1;
}

/* ===== SHIMMER EFFECT ===== */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.shimmer {
    position: relative;
    overflow: hidden;
}

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

/* ===== TYPING ANIMATION ===== */
@keyframes typing {
    0%, 60% { width: 0; }
    80%, 100% { width: 100%; }
}

@keyframes blink {
    0%, 100% { border-color: transparent; }
    50% { border-color: var(--accent-main); }
}

.typing-effect {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--accent-main);
    animation: typing 4s steps(40) infinite, blink 0.8s step-end infinite;
}

/* ===== COUNTER ANIMATION ===== */
@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.count-anim {
    animation: countUp 0.6s var(--ease-out) forwards;
}

/* ===== RIPPLE EFFECT ===== */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
    transition: transform 0.6s var(--ease-out), opacity 0.6s;
    opacity: 0;
    pointer-events: none;
}

.ripple:hover::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* ===== MAGNETIC HOVER ===== */
.magnetic {
    transition: transform var(--duration-fast) var(--ease-out);
}

/* ===== PARTICLE DOTS ===== */
@keyframes particleDrift {
    0% { transform: translate(0, 0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(var(--dx, 50px), var(--dy, -80px)); opacity: 0; }
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-main);
    opacity: 0;
    pointer-events: none;
}

/* ===== LINE DECORATION ===== */
.line-decoration {
    position: relative;
}

.line-decoration::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.line-decoration.center::after {
    left: 50%;
    transform: translateX(-50%);
}

/* ===== GLOW ORB DECORATIONS ===== */
.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.glow-orb-emerald {
    background: rgba(var(--accent-main-rgb), 0.15);
}

.glow-orb-cyan {
    background: rgba(var(--accent-cyan-rgb), 0.12);
}

.glow-orb-purple {
    background: rgba(var(--accent-violet-rgb), 0.12);
}

/* ===== GLASS REFRACTION HOVER ===== */
/* Prismatic light-shift on card hover — transparency/clarity metaphor */
.glass-refract {
    position: relative;
    overflow: hidden;
}

.glass-refract::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(16, 185, 129, 0.04) 40deg,
        rgba(45, 212, 191, 0.06) 80deg,
        rgba(251, 191, 36, 0.03) 120deg,
        transparent 160deg,
        rgba(16, 185, 129, 0.04) 200deg,
        rgba(45, 212, 191, 0.06) 240deg,
        transparent 360deg
    );
    opacity: 0;
    transition: opacity 0.6s var(--ease-out), transform 4s linear;
    pointer-events: none;
    z-index: 1;
}

.glass-refract:hover::after {
    opacity: 1;
    animation: refractionSpin 8s linear infinite;
}

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

/* ===== DATA STREAM DIVIDER ===== */
/* Animated particle line between sections — carbon data pipeline */
.data-stream {
    position: relative;
    width: 100%;
    height: 2px;
    margin: 0 auto;
    overflow: visible;
}

.data-stream::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(16, 185, 129, 0.08) 15%,
        rgba(16, 185, 129, 0.15) 50%,
        rgba(16, 185, 129, 0.08) 85%,
        transparent 100%
    );
}

.data-stream::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -10%;
    width: 80px;
    height: 5px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(16, 185, 129, 0.6),
        rgba(45, 212, 191, 0.8),
        rgba(251, 191, 36, 0.4),
        transparent
    );
    border-radius: 50%;
    filter: blur(1px);
    animation: streamFlow 4s linear infinite;
}

@keyframes streamFlow {
    0% { left: -10%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 110%; opacity: 0; }
}

/* Node dot in the center of the stream */
.data-stream-node {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-main);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.5), 0 0 30px rgba(16, 185, 129, 0.2);
    animation: nodePulse 3s ease-in-out infinite;
    z-index: 2;
}

@keyframes nodePulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.8; }
    50% { transform: translateX(-50%) scale(1.4); opacity: 1; }
}

/* ===== GLOBE GLOW PULSE ===== */
@keyframes globeGlow {
    0%, 100% {
        box-shadow: 0 0 60px rgba(16, 185, 129, 0.05);
    }
    50% {
        box-shadow: 0 0 120px rgba(16, 185, 129, 0.12), 0 0 200px rgba(45, 212, 191, 0.05);
    }
}

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