/* ═══ Homepage Visual FX ═══ */

/* ─── Ticker ─── */
.ticker-bar {
    background: linear-gradient(90deg, var(--green-500), var(--green-400), var(--green-500));
    background-size: 200% auto;
    animation: tickerGradient 6s linear infinite;
    padding: 0.75rem 0;
    overflow: hidden;
    position: relative;
    z-index: 15;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}
.ticker-track {
    display: flex;
    align-items: center;
    gap: 3rem;
    white-space: nowrap;
    animation: tickerScroll 35s linear infinite;
    width: max-content;
    min-height: 1.5rem;
}
.ticker-item {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: rgba(255,255,255,0.95); font-size: 0.82rem; font-weight: 600;
}
.ticker-dot {
    width: 6px; height: 6px; background: #fff; border-radius: 50%;
    animation: livePulse 1.5s infinite;
}

/* ─── Section dividers ─── */
.section-divider {
    position: relative; height: 80px; overflow: hidden;
    margin: -1px 0;
}
.section-divider svg { width: 100%; height: 100%; display: block; }
.wave-animate path {
    animation: waveMorph 8s ease-in-out infinite;
}

/* ─── Floating section decor ─── */
.section-deco {
    position: absolute; pointer-events: none; z-index: 0;
    border-radius: 50%; filter: blur(60px); opacity: 0.5;
}
.section-deco-1 { width: 300px; height: 300px; background: rgba(10,77,38,0.06); top: -50px; left: -100px; animation: decoFloat 12s ease-in-out infinite; }
.section-deco-2 { width: 250px; height: 250px; background: rgba(10,77,38,0.05); bottom: -80px; right: -80px; animation: decoFloat 10s ease-in-out infinite reverse; }

.section-header .title-underline {
    width: 60px; height: 4px; margin: 1rem auto 0;
    background: linear-gradient(90deg, transparent, var(--green-400), transparent);
    border-radius: 4px;
    transform: scaleX(0);
    transition: transform 0.8s var(--ease);
}
.section-header.visible .title-underline { transform: scaleX(1); }

/* ─── Auto-scroll categories ─── */
.categories-marquee {
    overflow: hidden; margin-bottom: 2rem; position: relative;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.categories-marquee-track {
    display: flex; gap: 0.75rem; width: max-content;
    animation: marqueeScroll 45s linear infinite;
}
.categories-marquee-track:hover { animation-play-state: paused; }
.categories-marquee .category-pill {
    animation: pillGlow 3s ease-in-out infinite;
    animation-delay: calc(var(--pill-i, 0) * 0.15s);
}

/* ─── Enhanced cards ─── */
.quick-card, .category-card, .content-card {
    transform-style: preserve-3d;
    will-change: transform;
}
.quick-card .quick-shine {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.6s;
}
.quick-card:hover .quick-shine { transform: translateX(100%); }

.category-card .cat-border-anim {
    position: absolute; inset: -2px; border-radius: inherit; z-index: 0;
    background: conic-gradient(from var(--border-angle, 0deg), var(--green-400), transparent, var(--green-300), transparent, var(--green-400));
    animation: borderSpin 4s linear infinite;
    opacity: 0; transition: opacity 0.4s;
}
.category-card::before {
    content: ''; position: absolute; inset: 1px; border-radius: inherit;
    background: var(--white); z-index: 1;
}
.category-card:hover .cat-border-anim { opacity: 1; }
.category-card .cat-glow { z-index: 2; }
.category-card > *:not(.cat-border-anim):not(.cat-glow) { position: relative; z-index: 3; }

.content-card { perspective: 800px; }
.content-card .card-shimmer {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    z-index: 5; pointer-events: none;
    transition: left 0.7s var(--ease);
}
.content-card:hover .card-shimmer { left: 150%; }

/* ─── Featured hero shine ─── */
.featured-hero .hero-shine {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
    animation: heroShine 5s ease-in-out infinite;
}

/* ─── CTA enhanced ─── */
.cta-box {
    animation: ctaGlow 4s ease-in-out infinite;
}
.cta-border {
    position: absolute; inset: 0; border-radius: inherit; padding: 2px;
    background: linear-gradient(var(--border-angle, 0deg), var(--green-300), transparent, var(--green-400), transparent);
    animation: borderSpin 6s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.cta-particles {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.cta-particle {
    position: absolute; width: 3px; height: 3px;
    background: rgba(255,255,255,0.4); border-radius: 50%;
    animation: ctaParticleRise 4s ease-in infinite;
}

/* ─── Stagger grid children ─── */
.stagger-grid > * {
    opacity: 0; transform: translateY(30px) scale(0.97);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease-bounce);
}
.stagger-grid.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-grid.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-grid.visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-grid.visible > *:nth-child(4) { transition-delay: 0.2s; }
.stagger-grid.visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-grid.visible > *:nth-child(6) { transition-delay: 0.3s; }
.stagger-grid.visible > *:nth-child(7) { transition-delay: 0.35s; }
.stagger-grid.visible > *:nth-child(8) { transition-delay: 0.4s; }
.stagger-grid.visible > *:nth-child(9) { transition-delay: 0.45s; }
.stagger-grid.visible > *:nth-child(10) { transition-delay: 0.5s; }
.stagger-grid.visible > *:nth-child(11) { transition-delay: 0.55s; }
.stagger-grid.visible > *:nth-child(12) { transition-delay: 0.6s; }
.stagger-grid.visible > * {
    opacity: 1; transform: translateY(0) scale(1);
}

/* ─── Magnetic btn ─── */
.btn-magnetic { transition: transform 0.2s var(--ease); }

/* ─── Scroll progress ─── */
.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
    background: transparent; pointer-events: none;
}
.scroll-progress-bar {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--green-500), var(--green-300), var(--green-200));
    box-shadow: 0 0 10px var(--green-glow);
    transition: width 0.1s linear;
}

/* ─── Keyframes ─── */
@keyframes particleDrift {
    0% { opacity: 0; transform: translateY(100vh) scale(0); }
    10% { opacity: 0.6; }
    90% { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-20vh) scale(1); }
}
@keyframes beamSweep {
    0%, 100% { opacity: 0.3; transform: rotate(-5deg); }
    50% { opacity: 0.8; transform: rotate(5deg); }
}
@keyframes patternShift {
    0% { background-position: 0 0; }
    100% { background-position: 60px 60px; }
}
@keyframes ringRotate {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
}
@keyframes ringPulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.08); opacity: 0.6; }
}
@keyframes iconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(8deg); }
}
@keyframes sparkleBlink {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}
@keyframes charReveal {
    to { opacity: 1; transform: translateY(0) rotateX(0); }
}
@keyframes corePulse {
    0%, 100% { box-shadow: 0 0 60px rgba(10,77,38,0.35), 0 0 120px rgba(10,77,38,0.15); transform: scale(1); }
    50% { box-shadow: 0 0 80px rgba(10,77,38,0.5), 0 0 160px rgba(10,77,38,0.2); transform: scale(1.05); }
}
@keyframes orbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes statPop {
    from { opacity: 0; transform: translateY(30px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tickerGradient {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}
@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes waveMorph {
    0%, 100% { d: path("M0,64 C360,120 720,0 1080,64 C1260,96 1380,80 1440,64 L1440,120 L0,120 Z"); }
    50% { d: path("M0,80 C360,40 720,100 1080,50 C1260,70 1380,90 1440,70 L1440,120 L0,120 Z"); }
}
@keyframes decoFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -20px); }
}
@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes pillGlow {
    0%, 100% { box-shadow: var(--shadow-sm); }
    50% { box-shadow: 0 4px 20px rgba(10,77,38,0.15); }
}
@keyframes borderSpin {
    to { --border-angle: 360deg; }
}
@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes heroShine {
    0%, 100% { opacity: 0; transform: translateX(-100%); }
    50% { opacity: 1; transform: translateX(100%); }
}
@keyframes ctaGlow {
    0%, 100% { box-shadow: var(--shadow-lg); }
    50% { box-shadow: 0 20px 60px rgba(10,77,38,0.3), var(--shadow-lg); }
}
@keyframes ctaParticleRise {
    0% { opacity: 0; transform: translateY(100%) scale(0); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-100%) scale(1); }
}

@media (max-width: 768px) {
    .ticker-track { animation-duration: 20s; }

    /* ─── Fix unwanted margins / horizontal overflow on mobile ─── */
    html, body {
        overflow-x: hidden !important;
        max-width: 100%;
        width: 100%;
    }

    .main-content {
        overflow-x: hidden;
        max-width: 100%;
    }

    .section {
        overflow: hidden;
    }

    .section-deco,
    .cta-particles,
    .category-card .cat-border-anim {
        display: none !important;
    }

    .wave-animate path,
    .ticker-bar,
    .ticker-track,
    .categories-marquee-track,
    .categories-marquee .category-pill,
    .featured-hero .hero-shine,
    .cta-box,
    .cta-border {
        animation: none !important;
    }

    .ticker-bar {
        background: var(--green-400);
        padding: 0.65rem 0;
    }

    .ticker-track {
        transform: none !important;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        gap: 0.45rem 0.75rem;
        padding: 0.25rem 0.75rem 0.35rem;
        white-space: normal;
        min-height: auto;
    }

    .quick-access {
        padding-top: 1.25rem;
    }

    .ticker-item:nth-child(n+9) {
        display: none;
    }

    .categories-marquee {
        mask-image: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .categories-marquee::-webkit-scrollbar {
        display: none;
    }

    .categories-marquee-track {
        transform: none !important;
        width: max-content;
        max-width: none;
    }

    .categories-marquee .category-pill:nth-child(n+27) {
        display: none;
    }

    .reveal,
    .reveal.visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .stagger-grid > *,
    .stagger-grid.visible > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .title-char {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .quick-card,
    .category-card,
    .content-card {
        will-change: auto;
        transform-style: flat;
    }

    .quick-card:hover,
    .category-card:hover,
    .content-card:hover,
    .stat-box:hover {
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ticker-track, .categories-marquee-track,
    .cta-box { animation: none !important; }
}