/* Tło całej strony (partials/backdrop.html): miękkie cienie ram okna padające na „ścianę” strony
   i delikatny szkic hali, kreślony linia po linii. Cienie dryfują jak słońce (jedna warstwa, sam
   transform) i gasną ku krawędziom. Warstwa stała pod stroną: sekcje z własnym tłem, karty, nagłówek
   i stopka ją zakrywają. Przy „ogranicz ruch” cienie stoją, a szkic jest od razu narysowany. */

.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* Jedna warstwa kompozytora, malowana raz: wygaszenie ku krawędziom to nakładka w kolorze papieru
   w tym samym tle (zamiast mask-image, które dokładało drugą warstwę tej samej wielkości), a zapas
   na dryf jest tylko tak duży, jak ruch (±5% / ±3% warstwy). */
.backdrop__light {
    position: absolute; inset: -12% -20%;
    background:
        radial-gradient(
            55% 50% at 62% 34%,
            transparent 0%,
            color-mix(in srgb, var(--paper) 45%, transparent) 45%,
            var(--paper) 78%
        ),
        /* Ramy okna: szerokie, miękko zakończone pasy cienia (bez filtra blur — tani rendering). */
        repeating-linear-gradient(
            108deg,
            transparent 0, transparent 110px,
            rgba(43, 47, 51, 0.035) 170px, rgba(43, 47, 51, 0.035) 250px,
            transparent 310px, transparent 420px
        );
    transform: translate3d(-5%, -3%, 0);
}
.js-animations .backdrop__light { will-change: transform; animation: backdrop-sun 80s ease-in-out infinite alternate; }
/* W przejeździe między stronami cień stoi — każdy ruch w środku przerysowywałby migawkę nowej strony. */
.vt-entry .backdrop__light { animation-play-state: paused; }
@keyframes backdrop-sun {
    from { transform: translate3d(-5%, -3%, 0); }
    to { transform: translate3d(5%, 3%, 0); }
}

/* ---------- szkic ---------- */
/* Tylko od 900 px — na telefonie rysunek pod tekstem psuł odbiór, zostają same cienie ram okna.
   Arkusz 560×360 jednostek (--u, do 840 px) na środku ekranu, przy dole — wychodzi spod treści w wolnych
   miejscach strony, a niżej niż osie arkusza w nagłówku strony głównej (oznaczenia osi się nie spotykają).
   Skalujemy jednostkę, nie rysunek: linie zostają cienkie (1 px). */
.sketch { display: none; }
@media (min-width: 900px) {
    .sketch {
        --u: min(1.5px, calc((100vw - 120px) / 560));
        display: block; position: absolute; left: 50%; bottom: 3vh;
        width: calc(560 * var(--u)); height: calc(360 * var(--u));
        color: rgba(43, 47, 51, 0.14); transform: translateX(-50%);
    }
}
/* Linia: od (x1, y1) do (x2, y2). Ruch tylko w ::before (scaleX — kreślenie, opacity — wygaszanie),
   położenie i obrót stoją. Lica ścian i linie wymiarowe wychodzą trochę za narożnik, jak w szkicu odręcznym. */
.sketch__line {
    --over: 0px;
    --dx: calc((var(--x2) - var(--x1)) * var(--u));
    --dy: calc((var(--y2) - var(--y1)) * var(--u));
    position: absolute; left: calc(var(--x1) * var(--u)); top: calc(var(--y1) * var(--u));
    width: calc(hypot(var(--dx), var(--dy)) + 2 * var(--over)); height: 1px;
    transform-origin: 0 50%;
    transform: rotate(atan2(var(--dy), var(--dx))) translateX(calc(-1 * var(--over)));
}
.sketch__line--wall { --over: calc(5 * var(--u)); }
.sketch__line--dimension { --over: calc(4 * var(--u)); opacity: 0.6; }
.sketch__line--faint, .sketch__line--axis { opacity: 0.55; }
.sketch__line::before {
    content: ""; position: absolute; inset: 0; background: currentColor; transform-origin: 0 50%;
}
/* Oś konstrukcyjna: kreska — kropka. */
.sketch__line--axis::before {
    background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 18px, currentColor 18px 20px, transparent 20px 24px);
}
/* Kółko osi i opisy (wymiary, numery pomieszczeń, N) — drobnym pismem technicznym. */
.sketch__bubble, .sketch__label {
    position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
    font-family: var(--mono); font-size: calc(8 * var(--u)); line-height: 1; letter-spacing: 0.08em;
}
.sketch__bubble {
    width: calc(var(--d) * var(--u)); height: calc(var(--d) * var(--u));
    margin: calc(var(--d) * var(--u) / -2) 0 0 calc(var(--d) * var(--u) / -2);
    display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%;
}
.sketch__label { transform: translate(-50%, -50%) rotate(var(--r)); white-space: nowrap; }

/* Kolejność kreślenia: element po elemencie co 0,08 s. Cykl 30 s: kreślenie ~1,5 s, potem stoi, gaśnie
   i wraca niewidoczny na początek. */
.js-animations .sketch__line::before {
    transform: scaleX(0);
    animation: sketch-draw 30s cubic-bezier(0.45, 0, 0.25, 1) calc(var(--i) * 0.08s) infinite both;
}
.js-animations .sketch__bubble { animation: sketch-pop 30s cubic-bezier(0.33, 1, 0.68, 1) calc(var(--i) * 0.08s) infinite both; }
.js-animations .sketch__label { animation: sketch-fade 30s ease calc(var(--i) * 0.08s) infinite both; }
/* Pod logo startowym i w przejeździe między stronami szkic czeka. */
.is-preloading .sketch__line::before, .is-preloading .sketch__bubble, .is-preloading .sketch__label,
.vt-entry .sketch__line::before, .vt-entry .sketch__bubble, .vt-entry .sketch__label { animation-play-state: paused; }
@keyframes sketch-draw {
    0% { transform: scaleX(0); opacity: 1; }
    5%, 76% { transform: scaleX(1); opacity: 1; }
    88%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes sketch-pop {
    0% { transform: scale(0); opacity: 1; }
    5%, 76% { transform: scale(1); opacity: 1; }
    88%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes sketch-fade {
    0% { opacity: 0; }
    5%, 76% { opacity: 1; }
    88%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .backdrop__light { animation: none; }
}