/* ============================================================
   HOMEPAGE EFEKTY — FINAL kombinace (Lukáš 2026-06-11)
   Načítá se JEN na homepage (@push('head') v home.blade.php).
   Vanilla CSS bez build kroku (Vite/Node 18). Jen transform/opacity.
   Specifikace: docs/NAPADY-HOMEPAGE-ANIMACE.md
============================================================ */

/* ---------- Širší container (jako schválené preview) ----------
   Preview mělo vnitřní obsah 1280px; max-w-7xl s px-8 dává jen 1216px.
   1344px − 64px padding = 1280px. Přebíjí max-width z max-w-7xl
   (stejná specificita, tento soubor se načítá později). */
.fx-wide { max-width: 1344px; }

/* ---------- V1: copper linka pod nadpisem sekce ---------- */
.fx-headline-line {
    width: 72px;
    height: 2px;
    margin: 14px auto 48px;
    background: linear-gradient(90deg, var(--color-copper-400, #C76C2E), var(--color-copper-600, #9A4920));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 1s cubic-bezier(.16, 1, .3, 1) .25s;
}
.fx-headline-line.in-view { transform: scaleX(1); }

/* ---------- V2-4: kreslené podtržení na kartách (šipka statická) ----------
   transform-origin trik: klid = right, hover = left → linka se kreslí zleva
   a při odjetí "odjede" doprava (tah perem, ne gumování). */
.fx-cta-draw { position: relative; align-self: flex-start; }
.fx-cta-draw::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--color-copper-400, #C76C2E), var(--color-copper-600, #9A4920));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.fx-card:hover .fx-cta-draw::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ---------- V3-2: vysouvací pás s čísly kategorie ---------- */
.fx-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: var(--color-deep-black, #0F0F10);
    color: var(--color-copper-400, #C76C2E);
    font-family: 'Orbitron', 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 8px 14px;
    display: flex;
    gap: .6em;
    align-items: center;
    justify-content: center;
    /* +1px: čistý translateY(100%) nechává při subpixel renderingu
       viditelnou ~0.25px tmavou linku pod fotkou */
    transform: translateY(calc(100% + 1px));
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.fx-strip .dot { color: rgba(231, 227, 221, .5); }
.fx-card:hover .fx-strip { transform: translateY(0); }

/* Mobil (bez hoveru): podtržení i pás se vykreslí při doscrollování */
@media (hover: none) {
    .fx-card.in-view .fx-cta-draw::after { transform: scaleX(1); transform-origin: left; }
    .fx-card.in-view .fx-strip { transform: translateY(0); }
}

/* ---------- V1: statistiky pás ---------- */
.fx-stats { position: relative; isolation: isolate; background: #000; padding: 56px 24px; overflow: hidden; }
.fx-stats-grid {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
}
.fx-stat { text-align: center; position: relative; }
.fx-stat + .fx-stat::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: rgba(199, 108, 46, .25);
}
/* Oddělovače dávají smysl jen když jsou statistiky v jedné řadě (≥4 sloupce).
   Na mobilu/tabletu (pod sebou / 2 sloupce) trčí vlevo → skrýt. */
@media (max-width: 960px) {
    .fx-stat + .fx-stat::before { display: none; }
}
.fx-stat .num {
    font-family: 'Orbitron', 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    color: var(--color-copper-400, #C76C2E);
    font-variant-numeric: tabular-nums;
}
.fx-stat .label {
    margin-top: 8px;
    color: rgba(231, 227, 221, .75);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
}

/* ---------- V1: nekonečný marquee produktů (stop na hover) ----------
   Track = 2 identické poloviny → translateX(-50% - půl gapu) = bezešvá
   smyčka. Duplikáty (.fx-dup) jsou aria-hidden + tabindex -1. */
.fx-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.fx-marquee-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: fx-marquee 110s linear infinite;
}
.fx-marquee:hover .fx-marquee-track { animation-play-state: paused; }
@keyframes fx-marquee { to { transform: translateX(calc(-50% - 8px)); } }
.fx-marquee .fx-prod-card { width: 230px; flex-shrink: 0; }

/* Jiskry (.fx-embers) má vlastní globální public/css/embers.css —
   je v layoutu na každé stránce (header + footer + černé sekce). */

/* ---------- prefers-reduced-motion: vše statické ---------- */
@media (prefers-reduced-motion: reduce) {
    .fx-headline-line { transform: scaleX(1) !important; transition: none !important; }
    .fx-cta-draw::after { transform: scaleX(1) !important; transition: none !important; }
    .fx-strip { transform: translateY(0) !important; transition: none !important; }
    .fx-marquee-track { animation: none !important; }
    .fx-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
        scroll-snap-type: x proximity;
        padding-bottom: 8px;
    }
    .fx-marquee .fx-prod-card { scroll-snap-align: start; }
    .fx-marquee .fx-dup { display: none !important; }
    .fx-embers { display: none !important; }
}