/* =====================================================================
   LUCKY STUDIO – WERSJA B („Atelier")
   Ładowany po style.css: nagłówek, przyciski, formularz, FAQ i stopka
   są wspólne. Tu są tylko nowe sekcje i ich efekty przewijania.
   ===================================================================== */

/* Lenis – płynne przewijanie kółkiem myszy (tylko komputer) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

.b-page { --bg: #050505; background: #050505; }
.b-label { margin: 0 0 16px; font-size: 13.5px; font-weight: 600; color: var(--red-ink); }
.b-h2 { margin: 0; font-size: clamp(38px, 5.6vw, 92px); font-weight: 750; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.b-sec { width: var(--wrap); margin-inline: auto; padding-top: var(--sec); }
.b-head { margin-bottom: clamp(36px, 4.5vw, 64px); }

/* nagłówki wjeżdżają spod maski, bloki – z dołu (alt.js) */
.b-mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.b-mask > span { display: block; transition: transform 1.1s var(--ease); }
.b-io [data-b-reveal]:not(.is-in) .b-mask > span { transform: translateY(105%); }
.b-io [data-b-fade] { transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.b-io [data-b-fade]:not(.is-in) { opacity: 0; transform: translateY(36px); }

/* =====================================================================
   HERO – woda na powłoce ceramicznej (WebGL, zapas: canvas 2D).
   Zdjęcie lakieru: assets/img/lakier.jpg (patrz lucky.config.json).
   ===================================================================== */
.b-hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; background: #050505; touch-action: pan-y; }
.b-hero__canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.b-hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(5, 5, 5, .9) 0%, rgba(5, 5, 5, .45) 32%, rgba(5, 5, 5, 0) 58%), linear-gradient(180deg, rgba(5, 5, 5, .5), rgba(5, 5, 5, 0) 20%); }
.b-hero__grid { position: absolute; left: 0; right: 0; bottom: clamp(36px, 6vh, 72px); width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; align-items: end; pointer-events: none; }
.b-hero__grid a { pointer-events: auto; }
.b-hero__main { grid-column: 1 / span 8; }
.b-hero__side { grid-column: 9 / -1; display: grid; gap: 22px; }
.b-hero__badge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 22px; font-size: 14px; font-weight: 500; color: var(--muted-2); }
.b-hero__badge img { height: 18px; width: auto; opacity: .9; }
.b-hero__award { padding-left: 14px; border-left: 1px solid rgba(242, 240, 235, .28); color: var(--text); font-weight: 600; }
.b-hero__h { margin: 0; font-size: clamp(44px, 7vw, 124px); font-weight: 800; line-height: .92; letter-spacing: -.055em; }
.b-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.b-line > span { display: block; }
@keyframes bLine { from { transform: translateY(105%); } }
.js .b-line > span { animation: bLine 1.2s var(--ease) .1s both; }
.js .b-line:nth-child(2) > span { animation-delay: .18s; }
.js .b-line:nth-child(3) > span { animation-delay: .26s; }
.b-hero__hint { margin: 0; max-width: 34ch; font-size: 14.5px; line-height: 1.5; color: var(--muted-2); transition: opacity .6s ease; }
.b-hero__hint.is-gone { opacity: .45; }
.b-hero__cta { display: grid; gap: 10px; }
.b-hero__cta .btn { width: 100%; }
.b-hero__meta { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(242, 240, 235, .2); display: grid; gap: 4px; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.js .b-hero__badge { animation: enter 1s var(--ease) .05s both; }
.js .b-hero__side { animation: enter 1s var(--ease) .38s both; }
.b-hero .hero__rating { position: absolute; right: max(var(--gutter), calc((100% - var(--max)) / 2)); top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 24px); padding: 0; }

/* =====================================================================
   OKNO, KTÓRE ROŚNIE – bez JS po prostu zdjęcie na pełną szerokość
   ===================================================================== */
.b-zoom { position: relative; }
.b-zoom__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.b-zoom__frame { position: absolute; inset: 0; will-change: clip-path; }
.b-zoom__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 70%; will-change: transform; }
.b-zoom__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 5, 5, .85), rgba(5, 5, 5, 0) 45%), linear-gradient(90deg, rgba(5, 5, 5, .6), rgba(5, 5, 5, 0) 50%); }
.b-zoom__word { position: absolute; top: 50%; z-index: 2; margin: 0; font-size: clamp(44px, 9vw, 168px); font-weight: 800; line-height: 1; letter-spacing: -.058em; transform: translateY(-50%); display: none; }
.b-zoom__word--a { right: 68%; }
.b-zoom__word--b { left: 68%; }
.b-zoom__text { position: absolute; left: 0; right: 0; bottom: clamp(40px, 9vh, 96px); z-index: 2; width: var(--wrap); margin: 0 auto; }
.b-zoom__text p { max-width: 19ch; margin: 0; font-size: clamp(30px, 4.2vw, 64px); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }

@media (prefers-reduced-motion: no-preference) and (min-height: 620px) {
  .js .b-zoom { height: 250svh; }
  .js .b-zoom__pin { position: sticky; top: 0; }
  .js .b-zoom__frame { clip-path: inset(26% 33% round 18px); }
  .js .b-zoom__frame img { transform: scale(1.25); }
  .js .b-zoom__word { display: block; }
  .js .b-zoom__text { opacity: 0; }
}

/* =====================================================================
   TRZY FILARY – panel pod kursorem się rozsuwa
   ===================================================================== */
.b-pillars__row { display: flex; gap: 12px; height: min(78svh, 760px); min-height: 520px; }
/* Panel zmienia tylko szerokość. Zdjęcie i treść mają stałą szerokość rozsuniętego
   panelu (--open-w), więc nic się nie przelicza – panel jedynie odsłania więcej. */
.b-pillar { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--r); overflow: hidden; isolation: isolate; contain: layout paint; transition: flex-grow .65s var(--ease-io); }
.b-pillar.is-open { flex-grow: 2.4; }
.b-pillar > img { position: absolute; top: 0; left: 50%; z-index: -2; width: var(--open-w, 100%); max-width: none; height: 100%; object-fit: cover; transform: translateX(-50%); filter: brightness(.5) saturate(.75); transition: filter .6s ease, transform 1.2s var(--ease); will-change: transform; }
.b-pillar.is-open > img { filter: brightness(.82) saturate(1); transform: translateX(-50%) scale(1.04); }
.b-pillar::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 5, 5, .92) 0%, rgba(5, 5, 5, .35) 45%, rgba(5, 5, 5, 0) 70%); }
.b-pillar__body { position: absolute; left: 0; bottom: 0; width: var(--open-w, 100%); padding: clamp(20px, 2.4vw, 36px); transform: translateY(var(--shift, 0px)); transition: transform .65s var(--ease-io); will-change: transform; }
.b-pillar.is-open .b-pillar__body { transform: none; }
.b-pillar__n { font-size: 13px; font-weight: 600; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.b-pillar__h { margin: 8px 0 0; font-size: clamp(24px, 2.5vw, 42px); font-weight: 750; line-height: 1.02; letter-spacing: -.035em; white-space: nowrap; }
/* szczegóły są zawsze ułożone; w zamkniętym panelu treść jest zsunięta w dół o ich wysokość (--shift) */
.b-pillar__more { opacity: 0; transition: opacity .3s ease; }
.b-pillar.is-open .b-pillar__more { opacity: 1; transition: opacity .5s ease .18s; }
.b-pillar__in > p { max-width: 46ch; margin: 16px 0 0; color: rgba(242, 240, 235, .82); }
.b-pillar__facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
.b-pillar__facts li { padding: 6px 12px; border: 1px solid rgba(242, 240, 235, .3); border-radius: 999px; font-size: 13.5px; font-weight: 500; }
.b-pillar__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }


/* =====================================================================
   DETAILING – karty przesuwają się w poziomie przy przewijaniu
   Bez efektu: zwykła galeria przewijana w bok.
   ===================================================================== */
.b-hrail { position: relative; padding-top: var(--sec); }
.b-hrail__pin { overflow: hidden; }
.b-hrail__head { width: var(--wrap); margin: 0 auto clamp(32px, 4vw, 56px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; }
.b-hrail__note { max-width: 38ch; margin: 0; color: var(--muted); font-size: 16px; }
.b-hrail__track { list-style: none; margin: 0; display: flex; gap: var(--col-gap); padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2)) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); overscroll-behavior-x: contain; scrollbar-width: none; }
.b-hrail__track::-webkit-scrollbar { display: none; }
.b-card { position: relative; flex: 0 0 clamp(250px, 22vw, 340px); scroll-snap-align: start; }
.b-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); margin-bottom: 18px; transition: filter .3s ease; }
.b-card__n { position: absolute; top: 14px; left: 14px; padding: 5px 10px; border-radius: 999px; background: rgba(5, 5, 5, .72); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.b-card__h { margin: 0 0 8px; font-size: 20px; font-weight: 650; letter-spacing: -.015em; line-height: 1.2; }
.b-card p { margin: 0 0 12px; color: var(--muted); font-size: 15.5px; }
.b-card .link { font-size: 14.5px; }
.b-card .link::after { content: ""; position: absolute; inset: 0; }

@media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-height: 620px) {
  .js .b-hrail { padding-top: 0; margin-top: var(--sec); }
  .js .b-hrail__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--hdr-h); }
  .js .b-hrail__track { overflow: visible; scroll-snap-type: none; width: max-content; will-change: transform; }
}

/* =====================================================================
   ZAUFANIE
   ===================================================================== */
.b-trust__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.b-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 30px 28px 0 0; color: var(--text); text-decoration: none; }
.b-stat + .b-stat { padding-left: 28px; border-left: 1px solid var(--line); }
.b-stat b { font-size: clamp(44px, 5vw, 80px); font-weight: 750; line-height: 1; letter-spacing: -.05em; }
.b-stat > span { color: var(--muted); font-size: 15px; }
.b-stat img { height: 30px; width: auto; margin: 12px 0 10px; }
.b-stat__stars { display: flex; gap: 3px; color: var(--star); }
.b-stat__stars .ic { width: 17px; height: 17px; }
.b-stat .link { margin-top: auto; padding-top: 6px; color: var(--text); }

/* =====================================================================
   KONTAKT
   ===================================================================== */
.b-contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px var(--col-gap); align-items: end; }
.b-contact__addr { margin-bottom: 22px; font-size: clamp(34px, 4.4vw, 72px); }
.b-contact__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--col-gap); padding-top: 24px; border-top: 1px solid var(--line); }
.b-contact__cols > :last-child { grid-column: 1 / -1; }
.b-contact__k { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.b-contact__v { display: inline-block; margin-bottom: 10px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.b-contact__v--s { font-size: 16px; font-weight: 500; white-space: normal; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 4px; }
.b-contact .hours { list-style: none; margin: 0; padding: 0; }
.b-contact .hours li { padding: 2px 0; border: 0; justify-content: flex-start; gap: 10px; }

@media (hover: hover) and (pointer: fine) {
  .b-card:hover img { filter: brightness(1.12); }
  .b-contact__v:hover { text-decoration: underline; text-underline-offset: 6px; }
}

/* =====================================================================
   TELEFON I TABLET
   ===================================================================== */
@media (max-width: 1024px) {
  .b-hero__main, .b-hero__side { grid-column: 1 / -1; }
  .b-hero__side { grid-template-columns: 1fr 1fr; align-items: end; }
  .b-hero__hint { grid-column: 1 / -1; }
  .b-contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .b-pillars__row { flex-direction: column; height: auto; min-height: 0; }
  .b-pillar { min-height: 460px; flex: none; }
  .b-pillar > img { left: 0; width: 100%; transform: none; filter: brightness(.72) saturate(.95); }
  .b-pillar.is-open > img { transform: none; }
  .b-pillar { display: flex; flex-direction: column; justify-content: flex-end; }
  .b-pillar__body { position: relative; width: 100%; transform: none; padding-top: 120px; }
  .b-pillar__h { white-space: normal; }
  .b-pillar__more { opacity: 1; }
  .b-trust__grid { grid-template-columns: 1fr 1fr; }
  .b-stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .b-stat:nth-child(n + 3) { margin-top: 28px; border-top: 1px solid var(--line); }
}

@media (max-width: 720px) {
  .b-zoom__frame img { object-position: 80% 50%; }
  .b-hero__grid { row-gap: 22px; }
  .b-hero__side { grid-template-columns: 1fr; gap: 16px; }
  .b-hero__badge { margin-bottom: 16px; font-size: 13px; }
  .b-hero .hero__rating { left: var(--gutter); right: auto; }
  .b-hero__meta { display: none; }
  .b-zoom__word--a { right: auto; left: 50%; top: 21%; transform: translateX(-50%); }
  .b-zoom__word--b { left: 50%; top: auto; bottom: 21%; transform: translateX(-50%); }
  .b-contact__cols { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 720px) and (prefers-reduced-motion: no-preference) and (min-height: 620px) {
  .js .b-zoom__frame { clip-path: inset(30% 9% round 14px); }
}

@media (max-width: 560px) {
  .b-trust__grid { grid-template-columns: 1fr; }
  .b-stat, .b-stat + .b-stat { padding: 26px 0 0; border-left: 0; }
  .b-stat + .b-stat { margin-top: 26px; border-top: 1px solid var(--line); }
}

/* raty 0% w hero wersji B */
.b-hero .raty { margin: 0; pointer-events: auto; }