/* ══════════════════════════════════════════════════════════════════════════
   landing-fx.css – efekty veřejného webu (titulka, decentně /navod a /registrace)
   Tomáš 12. 10. 2026: „Přidej na veřejný web nějaké wow efekty.“
   Pravidla: jen transform/opacity (60 fps, žádné posuny obsahu = CLS 0), nic
   nepřekrývá obsah, nic nevyskakuje. prefers-reduced-motion: reduce (Tomáš ho má
   zapnutý) = ŽÁDNÝ pohyb, ale stejné barvy, záře a stíny – stránka vypadá hezky i staticky.
   Řídí landing-fx.js (třídy na <html>: fx-js, fx-motion / fx-still).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1) Lišta: při posunu zprůhlední a rozmaže pozadí ─────────────────────── */
.pub-nav.navbar.fixed-top { transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease; }
.pub-nav.fx-scrolled {
    background: rgba(255, 255, 255, .78) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .06), 0 10px 30px -18px rgba(15, 23, 42, .35);
}

/* ── 2) Menu: animované podtržení (gradient značky) ───────────────────────── */
@media (min-width: 992px) {
    .pub-nav .pub-nav-links .nav-link { position: relative; }
    .pub-nav .pub-nav-links .nav-link::after {
        content: ''; position: absolute; left: .55rem; right: .55rem; bottom: .2rem; height: 2px; border-radius: 2px;
        background: linear-gradient(90deg, #2563eb, #7c3aed, #c026d3);
        transform: scaleX(0); transform-origin: left center; transition: transform .28s cubic-bezier(.2, .7, .2, 1);
    }
    .pub-nav .pub-nav-links .nav-link:hover::after,
    .pub-nav .pub-nav-links .nav-link:focus-visible::after,
    .pub-nav .pub-nav-links .nav-link.active::after { transform: scaleX(1); }
}

/* ── 3) Hero: animovaný gradient v nadpisu, pohyblivá mlhovina, naklonění dokladů ─ */
.lp-hero .lp-grad-text {
    background-image: linear-gradient(110deg, #60a5fa 0%, #a78bfa 30%, #f0abfc 50%, #a78bfa 70%, #60a5fa 100%);
    background-size: 220% 100%; background-position: 0% 50%;
}
.lp-hero { --fx-mx: 70%; --fx-my: 30%; }
.lp-hero::before { will-change: transform; }   /* barevné záře z inc_landing – jen je rozpohybujeme */
.lp-stage { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.lp-stage .lp-chip { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }

/* ── 4) Max promo pruh: světelná vlna + spotlight ─────────────────────────── */
.lp-promo { position: relative; overflow: hidden; isolation: isolate; }
.lp-promo::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(40% 120% at 0% 0%, rgba(96, 165, 250, .20), transparent 70%),
        radial-gradient(40% 120% at 100% 100%, rgba(192, 132, 252, .24), transparent 70%);
}
.lp-promo .lp-promo-price {
    background-image: linear-gradient(110deg, #60a5fa 0%, #a78bfa 30%, #f0abfc 50%, #a78bfa 70%, #60a5fa 100%) !important;
    background-size: 220% 100%; background-position: 0% 50%;
}

/* ── 5) Spotlight na tmavých sekcích (sleduje kurzor) ─────────────────────── */
.fx-spot { position: relative; isolation: isolate; }
.fx-spot::after {   /* pod obsahem (z-index -1 v izolovaném kontextu), nad pozadím boxu */
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    background: radial-gradient(460px circle at var(--fx-sx, 70%) var(--fx-sy, 0%), rgba(167, 139, 250, .22), transparent 62%);
    opacity: .75; transition: opacity .3s ease;
}
.fx-spot:hover::after { opacity: 1; }

/* ── 6) Karty: zdvih + záře (ceník, funkce, výhody, kroky) ─────────────────── */
.lp-plan, .lp-hl-card, .lp-step, .lp-f, .nv-tile {
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, border-color .25s ease;
}
.lp-plan:hover, .lp-hl-card:hover, .nv-tile:hover {
    box-shadow: 0 24px 50px -24px rgba(79, 70, 229, .45), 0 0 0 1px rgba(124, 58, 237, .18);
}
.lp-plan--why:hover { box-shadow: 0 24px 50px -20px rgba(124, 58, 237, .65), 0 0 0 1px rgba(196, 181, 253, .35); }
.lp-step:hover, .lp-f:hover { box-shadow: 0 16px 36px -22px rgba(79, 70, 229, .45); }

/* ── 7) Odhalování při posunu ─────────────────────────────────────────────── */
/* Bez JS nebo s omezenými animacemi je všechno vidět hned (žádné skrývání).
   Skrývají se jen prvky pod první obrazovkou (JS) – hero se nikdy neschová (LCP). */

/* ══ POHYB – jen když uživatel animace nevypnul ═══════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
    .lp-hero .lp-grad-text { animation: fx-shine 7s ease-in-out infinite; }
    .lp-promo .lp-promo-price { animation: fx-shine 7s ease-in-out infinite; }
    @keyframes fx-shine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

    .lp-hero::before { animation: fx-drift 22s ease-in-out infinite alternate; }
    @keyframes fx-drift {
        0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
        50%  { transform: translate3d(3%, 2%, 0) rotate(8deg) scale(1.06); }
        100% { transform: translate3d(-2%, 3%, 0) rotate(-6deg) scale(1.02); }
    }
    .lp-promo::before { animation: fx-pulse 9s ease-in-out infinite alternate; }
    @keyframes fx-pulse { from { transform: translate3d(-4%, 0, 0); opacity: .8; } to { transform: translate3d(4%, 0, 0); opacity: 1; } }

    .lp-plan:hover, .lp-hl-card:hover, .nv-tile:hover { transform: translateY(-6px); }
    .lp-step:hover, .lp-f:hover { transform: translateY(-3px); }

    html.fx-motion .fx-reveal { opacity: 0; transform: translate3d(0, 26px, 0); }
    html.fx-motion .fx-reveal.fx-in {
        opacity: 1; transform: none;
        transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
        transition-delay: var(--fx-delay, 0s);
    }
}

/* ══ OMEZENÉ ANIMACE – staticky, ale stejně hezky ═══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .lp-hero .lp-grad-text, .lp-promo .lp-promo-price { animation: none !important; background-position: 30% 50%; }
    .lp-hero::before, .lp-promo::before { animation: none !important; }
    .lp-stage, .lp-stage .lp-chip { transition: none !important; transform: none; }
    .lp-plan, .lp-hl-card, .lp-step, .lp-f, .nv-tile, .pub-nav.navbar.fixed-top,
    .pub-nav .pub-nav-links .nav-link::after, .fx-spot::after { transition: none !important; }
    .fx-reveal { opacity: 1 !important; transform: none !important; }
}

/* Ceny v ceníku „klesají“ (landing-fx.js) – tabulkové číslice, ať text kolem neposkakuje. */
/* POZOR: inc_landing má `.lp-plan-price span { font-size: 1rem }` (pro „/ rok“) – číslo musí
   velikost, tloušťku i barvu ceny zdědit, jinak je cena malým písmem (chyba 12. 10. 2026). */
.lp-plan-price .fx-num, .lp-promo-price .fx-num {
    display: inline; font-size: inherit !important; font-weight: inherit !important; color: inherit !important;
    letter-spacing: inherit !important; text-transform: none !important; font-variant-numeric: tabular-nums;
}