/**
 * enhance.css — vizuálne vylepšenia webu (aurora hero, scroll progress,
 * magnetické CTA, 3D karty, animované čísla, marquee).
 *
 * Každá sekcia je scoped pod telom body.feat-* — vypnutím vlajky v
 * inc/features.php sa daná sekcia neaktivuje. Celý súbor je oddelený od
 * site.css, takže sa dá odpojiť jedným <link>-om. Rešpektuje prefers-reduced-motion.
 */

/* =======================================================================
 * 1) AURORA HERO — animovaná žiara + svetlo za kurzorom
 * ===================================================================== */
body.feat-aurora-hero .hero { --mx: 50%; --my: 28%; }
body.feat-aurora-hero .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;                 /* nad tmavým prekryvom (::after -1), pod obsahom (.container 1) */
    pointer-events: none;
    background:
        radial-gradient(260px 260px at var(--mx) var(--my), rgba(255, 255, 255, .14), transparent 60%),
        radial-gradient(42% 58% at 16% 22%, rgba(27, 116, 255, .50), transparent 70%),
        radial-gradient(38% 52% at 84% 18%, rgba(120, 90, 255, .42), transparent 70%),
        radial-gradient(46% 60% at 72% 88%, rgba(16, 185, 129, .30), transparent 72%);
    filter: blur(24px) saturate(125%);
    opacity: .85;
    animation: auroraBreath 15s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}
@keyframes auroraBreath {
    0%   { opacity: .70; filter: blur(22px) saturate(120%) hue-rotate(0deg); }
    100% { opacity: 1;   filter: blur(30px) saturate(150%) hue-rotate(20deg); }
}

/* =======================================================================
 * 2) SCROLL PROGRESS — tenký ukazovateľ prečítania navrchu
 * ===================================================================== */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--brand), #7c5cff 60%, var(--success));
    z-index: 1000;
    pointer-events: none;
    will-change: transform;
}

/* =======================================================================
 * 3) MAGNETIC CTA — jemné priťahovanie kurzorom (transform rieši JS)
 * ===================================================================== */
body.feat-magnetic-cta .btn.magnetic { will-change: transform; transition: transform .18s cubic-bezier(.2, .8, .2, 1); }

/* =======================================================================
 * 4) TILT CARDS — 3D naklonenie + odlesk
 * ===================================================================== */
body.feat-tilt-cards .card.tilt {
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
    overflow: hidden;
}
body.feat-tilt-cards .card .tilt-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    background: radial-gradient(220px 220px at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .35), transparent 60%);
    z-index: 2;
}
body.feat-tilt-cards .card.is-tilting .tilt-glare { opacity: 1; }

/* =======================================================================
 * 5) STAT COUNTERS — pás s animovanými číslami
 * ===================================================================== */
.stat-section { padding-top: 0; }
.stat-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 34px 28px;
    border-radius: var(--radius-lg);
    background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 60%, #123a6b 100%);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.stat-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(40% 120% at 15% 0%, rgba(27, 116, 255, .35), transparent 60%);
    pointer-events: none;
}
.stat { text-align: center; position: relative; z-index: 1; }
.stat-num {
    display: block;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.stat-label { display: block; margin-top: 6px; color: #aebfd6; font-size: .95rem; font-weight: 500; }
@media (max-width: 720px) {
    .stat-band { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
}

/* =======================================================================
 * 6) BRAND MARQUEE — plynulá stena technológií
 * ===================================================================== */
.marquee-section { padding-top: 40px; padding-bottom: 8px; }
.marquee-eyebrow {
    text-align: center;
    color: var(--faint);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: marqueeSlide 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
    flex: 0 0 auto;
    padding: 11px 22px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--muted);
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}
@keyframes marqueeSlide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* =======================================================================
 * Prístupnosť — pri redukovanom pohybe stlmiť všetky efekty
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    body.feat-aurora-hero .hero::before { animation: none; }
    .marquee-track { animation: none; }
    .scroll-progress { display: none; }
    body.feat-magnetic-cta .btn.magnetic,
    body.feat-tilt-cards .card.tilt { transition: none !important; transform: none !important; }
}