/* motion.css — ruch sekcji pod światem, pakiety A/B/C (06 §4).
   Wejścia elementów (nagłówki słowo po słowie, eyebrow, akapity, listy, karty, kolumny, kroki): IntersectionObserver
   → .is-in + przejścia (deterministyczne, każda przeglądarka; oś view() w Chrome dla bloków raportuje przesunięty postęp).
   Efekty sprzężone ze scrollem (ramka modeli, marker, paralaksa numerów, wejście portretu): view() gdzie wspierane,
   fallback .is-in. Stany startowe tylko pod html.mo (ustawia JS) → bez JS wszystko widoczne. CTA i formularz bez ruchu.
   prefers-reduced-motion: html.mo nie jest nadawane. */

/* ── A: nagłówki słowo po słowie z maski ── */
html.mo .hw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .02em .1em 0;margin-bottom:-.1em}
html.mo .hw>span{display:inline-block;transform:translateY(112%);will-change:transform;transition:transform .75s var(--ease-entrance) calc(var(--i,0)*55ms)}
html.mo .is-in .hw>span{transform:none}
/* ── A: kaskada akapitów, list, kart, kolumn ── */
html.mo [data-m]{opacity:0;visibility:hidden;transform:translateY(26px);will-change:opacity,transform;transition:opacity .7s var(--ease-entrance) calc(var(--i,0)*90ms),transform .7s var(--ease-entrance) calc(var(--i,0)*90ms),visibility 0s linear calc(var(--i,0)*90ms)}   /* visibility: przed wejściem element nie istnieje dla AT/axe (kontrast liczony z opacity 0 dawał fałszywy alarm) */
html.mo [data-m="left"]{transform:translateX(-44px)}
html.mo [data-m="right"]{transform:translateX(44px)}
html.mo [data-m].is-in{opacity:1;visibility:visible;transform:none}
/* ── A: eyebrow z zaciskiem liter; większe nagłówki ── */
html.mo .eyebrow-m{letter-spacing:.24em;transition:opacity .7s var(--ease-entrance),transform .7s var(--ease-entrance),letter-spacing 1s var(--ease-entrance)}
html.mo .eyebrow-m.is-in{letter-spacing:.14em}
html.mo .page-body h2[style]{font-size:clamp(28px,3.6vw,46px)!important}
html.mo #h-sprzedaz[style]{font-size:clamp(30px,4.2vw,52px)!important}
/* ── B: M-6 — bez poświaty (Łukasz: „jedyny element jak efekt webowy”) ── */
html.mo .num-glow{animation:none!important;text-shadow:none!important}
/* ── B: M-7 ramka wokół modeli (kwadrat z logo) ── */
html.mo .models{position:relative}
html.mo .models::before,html.mo .models::after{content:"";position:absolute;inset:-28px;pointer-events:none;will-change:transform}
html.mo .models::before{border-top:1px solid rgba(181,135,60,.55);border-bottom:1px solid rgba(181,135,60,.55);transform:scaleX(0);transform-origin:left}
html.mo .models::after{border-left:1px solid rgba(181,135,60,.55);border-right:1px solid rgba(181,135,60,.55);transform:scaleY(0);transform-origin:top}
html.mo .models .mdiv{animation:none!important;transform:scaleY(0);transition:transform .9s var(--ease-entrance) .35s}
@media (max-width:899px){ html.mo .models .mdiv{transform:scaleX(0)} }
html.mo .models.is-in .mdiv{transform:none}
@media (max-width:640px){ html.mo .models::before,html.mo .models::after{inset:-14px} }
/* ── B: M-8 portret: z powiększenia i rozmycia, złoty narożnik nad sylwetką (obrys alfa: prawy margines 17,6 %) ── */
html.mo .portrait{position:relative}
html.mo .portrait img{transform:scale(1.06);filter:blur(8px);opacity:0;will-change:transform,filter,opacity;transition:transform 1.2s var(--ease-entrance),filter 1.2s var(--ease-entrance),opacity 1s var(--ease-entrance)}
html.mo .portrait.is-in img{transform:none;filter:blur(0);opacity:1}
html.mo .portrait::before{content:"";position:absolute;top:-14px;right:calc(17.6% - 16px);width:110px;height:110px;border-top:2px solid #B5873C;border-right:2px solid #B5873C;transform:scale(0);transform-origin:top right;pointer-events:none;transition:transform .6s var(--ease-entrance) .7s}
html.mo .portrait.is-in::before{transform:scale(1)}
/* ── B: M-9 kroki 1-2-3 (pionowo) z rysującym się łącznikiem ── */
html.mo .cel__steps{position:relative}
html.mo .cel__steps::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:rgba(201,160,90,.75);transform:scaleY(0);transform-origin:top;z-index:0;transition:transform 1.1s linear .15s}
html.mo .cel__steps.is-in::before{transform:scaleY(1)}
html.mo .cel__steps li{position:relative;z-index:1}
html.mo .cel__steps li::before{transform:scale(.86);opacity:.45;transition:transform .5s var(--ease-entrance) calc(.2s + var(--i,0)*.35s),opacity .5s var(--ease-entrance) calc(.2s + var(--i,0)*.35s)}
html.mo .cel__steps.is-in li::before{transform:none;opacity:1}
/* ── C: marker pod kluczową frazą ── */
.mk{background:none;color:inherit;padding:0 .04em;border-radius:2px}
html.mo .mk{will-change:background-size;background-image:linear-gradient(transparent 58%,rgba(181,135,60,.42) 58%,rgba(181,135,60,.42) 94%,transparent 94%);background-repeat:no-repeat;background-size:0% 100%;background-position:left center}
.dark .mk,html.mo .dark .mk{background-image:linear-gradient(transparent 58%,rgba(201,160,90,.34) 58%,rgba(201,160,90,.34) 94%,transparent 94%)}
/* ── C: numery rozdziałów w paralaksie (::before z data-n — bez tekstu, bez kontrastu w axe) ── */
.has-ghost{position:relative;isolation:isolate;overflow:clip}
.ghost{position:absolute;right:clamp(8px,3vw,40px);top:18px;z-index:-1;font:700 clamp(84px,15vw,216px)/.9 Sora,sans-serif;letter-spacing:-.05em;color:rgba(16,28,48,.055);pointer-events:none;user-select:none}
.ghost::before{content:attr(data-n)}
.dark.has-ghost .ghost,.has-ghost.dark .ghost{color:rgba(252,252,250,.045)}
html.mo .ghost{transform:translateY(30px);will-change:transform}

/* ═══ efekty sprzężone ze scrollem ═══ */
@keyframes sx-in{to{transform:scaleX(1)}}
@keyframes sy-in{to{transform:scaleY(1)}}
@keyframes s-in{to{transform:none;opacity:1}}
@keyframes portrait-in{to{transform:none;filter:blur(0);opacity:1}}
@keyframes mk-in{to{background-size:100% 100%}}
@keyframes ghost-par{from{transform:translateY(30px)}to{transform:translateY(-8px)}}
@supports (animation-timeline: view()){
  html.mo .models::before{animation:sx-in var(--ease-entrance) both;animation-timeline:view();animation-range:cover 4% cover 22%}
  html.mo .models::after{animation:sy-in var(--ease-entrance) both;animation-timeline:view();animation-range:cover 18% cover 40%}
  html.mo .mk{animation:mk-in var(--ease-standard) both;animation-timeline:view();animation-range:cover 14% cover 34%}
  html.mo .ghost{animation:ghost-par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}
@supports not (animation-timeline: view()){
  html.mo .models::before{transition:transform .5s var(--ease-entrance)} html.mo .models::after{transition:transform .5s var(--ease-entrance) .45s}
  html.mo .models.is-in::before{transform:scaleX(1)} html.mo .models.is-in::after{transform:scaleY(1)}
  html.mo .mk{transition:background-size .9s var(--ease-standard) .2s} html.mo .mk.is-in{background-size:100% 100%}
  html.mo .ghost{transition:transform 1.6s linear} html.mo .ghost.is-in{transform:translateY(-8px)}
}
/* fokus klawiatury: element z ruchem ujawnia się natychmiast */
html.mo [data-m]:focus-within,html.mo :focus-within>.hw>span,html.mo [tabindex="-1"]:focus .hw>span{transition:none!important;opacity:1!important;visibility:visible!important;transform:none!important}