/* =====================================================================
   TryApply Web — Advanced Animations
   ===================================================================== */

/* =========================================================================
   1. CUSTOM CURSOR
   ========================================================================= */
.custom-cursor {
    position: fixed;
    width: 12px;
    height: 12px;
    background: var(--color-cyan);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms;
    mix-blend-mode: difference;
    will-change: transform;
}
.custom-cursor.hover {
    transform: translate(-50%, -50%) scale(2.5);
    background: rgba(62, 182, 224, 0.4);
}
.custom-cursor.click { transform: translate(-50%, -50%) scale(0.8); }

.custom-cursor-follower {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(62, 182, 224, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms, width 200ms, height 200ms;
    will-change: transform;
}
.custom-cursor-follower.hover {
    width: 60px;
    height: 60px;
    border-color: rgba(62, 182, 224, 0.8);
}

@media (max-width: 1024px), (pointer: coarse) {
    .custom-cursor, .custom-cursor-follower { display: none; }
}

/* =========================================================================
   2. REVEAL ANIMATIONS
   ========================================================================= */
[data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1), transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-reveal].reveal-in {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal-left] {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1), transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-reveal-left].reveal-in {
    opacity: 1;
    transform: translateX(0);
}

[data-reveal-scale] {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1), transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-reveal-scale].reveal-in {
    opacity: 1;
    transform: scale(1);
}

/* Stagger children */
[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1), transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-reveal-stagger].reveal-in > *:nth-child(1)  { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].reveal-in > *:nth-child(2)  { transition-delay: 0.10s; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].reveal-in > *:nth-child(3)  { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].reveal-in > *:nth-child(4)  { transition-delay: 0.20s; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].reveal-in > *:nth-child(5)  { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].reveal-in > *:nth-child(6)  { transition-delay: 0.30s; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].reveal-in > *:nth-child(7)  { transition-delay: 0.35s; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].reveal-in > *:nth-child(8)  { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].reveal-in > *:nth-child(9)  { transition-delay: 0.45s; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].reveal-in > *:nth-child(n+10) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

/* =========================================================================
   3. MAGNETIC BUTTONS
   ========================================================================= */
.magnetic { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }

/* =========================================================================
   4. PARALLAX
   ========================================================================= */
[data-parallax] { will-change: transform; }

/* =========================================================================
   5. TILT EFFECT (3D card hover)
   ========================================================================= */
.tilt {
    transform-style: preserve-3d;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   6. HEADER PROGRESS BAR
   ========================================================================= */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-cyan), var(--color-cyan-light));
    z-index: 1000;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform 100ms;
    pointer-events: none;
}

/* =========================================================================
   7. PARTICLE BG (Hero)
   ========================================================================= */
.particles {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(62, 182, 224, 0.6);
    border-radius: 50%;
    animation: particle-float 10s linear infinite;
}
@keyframes particle-float {
    0%   { transform: translateY(100vh) translateX(0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-100px) translateX(50px); opacity: 0; }
}

/* =========================================================================
   8. TEXT GRADIENT ANIMATION
   ========================================================================= */
.text-gradient-animate {
    background: linear-gradient(90deg, var(--color-cyan), var(--color-cyan-light), var(--color-cyan));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 4s linear infinite;
}
@keyframes gradient-shift {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* =========================================================================
   9. MARQUEE
   ========================================================================= */
.marquee {
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.marquee__track {
    display: inline-flex;
    gap: 48px;
    animation: marquee 30s linear infinite;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}

/* =========================================================================
   10. REDUCED MOTION RESPECT
   ========================================================================= */
@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;
    }
    .custom-cursor, .custom-cursor-follower, .particle, .scroll-progress { display: none !important; }
}