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

/* ===== 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 ===== */
.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 ===== */
.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; }
}

.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; }
}

/* ===== GOLD GLOW PULSE & TEXT SHIMMER ===== */
@keyframes goldGlowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(253, 224, 71, 0.25);
    }
    50% {
        box-shadow: 0 0 45px rgba(253, 224, 71, 0.5), 0 0 70px rgba(251, 191, 36, 0.25);
    }
}

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

.hero-label {
    animation: floatBadge 5s ease-in-out infinite;
}

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

.gradient-text-hero {
    background-size: 250% auto;
    animation: textGradientShift 5s ease-in-out infinite;
}

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