/* ==========================================================================
   SMOTO — ruch, reakcja i dostępność (v19.11)

   Przegląd całego serwisu według zasad Apple „Designing Fluid Interfaces"
   (WWDC 2018) przeniesionych na web. Ten plik ładuje się PO main.css
   i model.css i tylko dopisuje/nadpisuje — niczego tam nie usuwa, więc
   wycofanie całości to jedna linijka w functions.php.

   Co tu jest, w kolejności wagi:
    1. Reakcja na wciśnięcie (§1 „Response"): elementy klikalne dostają
       odpowiedź w chwili dotknięcia, nie po puszczeniu. Wcześniej reakcja na
       dotyk istniała tylko w pasku „Zadzwoń / WhatsApp".
    2. Najechanie tylko tam, gdzie jest kursor: na telefonie uniesienie karty
       po dotknięciu „zawisało" do następnego dotknięcia gdzie indziej.
    3. Konkretne właściwości zamiast `transition: all` (§11): „all" animował
       też padding i wymiary, czyli przeliczał układ strony co klatkę.
    4. „Ogranicz ruch" (§14): main.css nie miał ANI JEDNEJ takiej reguły przy
       5 zapętlonych animacjach, w tym powiększaniu tła na cały ekran.
    5. „Ogranicz przezroczystość" i „Zwiększ kontrast" (§12, §14).
    6. Widoczny fokus z klawiatury.
    7. Drobne: pulsująca kropka i kółko myszy animowane tylko transform
       i opacity, pasek marek zatrzymuje się pod kursorem, FAQ zamyka się tą
       samą drogą, którą się otwiera (§7), krótsza kaskada w hero.
    8. Podgląd zdjęć na /realizacje/ — style dla assets/js/podglad.js.
   ========================================================================== */


/* ── 1. Reakcja na wciśnięcie ───────────────────────────────────────────────
   Przycisk ma zareagować na dotknięcie natychmiast (80 ms), a wrócić
   spokojnie (czas z reguły bazowej). Szary błysk dotyku z Androida/iOS to
   zgrubny zastępnik tej reakcji — tam, gdzie mamy własną, wyłączamy go.
   Tylko elementy, które naprawdę coś robią: karty-artykuły nie są linkami,
   więc „wciśnięcie" ich byłoby fałszywą obietnicą. */

.btn {
    transition-property: background-color, color, border-color, box-shadow, transform, opacity;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out);
}

.btn, .nav-link, .nav-toggle, .mdl-btn, .mdl-btn-obrys, .mcb-btn, .real-filter,
.real-thumb, .scroll-top, .mdl-real-link, .mdl-marka-modele a, .post-tags a,
.blog-pagination a, .faq-question, .mdl-faq summary, .brands-slide a,
.wpforms-submit, .wyc-form button {
    -webkit-tap-highlight-color: transparent;
}

/* Efekt „magnesu" (main.js) przesuwa przycisk przez zmienne --mag-x/--mag-y,
   a nie przez style.transform — inaczej styl wpisany przez skrypt wygrywał
   z :active i przycisk pod kursorem nie reagował na kliknięcie. */
@media (hover: hover) and (pointer: fine) {
    .btn-primary {
        transform: translate(var(--mag-x, 0px), var(--mag-y, 0px));
    }
    .btn-primary:hover {
        transform: translate(var(--mag-x, 0px), var(--mag-y, 0px)) scale(1.04);
    }
}


/* ── 2. Najechanie tylko tam, gdzie jest kursor ─────────────────────────────
   Na ekranie dotykowym :hover włącza się po dotknięciu i zostaje. Unoszenie
   i powiększanie zostawiamy dla myszy; zmiany koloru są nieszkodliwe. */

@media (hover: none) {
    .btn-primary:hover, .btn-outline:hover, .nav-link--cta:hover,
    .service-card:hover, .review-card:hover, .scroll-top:hover,
    .gallery-item:hover, .blog-card:hover, .real-thumb:hover,
    .brand-service-card:hover, .mdl-btn:hover,
    .about-img-wrapper:hover .about-img,
    .service-card:hover .service-card-icon,
    .gallery-item:hover .gallery-img-wrapper img,
    .workshop-img-main:hover img,
    .workshop-img-detail:hover img,
    .blog-card:hover .blog-card-img {
        transform: none;
    }
}

/* Wciśnięcie — PO bloku wyżej, żeby na telefonie wygrało z :hover. */
.btn:active, .nav-link--cta:active, .mdl-btn:active, .mdl-btn-obrys:active,
.real-filter:active, .scroll-top:active, .post-tags a:active,
.blog-pagination a:active, .mcb-btn:active,
div.wpforms-container-full .wpforms-form button[type=submit]:active,
.wyc-form button[type=submit]:active {
    transform: scale(0.97);
    transition-duration: 0.08s;
}
@media (hover: hover) and (pointer: fine) {
    .btn-primary:active {
        transform: translate(var(--mag-x, 0px), var(--mag-y, 0px)) scale(0.97);
    }
}
.real-thumb:active, .mdl-real-link:active, .mdl-marka-modele a:active {
    transform: scale(0.985);
    transition-duration: 0.08s;
}
.nav-toggle:active span { opacity: 0.6; }


/* ── 3. Konkretne właściwości zamiast `transition: all` ─────────────────── */

.header {
    transition-property: background-color, padding, border-color, backdrop-filter, -webkit-backdrop-filter;
}
.nav-link { transition-property: color, background-color, transform; }
.nav-toggle span { transition-property: transform, opacity; }
.nav-menu { transition-property: opacity, visibility; }
.faq-icon, .faq-icon::before, .faq-icon::after { transition-property: transform, background-color; }
.about-feature, .service-card, .service-card-icon, .process-step-number,
.faq-item, .review-card, .contact-detail, .scroll-top, .gallery-item,
.blog-card, .post-tags a, .blog-pagination a, .blog-pagination span,
.real-filter {
    transition-property: transform, background-color, border-color, color, box-shadow, opacity;
}
.form-group input, .form-group textarea {
    transition-property: border-color, box-shadow, background-color;
}


/* ── 4a. Hero: krótsza kaskada ──────────────────────────────────────────────
   Było: przyciski „Wycena" pojawiały się po 1,5 s od wczytania (opóźnienie
   0,7 s + 0,8 s animacji). Ten sam ruch, gęstsza kaskada — wszystko stoi
   po 0,85 s, a krzywa hamuje jak w systemie zamiast `ease`. */
.hero-badge   { animation-duration: 0.6s; animation-delay: 0.05s; animation-timing-function: var(--ease-out); }
.hero-title   { animation-duration: 0.6s; animation-delay: 0.1s;  animation-timing-function: var(--ease-out); }
.hero-desc    { animation-duration: 0.6s; animation-delay: 0.17s; animation-timing-function: var(--ease-out); }
.hero-actions { animation-duration: 0.6s; animation-delay: 0.24s; animation-timing-function: var(--ease-out); }

/* ── 4b. Pulsująca kropka: pierścień ze skali i przezroczystości ────────────
   Było: animowany box-shadow — przemalowanie co klatkę, bez końca. */
.hero-badge-dot {
    position: relative;
    animation: none;
}
.hero-badge-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--color-primary);
    animation: smotoPierscien 2.5s var(--ease-out) infinite;
}
@keyframes smotoPierscien {
    0%        { transform: scale(1);   opacity: 0.55; }
    70%, 100% { transform: scale(2.8); opacity: 0; }
}

/* ── 4c. Kółko myszy: transform zamiast `top` (top przelicza układ) ─────── */
.hero-scroll .wheel { animation-name: smotoKolko; }
@keyframes smotoKolko {
    0%   { transform: translate(-50%, 0);    opacity: 1; }
    100% { transform: translate(-50%, 12px); opacity: 0; }
}

/* ── 4d. Pasek marek staje pod kursorem i przy fokusie z klawiatury ─────────
   To są linki. W ciągłym ruchu trudno w nie trafić — użytkownik ma móc
   „złapać" treść, która się przesuwa. */
.brands:hover .brands-track,
.brands-track:focus-within {
    animation-play-state: paused;
}

/* ── 4e. FAQ: zamyka się tą samą drogą, którą się otwiera ───────────────────
   Było: odpowiedź wjeżdżała animacją, a znikała w jednej klatce. Tam, gdzie
   przeglądarka zna ::details-content (Chrome 131+, Safari 18.4+), wysokość
   rośnie i maleje płynnie; gdzie nie zna — zostaje jak było. */
@supports selector(::details-content) {
    .faq-item, .mdl-faq details {
        interpolate-size: allow-keywords;
    }
    .faq-item::details-content,
    .mdl-faq details::details-content {
        block-size: 0;
        overflow-y: clip;
        transition: block-size 0.38s var(--ease-out), content-visibility 0.38s allow-discrete;
    }
    .faq-item[open]::details-content,
    .mdl-faq details[open]::details-content {
        block-size: auto;
    }
    .faq-answer, .mdl-faq details > p {
        animation: none !important;
        opacity: 0;
        transition: opacity 0.3s var(--ease-out);
    }
    .faq-item[open] .faq-answer,
    .mdl-faq details[open] > p {
        opacity: 1;
    }
}


/* ── 5. Ogranicz ruch ───────────────────────────────────────────────────────
   Nie „zero ruchu", tylko łagodny odpowiednik: znikają przesunięcia,
   powiększenia i pętle; zostają krótkie przejścia przezroczystości, które
   pomagają zrozumieć, co się pojawiło. Strony .mdl mają to już w model.css. */
@keyframes smotoPojaw { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .hero-bg-img,
    .hero-badge-dot::after,
    .hero-scroll span,
    .hero-scroll .wheel,
    .brands-track {
        animation: none !important;
    }
    .hero-bg-img { transform: none !important; }

    .hero-badge, .hero-title, .hero-desc, .hero-actions {
        animation-name: smotoPojaw !important;
        animation-duration: 0.2s !important;
        animation-delay: 0s !important;
    }

    /* Wejścia przy przewijaniu (krytyczny CSS w header.php): bez przesunięcia
       o 40 px, sama krótka zmiana przezroczystości. Wyższa szczegółowość niż
       tamte reguły z !important. */
    html body.js-ready [data-animate][data-animate] {
        transform: none !important;
        transition: opacity 0.2s ease !important;
    }

    .faq-answer { animation: none !important; }
    .faq-item::details-content,
    .mdl-faq details::details-content { transition: none; }

    .btn-primary:hover, .btn-outline:hover, .nav-link--cta:hover,
    .service-card:hover, .review-card:hover, .gallery-item:hover,
    .blog-card:hover, .real-thumb:hover, .brand-service-card:hover,
    .about-img-wrapper:hover .about-img,
    .gallery-item:hover .gallery-img-wrapper img,
    .workshop-img-main:hover img, .workshop-img-detail:hover img,
    .blog-card:hover .blog-card-img {
        transform: none;
    }
}


/* ── 6. Ogranicz przezroczystość / zwiększ kontrast ─────────────────────────
   Rozmyte, półprzezroczyste warstwy są czytelne tylko dla części osób.
   Kto o to poprosi w systemie, dostaje pełne tła i wyraźniejsze krawędzie. */
@media (prefers-reduced-transparency: reduce) {
    .header.scrolled, .hero-badge, .about-img-badge, .scroll-top,
    .workshop-img-label, .blog-card-category, .cookie-consent,
    .mobile-contact-bar, .real-lightbox, .real-lightbox.js-plynny::before {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .header.scrolled   { background: #0b0b0b; }
    .hero-badge, .about-img-badge, .workshop-img-label,
    .blog-card-category, .scroll-top { background: #151515; }
    .cookie-consent, .mobile-contact-bar { background: #0d0d0d; }
    .real-lightbox, .real-lightbox.js-plynny::before { background: #000; }
}

@media (prefers-contrast: more) {
    :root {
        --color-text-secondary: #d1d1d6;
        --color-text-tertiary: #a1a1a6;
        --color-border: rgba(255, 255, 255, 0.3);
        --color-border-hover: rgba(255, 255, 255, 0.5);
    }
}


/* ── 7. Fokus z klawiatury ──────────────────────────────────────────────────
   :where() ma zerową szczegółowość, więc własne style fokusu (np. .mdl-btn
   w model.css) nadal wygrywają. Obrys tylko z klawiatury, nie po kliknięciu. */
:where(a, button, summary, [tabindex="0"]):focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 3px;
}


/* ── 8. Podgląd zdjęć na /realizacje/ (assets/js/podglad.js) ────────────────
   Klasa .js-plynny pojawia się dopiero, gdy skrypt się załaduje — bez niej
   podgląd działa po staremu (ciemne tło w CSS, zdjęcie pośrodku). */
.real-lightbox.js-plynny {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.real-lightbox.js-plynny::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: var(--tlo, 0);
}
.real-lightbox.js-plynny img,
.real-lightbox.js-plynny .real-lightbox-caption {
    position: relative;
    z-index: 1;
}
.real-lightbox.js-plynny .real-lightbox-close {
    z-index: 2;
    opacity: var(--tlo, 0);
    -webkit-tap-highlight-color: transparent;
}
.real-lightbox.js-plynny .real-lightbox-caption { opacity: var(--tlo, 0); }
.real-lightbox.js-plynny img {
    transform-origin: 50% 50%;
    will-change: transform, clip-path, opacity;
    /* jeden palec = przeciąganie (nasze), dwa palce = powiększanie (systemowe) */
    touch-action: pinch-zoom;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
.real-lightbox.js-plynny img.chwyt { cursor: grabbing; }
/* v19.11.4: miniatura, której zdjęcie jest właśnie w podglądzie — znika na
   czas lotu, żeby przy zamykaniu nie było widać dwóch zdjęć naraz. visibility,
   nie opacity: nie zmienia układu, a powrót do visible jest natychmiastowy
   także wtedy, gdy element ma przejście (transition) na wszystkich cechach. */
.js-w-podgladzie { visibility: hidden !important; }
.real-filter[aria-pressed="true"] { cursor: default; }

/* ── 9. Zdjęcia realizacji otwierające podgląd (v19.11.1) ───────────────────
   Klasę .js-powieksz dokłada podglad.js — kursor-lupa i reakcja na
   wciśnięcie pojawiają się tylko wtedy, gdy kliknięcie naprawdę coś robi.
   Obrys fokusu do środka: na stronie głównej karta ma overflow: hidden
   i obrys na zewnątrz zostałby ucięty. */
.js-powieksz {
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}
.js-powieksz:not(.real-thumb):active {
    transform: scale(0.985);
    transition: transform 0.08s var(--ease-out);
}
.js-powieksz:not(.real-thumb):focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: -3px;
}