/**
 * 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%); }
}

/* =======================================================================
 * 7) TEMATICKÁ ANIMÁCIA HERO (service_illustration) — rotujúce prstence,
 *    obiehajúci bod, plávajúca ikona + motív podľa témy (scan/radar/flow/cloud/spark)
 * ===================================================================== */
.illu-motif { opacity: 0; }
body.feat-hero-motif .illu-motif { opacity: 1; }
body.feat-hero-motif .illu-ring,
body.feat-hero-motif .illu-orbit,
body.feat-hero-motif .mo-radar,
body.feat-hero-motif .mo-flow { transform-box: view-box; transform-origin: 200px 200px; }

/* entrance */
body.feat-hero-motif .svc-illu-bg { animation: illuIn .9s ease-out both; }
@keyframes illuIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
body.feat-hero-motif .svc-illu-core { animation: illuCoreIn .7s .25s cubic-bezier(.2,.8,.2,1) both, illuFloat 5.5s 1s ease-in-out infinite; }
@keyframes illuCoreIn { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@keyframes illuFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* rotujúce prstence a obiehajúci bod */
body.feat-hero-motif .illu-ring--outer { animation: illuSpin 60s linear infinite; }
body.feat-hero-motif .illu-ring--inner { animation: illuSpinRev 46s linear infinite; }
body.feat-hero-motif .illu-orbit { animation: illuSpin 13s linear infinite; }
body.feat-hero-motif .illu-orbit-dot { filter: drop-shadow(0 0 5px #5a9bff); }
@keyframes illuSpin { to { transform: rotate(360deg); } }
@keyframes illuSpinRev { to { transform: rotate(-360deg); } }

/* motív: scan (bezpečnosť) */
body.feat-hero-motif .mo-scan { animation: moScan 3.4s ease-in-out infinite; }
@keyframes moScan { 0% { transform: translateY(-148px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(148px); opacity: 0; } }
/* motív: radar (kamery/prístupy) */
body.feat-hero-motif .mo-radar { animation: illuSpin 4s linear infinite; }
/* motív: cloud (cloud/zálohy) */
body.feat-hero-motif .mo-cloud { animation: moCloud 2.6s ease-in-out infinite; }
@keyframes moCloud { 0% { transform: translateY(16px); opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }
/* motív: flow (siete) — pakety obiehajú */
body.feat-hero-motif .mo-flow--outer { animation: illuSpin 6s linear infinite; }
body.feat-hero-motif .mo-flow--inner { animation: illuSpinRev 5s linear infinite; }
/* motív: spark (AI/vývoj/predaj) — iskrenie */
body.feat-hero-motif .mo-spark { transform-box: fill-box; transform-origin: center; animation: moSpark 2.4s ease-in-out infinite; }
@keyframes moSpark { 0%, 100% { opacity: .15; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.25); } }

/* =======================================================================
 * 8) HERO INTRO — postupné „vyplávanie" prvkov hero pri načítaní
 * ===================================================================== */
body.feat-hero-intro .hero-inner > * { opacity: 0; animation: heroFadeUp .75s cubic-bezier(.2,.8,.2,1) forwards; }
body.feat-hero-intro .hero-inner > .hero-badge { animation-delay: .05s; }
body.feat-hero-intro .hero-inner > h1 { animation-delay: .16s; }
body.feat-hero-intro .hero-inner > .hero-lead { animation-delay: .3s; }
body.feat-hero-intro .hero-inner > .hero-actions { animation-delay: .44s; }
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* =======================================================================
 * 9) KASKÁDOVÉ KARTY — postupné objavenie kariet v mriežke
 * ===================================================================== */
body.feat-card-cascade .grid > .reveal:nth-child(2) { transition-delay: .1s !important; }
body.feat-card-cascade .grid > .reveal:nth-child(3) { transition-delay: .2s !important; }
body.feat-card-cascade .grid > .reveal:nth-child(4) { transition-delay: .3s !important; }
body.feat-card-cascade .grid > .reveal:nth-child(5) { transition-delay: .4s !important; }
body.feat-card-cascade .grid > .reveal:nth-child(6) { transition-delay: .5s !important; }

/* =======================================================================
 * 10) ANIMOVANÉ PODČIARKNUTIE NADPISOV SEKCIÍ
 * ===================================================================== */
body.feat-heading-accent .section-head h2 { position: relative; display: inline-block; }
/* Eyebrow musí ostať na vlastnom riadku — inak by sedel vedľa inline-block h2 na jednom riadku. */
body.feat-heading-accent .section-head .eyebrow { display: block; }
body.feat-heading-accent .section-head h2::after {
    content: ''; position: absolute; left: 50%; bottom: -12px; width: 54px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--brand), #7c5cff); transform: translateX(-50%) scaleX(0);
    transform-origin: center; transition: transform .6s .2s cubic-bezier(.2,.8,.2,1);
}
body.feat-heading-accent .section-head.reveal.in h2::after,
body.feat-heading-accent .section-head:not(.reveal) h2::after { transform: translateX(-50%) scaleX(1); }

/* =======================================================================
 * 11) NAKRESLENIE FAJOK V ZOZNAMOCH
 * ===================================================================== */
body.feat-checklist-ticks .in .checklist .tick,
body.feat-checklist-ticks .checklist.in .tick { animation: tickPop .5s cubic-bezier(.2,.8,.2,1) both; }
body.feat-checklist-ticks .checklist li:nth-child(2) .tick { animation-delay: .1s; }
body.feat-checklist-ticks .checklist li:nth-child(3) .tick { animation-delay: .2s; }
body.feat-checklist-ticks .checklist li:nth-child(4) .tick { animation-delay: .3s; }
@keyframes tickPop { 0% { transform: scale(0) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.18) rotate(4deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* =======================================================================
 * 12) PULZ CTA PÁSU
 * ===================================================================== */
body.feat-cta-pulse .cta-band { animation: ctaPulse 3.4s ease-in-out infinite; }
@keyframes ctaPulse { 0%, 100% { box-shadow: var(--shadow); } 50% { box-shadow: var(--shadow), 0 0 60px rgba(27, 116, 255, .38); } }

/* =======================================================================
 * 13) MIKRO-ANIMÁCIA IKONY KARTY PRI HOVER
 * ===================================================================== */
body.feat-card-icon-fx .card .card-ico { transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s, box-shadow .22s; }
body.feat-card-icon-fx .card:hover .card-ico { transform: translateY(-4px) scale(1.08) rotate(-4deg); box-shadow: 0 10px 22px rgba(27, 116, 255, .28); }

/* =======================================================================
 * 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; }
    body.feat-hero-motif .illu-motif { opacity: 0; }
    body.feat-hero-motif .illu-ring,
    body.feat-hero-motif .illu-orbit,
    body.feat-hero-motif .svc-illu-bg,
    body.feat-hero-motif .svc-illu-core { animation: none !important; }
    body.feat-hero-intro .hero-inner > * { opacity: 1; animation: none; }
    body.feat-card-cascade .grid > .reveal { transition-delay: 0s !important; }
    body.feat-heading-accent .section-head h2::after { transition: none; }
    body.feat-checklist-ticks .checklist .tick { animation: none !important; }
    body.feat-cta-pulse .cta-band { animation: none; }
    body.feat-card-icon-fx .card:hover .card-ico { transform: none; }
}