/* =========================================================
   Landing Animations — Joelinks
   Phase 1: Hero orbs, gradient text, scroll-reveal, stat counters,
            glassmorphism widgets, CTA pulse glow
   ========================================================= */

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

/* ---------------------------------------------------------
   Hero Section — animated gradient background
   --------------------------------------------------------- */
.hero-section {
    position: relative;
    overflow: hidden;
    background-size: 300% 300% !important;
    animation: gradientShift 15s ease infinite;
}

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

/* ---------------------------------------------------------
   Floating orbs
   --------------------------------------------------------- */
.hero-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #8b5cf6, #5e5bed);
    top: -100px;
    left: -80px;
    animation: floatOrb1 8s ease-in-out infinite;
}

.orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #a78bfa, #7c3aed);
    top: 40%;
    right: -60px;
    animation: floatOrb2 12s ease-in-out infinite;
}

.orb-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #c4b5fd, #5e5bed);
    bottom: -60px;
    left: 40%;
    animation: floatOrb3 10s ease-in-out infinite;
}

@keyframes floatOrb1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(30px, -20px) scale(1.05); }
    66%       { transform: translate(-20px, 30px) scale(0.95); }
}

@keyframes floatOrb2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40%       { transform: translate(-25px, 20px) scale(1.08); }
    70%       { transform: translate(15px, -15px) scale(0.92); }
}

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

/* ---------------------------------------------------------
   Hero content — z-index lift so orbs stay behind
   --------------------------------------------------------- */
.hero-section .container {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------
   Gradient headline
   --------------------------------------------------------- */
.hero-title {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.75) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* ---------------------------------------------------------
   Entrance animations — hero elements stagger in
   --------------------------------------------------------- */
@keyframes heroEntrance {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    animation: heroEntrance 0.7s ease forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

.hero-subtitle {
    animation: heroEntrance 0.7s ease forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

.search-form {
    animation: heroEntrance 0.7s ease forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

/* ---------------------------------------------------------
   Scroll-reveal — base state
   --------------------------------------------------------- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* ---------------------------------------------------------
   Glassmorphism sidebar widgets
   --------------------------------------------------------- */
@supports (backdrop-filter: blur(1px)) {
    .sidebar-widget.glass {
        background: rgba(255, 255, 255, 0.75) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        box-shadow: 0 4px 24px rgba(94, 91, 237, 0.08);
    }
}

/* ---------------------------------------------------------
   Stat counter spans
   --------------------------------------------------------- */
.stat-number {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    transition: transform 0.1s ease;
}

/* ---------------------------------------------------------
   CTA button — pulse glow
   --------------------------------------------------------- */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(94, 91, 237, 0.4),
                    0 4px 16px rgba(94, 91, 237, 0.25);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(94, 91, 237, 0),
                    0 4px 24px rgba(94, 91, 237, 0.45);
    }
}

.btn-primary.magnetic-btn {
    animation: pulseGlow 2.8s ease-in-out infinite;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    will-change: transform;
}

/* ---------------------------------------------------------
   Search input focus enhancement
   --------------------------------------------------------- */
.search-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(94, 91, 237, 0.2) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}