/*
Theme Name: Otwarta Szuflada
Theme URI: https://otwartaszuflada.pl/
Author: Otwarta Szuflada
Description: Butikowe wydawnictwo cyfrowe — landing „od tekstu do sprzedaży" dla autorów, ekspertów i twórców.
Version: 0.9.79
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: szuflada-studio
*/

:root {
  --ink: #111614;
  --ink-2: #18211e;
  --forest: #193a31;
  --forest-2: #285346;
  --moss: #607a58;
  --ivory: #f7f1e6;
  --paper: #efe4d1;
  --vellum: #dcc8a8;
  --wine: #762f39;
  --rose: #b66b6a;
  --gold: #d0a75a;
  --copper: #a66c43;
  --line: rgba(247, 241, 230, 0.18);
  --line-dark: rgba(17, 22, 20, 0.14);
  --shadow: 0 24px 70px rgba(8, 12, 11, 0.34);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --scroll-progress: 0;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* clip (nie hidden) — nie tworzy kontenera przewijania, więc nie psuje position: sticky */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.admin-bar .site-header {
  top: 32px;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ivory);
  color: var(--ink);
  border-radius: 999px;
}

.skip-link:focus {
  top: 1rem;
}

.site-shell {
  position: relative;
  overflow: clip;
  background:
    linear-gradient(180deg, rgba(17, 22, 20, 0) 0, rgba(17, 22, 20, 0.04) 100%),
    var(--ivory);
}

.ambient-lights,
.magic-dust {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.ambient-lights {
  overflow: hidden;
  opacity: 0.78;
  mix-blend-mode: screen;
}

.ambient-lamp {
  position: absolute;
  display: block;
  filter: blur(26px);
  transform: translateY(calc(var(--scroll-progress) * -90px));
  opacity: 0.38;
}

.ambient-lamp-one {
  width: 280px;
  height: 720px;
  right: 5vw;
  top: -18vh;
  background: linear-gradient(180deg, rgba(208, 167, 90, 0.52), rgba(208, 167, 90, 0.1) 48%, rgba(208, 167, 90, 0));
  clip-path: polygon(46% 0, 58% 0, 100% 100%, 0 100%);
  animation: lamp-breathe 6s ease-in-out infinite;
}

.ambient-lamp-two {
  width: 220px;
  height: 460px;
  left: -4vw;
  top: 52vh;
  background: linear-gradient(110deg, rgba(118, 47, 57, 0.34), rgba(208, 167, 90, 0.22), rgba(208, 167, 90, 0));
  clip-path: polygon(0 15%, 100% 0, 62% 100%, 0 86%);
  animation: lamp-breathe 7.5s ease-in-out infinite reverse;
}

.ambient-lamp-three {
  width: 360px;
  height: 520px;
  right: 18vw;
  top: 112vh;
  background: linear-gradient(180deg, rgba(247, 241, 230, 0.18), rgba(208, 167, 90, 0.15), rgba(208, 167, 90, 0));
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
}

.magic-dust {
  z-index: 4;
  overflow: hidden;
  opacity: 0.55;
}

.magic-dust span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(208, 167, 90, 0.92);
  box-shadow: 0 0 18px rgba(208, 167, 90, 0.72);
  animation: dust-rise 12s linear infinite;
}

.magic-dust span:nth-child(1) { left: 18%; top: 82%; animation-delay: 0s; }
.magic-dust span:nth-child(2) { left: 34%; top: 66%; animation-delay: -2s; }
.magic-dust span:nth-child(3) { left: 58%; top: 78%; animation-delay: -4s; }
.magic-dust span:nth-child(4) { left: 79%; top: 70%; animation-delay: -7s; }
.magic-dust span:nth-child(5) { left: 46%; top: 94%; animation-delay: -9s; }
.magic-dust span:nth-child(6) { left: 88%; top: 88%; animation-delay: -11s; }

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 760ms ease var(--reveal-delay, 0ms),
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  padding: 16px clamp(18px, 4vw, 56px);
  color: var(--ivory);
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 10px 12px 10px 18px;
  border: 1px solid rgba(247, 241, 230, 0.22);
  border-radius: 999px;
  background: rgba(17, 22, 20, 0.42);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(208, 167, 90, 0.65);
  border-radius: 50%;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1;
}

.brand-name {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: 0;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  color: rgba(247, 241, 230, 0.82);
  font-size: 0.92rem;
}

.site-nav a {
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--ivory);
  border-bottom-color: var(--gold);
  outline: none;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(208, 167, 90, 0.7);
  border-radius: 999px;
  background: rgba(208, 167, 90, 0.16);
  color: var(--ivory);
  font-weight: 650;
  white-space: nowrap;
}

.header-cta:hover,
.header-cta:focus-visible {
  background: rgba(208, 167, 90, 0.28);
  outline: none;
}

.hero {
  position: relative;
  min-height: clamp(760px, 88svh, 1080px);
  color: var(--ivory);
  background:
    linear-gradient(90deg, rgba(10, 13, 12, 0.96) 0%, rgba(13, 18, 16, 0.88) 31%, rgba(13, 18, 16, 0.43) 58%, rgba(13, 18, 16, 0.2) 100%),
    linear-gradient(180deg, rgba(10, 13, 12, 0.36) 0%, rgba(10, 13, 12, 0.08) 48%, rgba(10, 13, 12, 0.78) 100%),
    url("assets/images/hero-atelier.png") center right / cover no-repeat;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(112deg, rgba(208, 167, 90, 0) 0%, rgba(208, 167, 90, 0.12) 42%, rgba(208, 167, 90, 0) 58%),
    linear-gradient(180deg, rgba(247, 241, 230, 0.04), rgba(247, 241, 230, 0));
  opacity: 0.55;
  transform: translateX(calc(var(--scroll-progress) * 90px));
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 24%;
  background: linear-gradient(180deg, rgba(17, 22, 20, 0), var(--ink));
  pointer-events: none;
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(430px, 0.78fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: center;
  width: min(1180px, calc(100% - 36px));
  min-height: clamp(760px, 88svh, 1080px);
  margin: 0 auto;
  padding: clamp(112px, 17vh, 190px) 0 clamp(56px, 9vh, 92px);
}

.hero-copy {
  width: min(680px, 100%);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: rgba(247, 241, 230, 0.78);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--gold);
}

.hero h1 {
  margin: 0;
  max-width: 8ch;
  font-family: var(--serif);
  font-size: clamp(4rem, 11vw, 9.8rem);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: 0;
}

.hero-lead {
  width: min(650px, 100%);
  margin: 28px 0 0;
  color: rgba(247, 241, 230, 0.88);
  font-size: clamp(1.13rem, 2.3vw, 1.45rem);
  line-height: 1.48;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.story-loom {
  position: relative;
  justify-self: end;
  width: min(600px, 100%);
  color: var(--ivory);
  transform: translateY(12px);
}

.story-loom::before {
  content: "";
  position: absolute;
  inset: 1% -10% 4% -4%;
  background:
    radial-gradient(circle at 50% 44%, rgba(208, 167, 90, 0.22), rgba(208, 167, 90, 0) 58%),
    linear-gradient(135deg, rgba(247, 241, 230, 0.08), rgba(247, 241, 230, 0));
  filter: blur(34px);
  opacity: 0.9;
  animation: loom-halo 6s ease-in-out infinite;
}

.loom-stage {
  position: relative;
  aspect-ratio: 1.08;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(208, 167, 90, 0.16), rgba(208, 167, 90, 0) 42%),
    radial-gradient(circle at 76% 22%, rgba(247, 241, 230, 0.1), rgba(247, 241, 230, 0) 30%),
    linear-gradient(145deg, rgba(247, 241, 230, 0.02), rgba(17, 22, 20, 0.18));
  box-shadow:
    0 44px 120px rgba(0, 0, 0, 0.34),
    inset 0 0 80px rgba(208, 167, 90, 0.07);
  overflow: visible;
  backdrop-filter: none;
}

.loom-stage::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    repeating-conic-gradient(from 12deg at 50% 50%, rgba(208, 167, 90, 0.14) 0deg 1deg, transparent 1deg 18deg),
    radial-gradient(circle at 50% 50%, transparent 0 40%, rgba(247, 241, 230, 0.06) 41%, transparent 43%);
  opacity: 0.4;
  animation: loom-wheel 36s linear infinite;
}

.loom-stage::after {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(208, 167, 90, 0.16);
  border-radius: 50%;
  box-shadow:
    inset 0 0 42px rgba(208, 167, 90, 0.12),
    0 0 42px rgba(208, 167, 90, 0.08);
  pointer-events: none;
}

.loom-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.34));
}

.loom-aura {
  transform-origin: 360px 305px;
  animation: loom-aura-pulse 5.8s ease-in-out infinite;
  mix-blend-mode: screen;
}

.loom-orbit {
  fill: none;
  stroke: rgba(247, 241, 230, 0.18);
  stroke-width: 1.2;
  stroke-dasharray: 8 16;
  transform-origin: 360px 305px;
  animation: orbit-spin 34s linear infinite;
}

.orbit-two {
  animation-duration: 42s;
  animation-direction: reverse;
  stroke: rgba(208, 167, 90, 0.2);
}

.loom-flow {
  fill: none;
  stroke: rgba(208, 167, 90, 0.78);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 18 22;
  filter: url(#softGlow);
  animation: flow-travel 3.6s linear infinite;
}

.flow-two {
  animation-delay: -1.2s;
  stroke: rgba(247, 241, 230, 0.56);
}

.flow-three {
  animation-delay: -2.4s;
}

.loom-page {
  transform-box: fill-box;
  transform-origin: center;
  animation: page-drift 6.4s ease-in-out infinite;
}

.page-two {
  animation-delay: -1.6s;
}

.page-three {
  animation-delay: -3.2s;
}

.loom-page path:first-child {
  stroke: rgba(17, 22, 20, 0.15);
  stroke-width: 1;
}

.loom-page path:not(:first-child) {
  fill: none;
  stroke: rgba(25, 58, 49, 0.52);
  stroke-width: 4;
  stroke-linecap: round;
}

.loom-book {
  transform-box: fill-box;
  transform-origin: center;
  animation: book-breathe 5.2s ease-in-out infinite;
}

.loom-book path {
  stroke: rgba(247, 241, 230, 0.22);
  stroke-width: 2;
  stroke-linejoin: round;
}

.loom-book path:not(:first-child):not(.book-rune) {
  fill: none;
  stroke: rgba(247, 241, 230, 0.34);
  stroke-width: 4;
  stroke-linecap: round;
}

.book-shadow {
  fill: rgba(0, 0, 0, 0.28);
  stroke: none;
}

.book-rune {
  fill: rgba(208, 167, 90, 0.18);
  stroke: rgba(208, 167, 90, 0.62);
  stroke-width: 3;
  filter: url(#softGlow);
}

.loom-drawer {
  transform-box: fill-box;
  transform-origin: center;
  animation: drawer-open 5.8s ease-in-out infinite;
}

.loom-drawer path:not(.drawer-light),
.loom-drawer circle {
  fill: rgba(25, 58, 49, 0.78);
  stroke: rgba(208, 167, 90, 0.46);
  stroke-width: 3;
}

.drawer-light {
  fill: rgba(208, 167, 90, 0.34);
  filter: url(#softGlow);
  animation: drawer-glow 2.8s ease-in-out infinite;
}

.loom-store {
  transform-box: fill-box;
  transform-origin: center;
  animation: store-arrive 7.2s ease-in-out infinite;
}

.loom-store path {
  fill: rgba(17, 22, 20, 0.7);
  stroke: rgba(247, 241, 230, 0.26);
  stroke-width: 3;
  stroke-linejoin: round;
}

.loom-store path:not(:first-child):not(.store-light) {
  fill: none;
}

.store-light {
  fill: rgba(208, 167, 90, 0.24);
  filter: url(#softGlow);
}

.loom-stars circle {
  fill: rgba(208, 167, 90, 0.86);
  filter: url(#softGlow);
  animation: star-flicker 3.2s ease-in-out infinite;
}

.loom-stars circle:nth-child(2) { animation-delay: -0.8s; }
.loom-stars circle:nth-child(3) { animation-delay: -1.5s; }
.loom-stars circle:nth-child(4) { animation-delay: -2.2s; }
.loom-stars circle:nth-child(5) { animation-delay: -2.8s; }

.loom-map {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: -38px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.loom-map span {
  display: block;
  min-height: 0;
  width: min(180px, 31%);
  padding: 15px 17px;
  border: 1px solid rgba(247, 241, 230, 0.16);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(247, 241, 230, 0.1), rgba(247, 241, 230, 0.035));
  color: rgba(247, 241, 230, 0.7);
  font-size: 0.82rem;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.loom-map span:nth-child(1) {
  transform: translateY(-12px) rotate(-2deg);
}

.loom-map span:nth-child(2) {
  transform: translateY(8px) rotate(1.4deg);
}

.loom-map span:nth-child(3) {
  transform: translateY(-4px) rotate(-0.8deg);
}

.loom-map strong {
  display: block;
  margin-bottom: 7px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.34rem;
  font-weight: 500;
  line-height: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 750;
  line-height: 1;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.btn-primary {
  background: var(--ivory);
  color: var(--ink);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #fffaf0;
}

.btn-ghost {
  border-color: rgba(247, 241, 230, 0.32);
  color: var(--ivory);
  background: rgba(247, 241, 230, 0.07);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: rgba(208, 167, 90, 0.75);
  background: rgba(208, 167, 90, 0.14);
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(760px, 100%);
  margin-top: clamp(44px, 7vh, 72px);
  border: 1px solid rgba(247, 241, 230, 0.16);
  background: rgba(247, 241, 230, 0.14);
  box-shadow: var(--shadow);
}

.proof-item {
  min-height: 116px;
  padding: 22px;
  background: rgba(17, 22, 20, 0.64);
  backdrop-filter: blur(16px);
}

.proof-kicker {
  display: block;
  color: var(--gold);
  font-family: var(--serif);
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  line-height: 1;
}

.proof-label {
  display: block;
  margin-top: 10px;
  color: rgba(247, 241, 230, 0.77);
  font-size: 0.92rem;
}

.section {
  position: relative;
  z-index: 2;
  padding: clamp(72px, 10vw, 128px) 0;
}

.section-dark {
  background: var(--ink);
  color: var(--ivory);
}

.section-forest {
  background: var(--forest);
  color: var(--ivory);
}

.section-paper {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0)),
    var(--ivory);
}

.container {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.75fr);
  gap: clamp(24px, 6vw, 84px);
  align-items: end;
  margin-bottom: clamp(36px, 6vw, 64px);
}

.section-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 6vw, 5.2rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0;
}

.section-heading p {
  margin: 0;
  color: rgba(17, 22, 20, 0.72);
  font-size: clamp(1.02rem, 2vw, 1.18rem);
}

.section-dark .section-heading p,
.section-forest .section-heading p {
  color: rgba(247, 241, 230, 0.76);
}

.ribbon {
  position: relative;
  z-index: 5;
  border-block: 1px solid rgba(208, 167, 90, 0.25);
  background: var(--ink);
  color: var(--ivory);
}

.threshold {
  position: relative;
  z-index: 2;
  min-height: clamp(760px, 92svh, 1080px);
  color: var(--ivory);
  background:
    linear-gradient(90deg, rgba(13, 17, 16, 0.92) 0%, rgba(13, 17, 16, 0.78) 42%, rgba(13, 17, 16, 0.36) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(17, 22, 20, 0.28) 24%, rgba(17, 22, 20, 0.4) 74%, var(--ink) 100%),
    url("assets/images/library-passage.png") center / cover no-repeat;
  overflow: hidden;
  isolation: isolate;
}

.threshold::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(208, 167, 90, 0.1), rgba(208, 167, 90, 0) 28%),
    repeating-linear-gradient(90deg, rgba(247, 241, 230, 0.05) 0 1px, transparent 1px 86px);
  opacity: 0.52;
  transform: translateX(calc(var(--scroll-progress) * -46px));
}

.threshold::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 34%;
  background: linear-gradient(180deg, rgba(17, 22, 20, 0), var(--ink));
}

.threshold-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(340px, 0.55fr);
  gap: clamp(28px, 7vw, 84px);
  align-items: center;
  width: min(1180px, calc(100% - 36px));
  min-height: clamp(760px, 92svh, 1080px);
  margin: 0 auto;
  padding: clamp(86px, 12vh, 150px) 0;
}

.threshold-copy {
  max-width: 760px;
  animation: threshold-enter 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.threshold-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 7vw, 6.7rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: 0;
}

.threshold-copy p:not(.eyebrow) {
  max-width: 610px;
  margin: 28px 0 0;
  color: rgba(247, 241, 230, 0.78);
  font-size: clamp(1.04rem, 2vw, 1.22rem);
}

.threshold-objects {
  display: grid;
  gap: 14px;
  align-self: center;
  animation: threshold-enter 900ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

.threshold-object {
  position: relative;
  min-height: 116px;
  padding: 22px 24px;
  border: 1px solid rgba(247, 241, 230, 0.18);
  background:
    linear-gradient(135deg, rgba(247, 241, 230, 0.1), rgba(247, 241, 230, 0.03)),
    rgba(12, 16, 15, 0.52);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.threshold-object::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(208, 167, 90, 0.72), transparent);
  transform: translateX(-35%);
  animation: shelf-light 5.8s ease-in-out infinite;
}

.threshold-object span {
  display: block;
  color: rgba(247, 241, 230, 0.66);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.threshold-object strong {
  display: block;
  margin-top: 16px;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1;
}

.ribbon-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 18px 0;
  color: rgba(247, 241, 230, 0.72);
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line-dark);
  background: rgba(17, 22, 20, 0.12);
}

.process-step {
  position: relative;
  min-height: 300px;
  padding: clamp(22px, 3vw, 34px);
  background: rgba(255, 255, 255, 0.48);
  overflow: hidden;
  transition: background-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.process-step::after {
  content: "";
  position: absolute;
  inset: auto 24px 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(118, 47, 57, 0), rgba(118, 47, 57, 0.55), rgba(118, 47, 57, 0));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.process-step:hover {
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 24px 70px rgba(17, 22, 20, 0.12);
  transform: translateY(-4px);
}

.process-step:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.process-step + .process-step {
  border-left: 1px solid var(--line-dark);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 72px;
  border: 1px solid rgba(118, 47, 57, 0.38);
  border-radius: 50%;
  color: var(--wine);
  font-family: var(--serif);
  font-size: 1.1rem;
}

.process-step h3,
.model h3,
.offer-card h3,
.quality-item h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0;
}

.process-step p,
.model p,
.offer-card p,
.quality-item p {
  margin: 16px 0 0;
  color: rgba(17, 22, 20, 0.72);
}

.models {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid rgba(247, 241, 230, 0.18);
  background: rgba(247, 241, 230, 0.16);
}

.model {
  position: relative;
  min-height: 430px;
  padding: clamp(28px, 5vw, 56px);
  background: rgba(247, 241, 230, 0.06);
  overflow: hidden;
}

.model::before,
.offer-card::before,
.quality-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(208, 167, 90, 0), rgba(208, 167, 90, 0.12), rgba(208, 167, 90, 0));
  opacity: 0;
  transform: translateX(-80%);
  transition: opacity 220ms ease, transform 700ms ease;
  pointer-events: none;
}

.model:hover::before,
.offer-card:hover::before,
.quality-item:hover::before {
  opacity: 1;
  transform: translateX(80%);
}

.model-featured {
  background:
    linear-gradient(135deg, rgba(208, 167, 90, 0.22), rgba(25, 58, 49, 0.08)),
    rgba(247, 241, 230, 0.08);
}

.model h3 {
  color: var(--ivory);
  font-size: clamp(2rem, 5vw, 4rem);
}

.model p,
.model li {
  color: rgba(247, 241, 230, 0.75);
}

.model ul {
  display: grid;
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.model li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.model li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--gold);
  flex: 0 0 auto;
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 26px;
  border: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, 0.52);
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.offer-card:hover {
  border-color: rgba(118, 47, 57, 0.28);
  box-shadow: 0 22px 68px rgba(17, 22, 20, 0.12);
  transform: translateY(-5px);
}

.offer-card.featured {
  background: var(--ink);
  color: var(--ivory);
  box-shadow: var(--shadow);
}

.offer-card.featured p,
.offer-card.featured .price-note {
  color: rgba(247, 241, 230, 0.72);
}

.price {
  margin-top: auto;
  padding-top: 42px;
  color: var(--wine);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  line-height: 1.05;
}

.featured .price {
  color: var(--gold);
}

.price-note {
  margin-top: 8px;
  color: rgba(17, 22, 20, 0.62);
  font-size: 0.92rem;
}

.atelier {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(340px, 0.64fr);
  gap: clamp(28px, 7vw, 86px);
  align-items: center;
}

.atelier-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 5.7rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: 0;
}

.atelier-copy p {
  max-width: 640px;
  margin: 28px 0 0;
  color: rgba(247, 241, 230, 0.76);
  font-size: clamp(1.04rem, 2vw, 1.2rem);
}

.atelier-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 38px;
  border: 1px solid rgba(247, 241, 230, 0.16);
  background: rgba(247, 241, 230, 0.16);
}

.atelier-list span {
  min-height: 82px;
  padding: 20px;
  background: rgba(247, 241, 230, 0.06);
  color: rgba(247, 241, 230, 0.82);
}

.book-stack {
  position: relative;
  min-height: 560px;
}

.book-cover {
  position: absolute;
  border: 1px solid rgba(247, 241, 230, 0.22);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.book-stack:hover .book-cover.one {
  transform: translateY(-12px) rotate(2deg);
}

.book-stack:hover .book-cover.two {
  transform: translateY(8px) rotate(-10deg);
}

.book-stack:hover .book-cover.three {
  transform: translateY(-6px) rotate(1deg);
}

.book-cover.one {
  inset: 4% 8% auto auto;
  width: min(310px, 64%);
  aspect-ratio: 0.7;
  background:
    linear-gradient(155deg, rgba(208, 167, 90, 0.2), rgba(17, 22, 20, 0.08)),
    var(--wine);
}

.book-cover.two {
  inset: 24% auto auto 2%;
  width: min(300px, 62%);
  aspect-ratio: 0.72;
  background:
    linear-gradient(135deg, rgba(247, 241, 230, 0.18), rgba(17, 22, 20, 0.1)),
    var(--forest-2);
  transform: rotate(-7deg);
}

.book-cover.three {
  inset: auto 0 0 auto;
  width: min(360px, 72%);
  aspect-ratio: 1.2;
  background:
    linear-gradient(135deg, rgba(208, 167, 90, 0.34), rgba(247, 241, 230, 0.06)),
    var(--ink-2);
}

.cover-label {
  position: absolute;
  inset: auto 24px 24px 24px;
  color: rgba(247, 241, 230, 0.82);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  line-height: 1.05;
}

.cover-line {
  position: absolute;
  inset: 28px 24px auto;
  height: 1px;
  background: rgba(208, 167, 90, 0.55);
}

.quality-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line-dark);
  background: rgba(17, 22, 20, 0.12);
}

.quality-item {
  position: relative;
  min-height: 300px;
  padding: clamp(24px, 4vw, 42px);
  background: rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.quality-item strong {
  display: block;
  margin-bottom: 52px;
  color: var(--wine);
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cta-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(300px, 0.55fr);
  gap: clamp(26px, 6vw, 72px);
  align-items: end;
  padding: clamp(34px, 6vw, 72px);
  border: 1px solid rgba(247, 241, 230, 0.18);
  background:
    linear-gradient(135deg, rgba(208, 167, 90, 0.18), rgba(118, 47, 57, 0.14)),
    rgba(247, 241, 230, 0.06);
  overflow: hidden;
}

.cta-panel::after {
  content: "";
  position: absolute;
  inset: auto -10% -38% auto;
  width: 56%;
  height: 80%;
  background: linear-gradient(180deg, rgba(208, 167, 90, 0.2), rgba(208, 167, 90, 0));
  filter: blur(24px);
  transform: rotate(-16deg);
  pointer-events: none;
}

@keyframes lamp-breathe {
  0%, 100% { opacity: 0.24; }
  50% { opacity: 0.46; }
}

@keyframes dust-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.7);
  }
  18% {
    opacity: 0.78;
  }
  100% {
    opacity: 0;
    transform: translate3d(32px, -82vh, 0) scale(1.25);
  }
}

@keyframes shelf-light {
  0%, 100% { transform: translateX(-65%); opacity: 0.12; }
  45%, 55% { transform: translateX(65%); opacity: 0.82; }
}

@keyframes threshold-enter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loom-halo {
  0%, 100% { opacity: 0.55; transform: scale(0.98); }
  50% { opacity: 0.95; transform: scale(1.04); }
}

@keyframes loom-wheel {
  to { transform: rotate(1turn); }
}

@keyframes loom-aura-pulse {
  0%, 100% { opacity: 0.34; transform: scale(0.94); }
  50% { opacity: 0.72; transform: scale(1.08); }
}

@keyframes orbit-spin {
  to { transform: rotate(1turn); stroke-dashoffset: -260; }
}

@keyframes flow-travel {
  to { stroke-dashoffset: -320; }
}

@keyframes page-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(10px, -18px, 0) rotate(4deg); }
}

@keyframes book-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg) scale(1); }
  50% { transform: translate3d(0, -8px, 0) rotate(1deg) scale(1.025); }
}

@keyframes drawer-open {
  0%, 100% { transform: translateY(0); }
  48%, 58% { transform: translateY(8px); }
}

@keyframes drawer-glow {
  0%, 100% { opacity: 0.38; }
  50% { opacity: 0.86; }
}

@keyframes store-arrive {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.82; }
  50% { transform: translate3d(-8px, 6px, 0); opacity: 1; }
}

@keyframes star-flicker {
  0%, 100% { opacity: 0.28; transform: scale(0.72); }
  44% { opacity: 1; transform: scale(1.25); }
}

.cta-panel h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0;
}

.cta-panel p {
  margin: 22px 0 0;
  color: rgba(247, 241, 230, 0.78);
  font-size: clamp(1.03rem, 2vw, 1.2rem);
}

.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

.site-footer {
  padding: 28px 0;
  background: #0d1110;
  color: rgba(247, 241, 230, 0.58);
  font-size: 0.9rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
}

@media (max-width: 980px) {
  .ambient-lamp-one,
  .ambient-lamp-three {
    opacity: 0.24;
  }

  .site-nav {
    display: none;
  }

  .header-inner {
    padding-right: 10px;
  }

  .hero,
  .hero-inner {
    min-height: clamp(720px, 86svh, 980px);
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .story-loom {
    justify-self: center;
    width: min(520px, 100%);
  }

  .hero {
    background:
      linear-gradient(90deg, rgba(10, 13, 12, 0.96) 0%, rgba(13, 18, 16, 0.83) 48%, rgba(13, 18, 16, 0.24) 100%),
      linear-gradient(180deg, rgba(10, 13, 12, 0.26) 0%, rgba(10, 13, 12, 0.78) 100%),
      url("assets/images/hero-atelier.png") center right / cover no-repeat;
  }

  .threshold,
  .threshold-inner {
    min-height: clamp(720px, 88svh, 960px);
  }

  .threshold-inner {
    grid-template-columns: 1fr;
  }

  .section-heading,
  .atelier,
  .cta-panel {
    grid-template-columns: 1fr;
  }

  .process-grid,
  .offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .models,
  .quality-grid {
    grid-template-columns: 1fr;
  }

  .process-step + .process-step {
    border-left: 0;
    border-top: 1px solid var(--line-dark);
  }
}

@media (max-width: 680px) {
  .ambient-lights {
    opacity: 0.38;
  }

  .magic-dust {
    opacity: 0.34;
  }

  body.admin-bar .site-header {
    top: 46px;
  }

  .site-header {
    padding: 12px;
  }

  .header-inner {
    border-radius: 20px;
  }

  .brand {
    max-width: 100%;
  }

  .brand-name {
    white-space: normal;
  }

  .header-cta {
    display: none;
  }

  .hero,
  .hero-inner {
    min-height: auto;
  }

  .hero {
    background:
      linear-gradient(180deg, rgba(10, 13, 12, 0.74) 0%, rgba(10, 13, 12, 0.92) 64%, rgba(10, 13, 12, 0.98) 100%),
      url("assets/images/hero-atelier.png") 63% center / cover no-repeat;
  }

  .threshold {
    background:
      linear-gradient(180deg, rgba(13, 17, 16, 0.78) 0%, rgba(13, 17, 16, 0.92) 74%, var(--ink) 100%),
      url("assets/images/library-passage.png") center / cover no-repeat;
  }

  .threshold,
  .threshold-inner {
    min-height: auto;
  }

  .threshold-inner {
    width: calc(100vw - 24px);
    padding: 78px 0;
  }

  .threshold-copy h2 {
    max-width: min(32ch, calc(100vw - 44px));
    font-size: clamp(1.95rem, 7.8vw, 2.5rem);
    line-height: 1.02;
    overflow-wrap: break-word;
  }

  .threshold-copy p:not(.eyebrow) {
    width: min(34ch, calc(100vw - 24px));
  }

  .threshold-objects {
    gap: 10px;
  }

  .threshold-object {
    min-height: auto;
  }

  .hero-inner {
    width: calc(100vw - 24px);
    max-width: 1180px;
    padding-top: 106px;
    padding-bottom: 42px;
  }

  .hero-copy,
  .hero-lead {
    width: min(34ch, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    white-space: normal;
    overflow-wrap: break-word;
  }

  .hero-lead {
    font-size: 1.08rem;
    line-height: 1.5;
  }

  .story-loom {
    width: min(100%, 370px);
    margin-top: 4px;
  }

  .loom-stage {
    border-radius: 28px;
  }

  .loom-map {
    justify-content: center;
    margin-top: -18px;
  }

  .loom-map span {
    width: 100%;
    max-width: 320px;
    min-height: auto;
    padding: 14px 16px;
    border-radius: 22px;
    transform: none !important;
  }

  .loom-map strong {
    font-size: 1.15rem;
  }

  .hero h1 {
    max-width: 7ch;
  }

  .hero-actions,
  .footer-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  .hero-proof,
  .process-grid,
  .offer-grid,
  .atelier-list {
    grid-template-columns: 1fr;
  }

  .ribbon-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: calc(100vw - 64px);
    text-align: center;
  }

  .ribbon-inner span {
    display: block;
    max-width: 28ch;
    margin: 0 auto;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .section-heading h2 {
    max-width: calc(100vw - 36px);
    font-size: clamp(2.15rem, 10.5vw, 3.35rem);
  }

  .section-heading p {
    max-width: calc(100vw - 36px);
  }

  .proof-item,
  .process-step,
  .offer-card,
  .quality-item {
    min-height: auto;
  }

  .step-number {
    margin-bottom: 38px;
  }

  .model {
    min-height: auto;
  }

  .book-stack {
    min-height: 430px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   v0.4.0 — typografia Fraunces, scrollytelling, test, FAQ, glow
   ============================================================ */

h1, h2, h3,
.brand-name,
.brand-mark {
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
}

.hero h1,
.section-heading h2,
.threshold-copy h2,
.atelier-copy h2,
.cta-panel h2 {
  font-weight: 480;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hero — dłuższy nagłówek zdaniowy zamiast nazwy marki */
.hero h1.hero-headline {
  max-width: 17ch;
  font-size: clamp(2.9rem, 6.6vw, 6.1rem);
  font-weight: 460;
  line-height: 0.99;
}

.hero-trust {
  margin: 22px 0 0;
  max-width: 46ch;
  color: rgba(247, 241, 230, 0.62);
  font-size: 0.92rem;
}

.hero-scrollcue {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vh, 40px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  color: rgba(247, 241, 230, 0.66);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-scrollcue::after {
  content: "";
  width: 30px;
  height: 30px;
  border: 1px solid rgba(208, 167, 90, 0.5);
  border-radius: 50%;
  background:
    linear-gradient(rgba(208, 167, 90, 0.85), rgba(208, 167, 90, 0.85)) center 8px / 1px 9px no-repeat,
    radial-gradient(circle at 50% 19px, rgba(208, 167, 90, 0.85) 1.5px, transparent 2px);
  animation: cue-bob 2.4s ease-in-out infinite;
}

@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(5px); opacity: 1; }
}

/* Eyebrow w sekcji-heading: pełna szerokość nad H2 */
.section-heading .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.section-paper .eyebrow {
  color: rgba(17, 22, 20, 0.58);
}

/* Lewy „tor podróży" — pasek postępu z iskrą */
.journey-rail {
  position: fixed;
  left: clamp(10px, 2vw, 26px);
  top: 18vh;
  bottom: 14vh;
  z-index: 20;
  width: 2px;
  pointer-events: none;
}

.journey-rail .rail-track,
.journey-rail .rail-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: 999px;
}

.journey-rail .rail-track {
  background: rgba(120, 100, 70, 0.22);
}

.journey-rail .rail-fill {
  height: calc(var(--scroll-progress) * 100%);
  background: linear-gradient(180deg, rgba(208, 167, 90, 0.1), var(--gold));
  box-shadow: 0 0 16px rgba(208, 167, 90, 0.55);
}

.journey-rail .rail-spark {
  position: absolute;
  left: 50%;
  top: calc(var(--scroll-progress) * 100%);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--ivory);
  box-shadow: 0 0 14px 3px rgba(208, 167, 90, 0.8);
}

/* Problem — trzy karty obaw na ciemnym tle */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(247, 241, 230, 0.16);
  background: rgba(247, 241, 230, 0.16);
}

.problem-card {
  position: relative;
  min-height: 280px;
  padding: clamp(26px, 3vw, 40px);
  background: rgba(13, 17, 16, 0.72);
  overflow: hidden;
}

.problem-index {
  display: block;
  margin-bottom: 40px;
  color: rgba(208, 167, 90, 0.85);
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}

.problem-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 500;
  line-height: 1.06;
}

.problem-card p {
  margin: 16px 0 0;
  color: rgba(247, 241, 230, 0.74);
}

.problem-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(208, 167, 90, 0.7), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms ease;
}

.problem-card:hover::after {
  transform: scaleX(1);
}

/* Journey — scrollytelling ze „sklejonym" wizualem */
.journey {
  position: relative;
  z-index: 2;
  padding: clamp(72px, 10vw, 128px) 0;
}

.journey-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.05fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: start;
}

.journey-visual {
  position: sticky;
  top: 20vh;
  height: clamp(300px, 50vh, 430px);
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 40%, rgba(208, 167, 90, 0.16), rgba(208, 167, 90, 0) 60%),
    linear-gradient(160deg, rgba(17, 22, 20, 0.92), rgba(25, 58, 49, 0.85));
  overflow: hidden;
  box-shadow: var(--shadow);
}

.journey-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px;
  text-align: center;
  opacity: 0;
  transform: translateY(26px) scale(0.98);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.journey-scene.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.scene-index {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 9vw, 6rem);
  font-weight: 460;
  line-height: 1;
  color: rgba(208, 167, 90, 0.92);
}

.scene-glyph {
  width: clamp(96px, 16vw, 140px);
  height: clamp(96px, 16vw, 140px);
  fill: none;
  stroke: rgba(247, 241, 230, 0.82);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.4));
}

.scene-label {
  color: rgba(247, 241, 230, 0.86);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
}

.journey-steps {
  display: grid;
}

.journey-step {
  min-height: clamp(240px, 40vh, 360px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0 8px 30px;
  border-left: 2px solid rgba(17, 22, 20, 0.12);
  opacity: 0.4;
  transition: opacity 420ms ease, border-color 420ms ease;
}

.journey-step.is-current {
  opacity: 1;
  border-left-color: var(--gold);
}

.step-kicker {
  display: block;
  margin-bottom: 16px;
  color: var(--wine);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.journey-step h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.04;
}

.journey-step p {
  margin: 18px 0 0;
  max-width: 52ch;
  color: rgba(17, 22, 20, 0.72);
  font-size: clamp(1rem, 1.7vw, 1.12rem);
}

/* Modele — etykieta i dopasowanie */
.model-tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding: 6px 14px;
  border: 1px solid rgba(208, 167, 90, 0.5);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.model-fit {
  margin-top: 26px !important;
  padding-top: 20px;
  border-top: 1px solid rgba(247, 241, 230, 0.16);
  color: rgba(247, 241, 230, 0.62) !important;
  font-style: italic;
}

.offer-foot {
  margin: 26px 0 0;
  color: rgba(17, 22, 20, 0.56);
  font-size: 0.9rem;
}

/* Test gotowości — interaktywny */
.selfcheck {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.78fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: stretch;
}

.selfcheck-form {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid rgba(247, 241, 230, 0.18);
  border-radius: 4px;
  background: rgba(247, 241, 230, 0.05);
  color: rgba(247, 241, 230, 0.9);
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.check:hover {
  border-color: rgba(208, 167, 90, 0.5);
  background: rgba(247, 241, 230, 0.08);
}

.check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.check-box {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border: 1px solid rgba(208, 167, 90, 0.6);
  border-radius: 6px;
  background: transparent;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.check-box::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid #11140f;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.check input:checked ~ .check-box {
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--gold), var(--copper));
}

.check input:checked ~ .check-box::after {
  transform: rotate(45deg) scale(1);
}

.check input:focus-visible ~ .check-box {
  outline: 2px solid var(--ivory);
  outline-offset: 2px;
}

.check input:checked ~ .check-text {
  color: var(--ivory);
}

.check-text {
  font-size: 1rem;
  line-height: 1.4;
}

.selfcheck-result {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(208, 167, 90, 0.3);
  border-radius: 4px;
  background:
    linear-gradient(150deg, rgba(208, 167, 90, 0.16), rgba(17, 22, 20, 0.2)),
    rgba(13, 17, 16, 0.4);
}

.result-meter {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(247, 241, 230, 0.16);
  overflow: hidden;
}

.result-bar {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--copper), var(--gold));
  transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.result-text {
  margin: 0;
  color: rgba(247, 241, 230, 0.92);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.18;
}

.selfcheck-result .btn {
  align-self: flex-start;
}

.result-note {
  margin: 0;
  color: rgba(247, 241, 230, 0.55);
  font-size: 0.82rem;
}

/* FAQ — obiekcje */
.faq-list {
  display: grid;
  gap: 1px;
  border: 1px solid rgba(247, 241, 230, 0.16);
  background: rgba(247, 241, 230, 0.16);
}

.faq-item {
  background: rgba(13, 17, 16, 0.5);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 34px);
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
  transition: color 180ms ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(208, 167, 90, 0.5);
  border-radius: 50%;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 260ms ease, background-color 200ms ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
  background: rgba(208, 167, 90, 0.16);
}

.faq-item summary:hover {
  color: var(--gold);
}

.faq-item p {
  margin: 0;
  padding: 0 clamp(20px, 3vw, 34px) clamp(22px, 2.6vw, 30px);
  max-width: 70ch;
  color: rgba(247, 241, 230, 0.74);
}

/* Pointer-glow na CTA i kartach wyróżnionych */
.btn-primary[data-glow] {
  background-image: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 62%);
}

.cta-panel[data-glow]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(208, 167, 90, 0.3), transparent 60%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.cta-panel[data-glow]:hover::before {
  opacity: 1;
}

.cta-panel > * {
  position: relative;
  z-index: 1;
}

.model-featured[data-glow]::after,
.offer-card.featured[data-glow]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(208, 167, 90, 0.22), transparent 58%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.model-featured[data-glow]:hover::after,
.offer-card.featured[data-glow]:hover::after {
  opacity: 1;
}

/* Responsywność nowych komponentów */
@media (max-width: 980px) {
  .journey-rail {
    display: none;
  }

  .problem-grid {
    grid-template-columns: 1fr;
  }

  .journey-stage {
    grid-template-columns: 1fr;
  }

  .journey-visual {
    position: relative;
    top: 0;
    height: 46vh;
    margin-bottom: 28px;
  }

  .journey-step {
    min-height: 0;
    padding: 28px 0 28px 24px;
    opacity: 1;
    border-left-color: rgba(17, 22, 20, 0.16);
  }

  .journey-step.is-current {
    border-left-color: var(--gold);
  }

  .selfcheck {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .hero h1.hero-headline {
    max-width: calc(100vw - 36px);
    font-size: clamp(2.2rem, 9vw, 2.9rem);
  }

  .hero-scrollcue {
    display: none;
  }

  .journey-visual {
    height: 40vh;
    min-height: 280px;
  }

  .scene-index {
    font-size: clamp(3rem, 16vw, 4rem);
  }
}

/* ============================================================
   v0.5.0 — animacje: hero słowo-po-słowie, podkreślnik nagłówków,
   rysowanie glifów scen, parallax loomu
   ============================================================ */

/* Hero headline — wjazd słowo po słowie (klasy dokłada JS) */
.hero-headline .hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.06em;
}

.hero-headline .hw-i {
  display: inline-block;
  transform: translateY(112%);
  opacity: 0;
  animation: hw-rise 0.82s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 160ms);
}

@keyframes hw-rise {
  to { transform: translateY(0); opacity: 1; }
}

/* Samorysujący się podkreślnik pod nagłówkami sekcji (SVG dokłada JS) */
.section-heading h2 {
  position: relative;
}

.heading-rule {
  position: absolute;
  left: 2px;
  bottom: -0.36em;
  width: min(300px, 78%);
  height: 13px;
  overflow: visible;
  pointer-events: none;
}

.heading-rule path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}

.section-heading.is-visible .heading-rule path {
  animation: rule-draw 1.05s cubic-bezier(0.65, 0, 0.35, 1) 0.32s forwards;
}

@keyframes rule-draw {
  to { stroke-dashoffset: 0; }
}

/* Rysowanie glifów w scenach procesu — sterowane z JS (getTotalLength +
   stroke-dashoffset przez transition). Tu tylko bazowy transition na wypadek
   braku inline-stylu. */
.scene-glyph > * {
  transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Parallax loomu hero względem kursora (JS ustawia --lx/--ly) */
.story-loom .loom-svg {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: translate3d(calc(var(--lx, 0) * 1px), calc(var(--ly, 0) * 1px), 0) rotate(calc(var(--lx, 0) * 0.05deg));
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline .hw-i { transform: none; opacity: 1; animation: none; }
  .heading-rule path { stroke-dashoffset: 0; animation: none; }
  .scene-glyph > * { stroke-dashoffset: 0 !important; transition: none; }
  .story-loom .loom-svg { transform: none; }
}

/* ============================================================
   v0.6.0 — DRAWER SCROLLYTELLING: sekcje wysuwane jak szuflada
   ============================================================ */

.drawer {
  position: relative;
}

/* 3D wysuwanie spod blatu: sterowane --enter (0 = w szufladzie, 1 = płasko 2D).
   Perspektywa na sekcji, transform na treści; origin u dołu = wychył jak otwierana
   szuflada. Bez JS (brak .has-drawer3d) treść jest po prostu widoczna. */
.has-drawer3d .drawer {
  perspective: 1500px;
  perspective-origin: 50% 30%;
}

.has-drawer3d .drawer > :first-child {
  transform-origin: 50% 130%;
  transform:
    translateY(calc((1 - var(--enter, 1)) * 8vh))
    translateZ(calc((1 - var(--enter, 1)) * -190px))
    rotateX(calc((1 - var(--enter, 1)) * 13deg))
    scale(calc(0.96 + var(--enter, 1) * 0.04));
  opacity: calc(0.15 + var(--enter, 1) * 0.85);
  will-change: transform, opacity;
}

/* w pełni wysunięta → czyste 2D (transform:none chroni position:sticky w #proces) */
.has-drawer3d .drawer.is-flat > :first-child {
  transform: none;
  opacity: 1;
}

/* drewniany front szuflady z mosiężnym uchwytem — wysuwa się RAZEM z szufladą */
.has-drawer3d .drawer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(150px, 24vw, 320px);
  height: 30px;
  z-index: 6;
  pointer-events: none;
  border-radius: 0 0 16px 16px;
  background:
    radial-gradient(circle at 12% 46%, rgba(36, 22, 10, 0.95) 0 3px, transparent 3.5px),
    radial-gradient(circle at 88% 46%, rgba(36, 22, 10, 0.95) 0 3px, transparent 3.5px),
    linear-gradient(180deg, #6b4a28 0%, #4a3018 70%, #3a2613 100%);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.4),
    inset 0 2px 2px rgba(233, 201, 140, 0.6);
  /* przy --enter=0 front jest „wysunięty" w dół (widoczny), przy 1 chowa się w górę pod blat */
  transform: translateX(-50%) translateY(calc(var(--enter, 1) * -34px));
  opacity: clamp(0, calc(1.15 - var(--enter, 1) * 1.4), 1);
}

.has-drawer3d .drawer.is-flat::after { opacity: 0; }

/* uchwyt-szczelina: mosiężna „gałka" na froncie */
.has-drawer3d .drawer::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: clamp(56px, 8vw, 96px);
  height: 7px;
  z-index: 7;
  pointer-events: none;
  border-radius: 6px;
  background: linear-gradient(180deg, #f0d49a, #b07f44);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%) translateY(calc(var(--enter, 1) * -34px));
  opacity: clamp(0, calc(1.15 - var(--enter, 1) * 1.4), 1);
}

.has-drawer3d .drawer.is-flat::before { opacity: 0; }

/* ribbon cienki — bez mocnego 3D */
.has-drawer3d .ribbon.drawer > :first-child {
  transform: translateY(calc((1 - var(--enter, 1)) * 24px));
}
.has-drawer3d .ribbon.drawer::after,
.has-drawer3d .ribbon.drawer::before { display: none; }

/* WYBUCH KARTEK przy wysuwaniu szuflady (JS wstrzykuje .drawer-burst > span) */
.drawer-burst {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 8;
  pointer-events: none;
}

.drawer-burst span {
  position: absolute;
  left: 50%;
  top: 0;
  width: 17px;
  height: 22px;
  background: linear-gradient(135deg, #f7f1e6, #d6c09a);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
  clip-path: polygon(0 0, 84% 6%, 100% 34%, 94% 72%, 100% 100%, 30% 95%, 7% 100%, 0 60%, 5% 30%);
  opacity: 0;
  transform: translate(-50%, 0);
  animation: paper-burst 1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes paper-burst {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(0deg) scale(0.5); }
  12% { opacity: 0.95; }
  70% { opacity: 0.85; }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--bx, 0px)), var(--by, -40px))
      rotate(var(--br, 90deg))
      scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-drawer3d .drawer > :first-child { opacity: 1; transform: none; }
  .has-drawer3d .drawer::after,
  .has-drawer3d .drawer::before { display: none; }
  .drawer-burst { display: none; }
}

/* ============================================================
   v0.6.2 — VINTAGE AMBIENCE: wisząca latarnia + naddarte kartki
   ============================================================ */

.atelier-props {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

/* Wisząca latarnia (prawy górny róg, lekkie kołysanie) */
.lantern {
  position: absolute;
  top: -6px;
  right: clamp(14px, 5vw, 96px);
  width: 80px;
  height: 150px;
  transform-origin: 50% 0;
  animation: lantern-sway 7s ease-in-out infinite;
}

.lantern-glow {
  position: absolute;
  left: 50%;
  top: 58px;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -38%);
  background: radial-gradient(circle, rgba(208, 167, 90, 0.32), rgba(208, 167, 90, 0.08) 38%, rgba(208, 167, 90, 0) 68%);
  mix-blend-mode: screen;
  animation: lantern-flicker 3.6s ease-in-out infinite;
}

.lantern-svg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lantern-cord {
  stroke: rgba(40, 30, 18, 0.7);
  stroke-width: 1.5;
}

.lantern-cap,
.lantern-base {
  fill: #6b4a26;
  stroke: rgba(208, 167, 90, 0.7);
  stroke-width: 1.2;
}

.lantern-body {
  fill: rgba(28, 20, 12, 0.42);
  stroke: rgba(208, 167, 90, 0.85);
  stroke-width: 1.6;
}

.lantern-bar {
  stroke: rgba(208, 167, 90, 0.5);
  stroke-width: 1;
}

.lantern-flame {
  fill: rgba(255, 214, 138, 0.95);
  filter: drop-shadow(0 0 10px rgba(255, 196, 110, 0.9));
  animation: lantern-flicker 2.4s ease-in-out infinite;
}

@keyframes lantern-sway {
  0%, 100% { transform: rotate(-2.4deg); }
  50% { transform: rotate(2.4deg); }
}

@keyframes lantern-flicker {
  0%, 100% { opacity: 0.78; }
  42% { opacity: 1; }
  68% { opacity: 0.66; }
}

@media (max-width: 680px) {
  .lantern { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lantern { animation: none; }
  .lantern-flame,
  .lantern-glow { animation: none; }
}


/* ============================================================
   v0.9.0 — DESK GATE: pełnoekranowa scena biurka z szufladą (prototyp)
   sterowane --p (0=zamknięte, 1=karta wypełnia ekran → oddaje sekcji)
   ============================================================ */

.desk-gate {
  position: relative;
  height: 240vh;
  z-index: 7;
}

.desk-gate__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(140% 80% at 50% 4%, rgba(208, 167, 90, 0.2), rgba(208, 167, 90, 0) 52%),
    linear-gradient(180deg, #3a2814 0%, #241608 46%, #110a04 100%);
}

/* słoje drewna na blacie */
.desk-gate__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(94deg, rgba(20, 12, 6, 0.4) 0 4px, rgba(90, 60, 32, 0) 4px 13px);
  opacity: 0.5;
  pointer-events: none;
}
/* dolna winieta */
.desk-gate__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(8, 5, 2, 0.8) 100%);
  pointer-events: none;
  z-index: 6;
}

.desk-cavity {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 50% 34%, rgba(0, 0, 0, calc(var(--p, 0) * 0.55)), transparent 58%);
  pointer-events: none;
}

/* DREWNIANA SZUFLADA (2.5D: cavity-trapez + front-trapez), wysuwa się w dół i rośnie */
.desk-drawer {
  position: absolute;
  left: 50%;
  top: calc(26% + var(--p, 0) * 56%);
  width: min(82vw, 1040px);
  height: 42vh;
  z-index: 3;
  transform: translateX(-50%) scale(calc(0.78 + var(--p, 0) * 0.46));
  transform-origin: 50% 0;
}

.desk-drawer__interior {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 56%;
  background: radial-gradient(ellipse at 50% 0%, #000 0%, #1c1108 85%);
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 16px 46px #000;
}

.desk-drawer__front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background:
    repeating-linear-gradient(90deg, rgba(20, 12, 6, 0.35) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, #7a542e 0%, #4a3018 70%, #38240f 100%);
  clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 3px 1px rgba(233, 201, 140, 0.55);
}

.desk-drawer__handle {
  position: absolute;
  left: 50%;
  top: 24%;
  width: 26%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 9px;
  background:
    radial-gradient(circle at 8% 50%, rgba(36, 22, 10, 0.95) 0 3px, transparent 3.5px),
    radial-gradient(circle at 92% 50%, rgba(36, 22, 10, 0.95) 0 3px, transparent 3.5px),
    linear-gradient(180deg, #f0d49a, #b07f44);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 246, 224, 0.6);
}

/* DUŻE KARTKI RÓŻNYCH ROZMIARÓW — wybuch z wnętrza szuflady */
.desk-papers {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.desk-papers span {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 130px;
  height: 168px;
  background: linear-gradient(135deg, #faf4e8 0%, #e7d6b2 55%, #d2bd92 100%);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
  border-radius: 3px;
  clip-path: polygon(0 0, 88% 3%, 100% 26%, 96% 64%, 100% 100%, 24% 97%, 4% 100%, 0 58%, 3% 26%);
  opacity: clamp(0, min(calc((var(--p, 0) - 0.2) * 4), calc((0.96 - var(--p, 0)) * 6)), 1);
  transform:
    translate(-50%, -50%)
    translate(calc(var(--dx) * var(--p, 0)), calc(var(--dy) * var(--p, 0)))
    rotate(calc(var(--dr) * var(--p, 0)))
    scale(var(--ds));
  will-change: transform, opacity;
}

.desk-papers span:nth-child(1)  { --dx: -64vw; --dy: -38vh; --dr: -180deg; --ds: 1.9; }
.desk-papers span:nth-child(2)  { --dx:  58vw; --dy: -52vh; --dr:  210deg; --ds: 1.2; }
.desk-papers span:nth-child(3)  { --dx: -42vw; --dy: -66vh; --dr:  140deg; --ds: 0.7; }
.desk-papers span:nth-child(4)  { --dx:  38vw; --dy: -30vh; --dr: -160deg; --ds: 2.3; }
.desk-papers span:nth-child(5)  { --dx: -18vw; --dy: -72vh; --dr:   90deg; --ds: 1.0; }
.desk-papers span:nth-child(6)  { --dx:  20vw; --dy: -60vh; --dr: -120deg; --ds: 1.6; }
.desk-papers span:nth-child(7)  { --dx: -72vw; --dy:  18vh; --dr:  240deg; --ds: 0.9; }
.desk-papers span:nth-child(8)  { --dx:  70vw; --dy:  22vh; --dr: -220deg; --ds: 1.35; }
.desk-papers span:nth-child(9)  { --dx:  -6vw; --dy: -48vh; --dr:   40deg; --ds: 2.7; }
.desk-papers span:nth-child(10) { --dx:  48vw; --dy: -78vh; --dr: -70deg;  --ds: 0.6; }

/* KARTA-MORPH: jedna kartka rośnie do pełnego ekranu i pokazuje tytuł sekcji */
.desk-morph {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.desk-morph__card {
  width: min(58vw, 540px);
  aspect-ratio: 1.5 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 6%;
  text-align: center;
  background: linear-gradient(140deg, #fcf7ed 0%, #efe0c2 60%, #e3d0a8 100%);
  border-radius: 6px;
  box-shadow: 0 60px 140px rgba(0, 0, 0, 0.55), inset 0 2px 2px rgba(255, 255, 255, 0.5);
  transform: scale(calc(0.16 + clamp(0, calc((var(--p, 0) - 0.5) * 2.3), 1) * 2.6)) rotate(calc((1 - clamp(0, calc((var(--p, 0) - 0.5) * 2.3), 1)) * -8deg));
  opacity: clamp(0, min(calc((var(--p, 0) - 0.48) * 6), calc((1.02 - var(--p, 0)) * 14)), 1);
  will-change: transform, opacity;
}

.desk-morph__eyebrow {
  color: var(--wine);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.desk-morph__title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  line-height: 1.04;
}

@media (prefers-reduced-motion: reduce) {
  .desk-gate { display: none; }
}

/* ============================================================
   v0.9.1 — HERO: szufladnik (nawigacja) + dopięcie handoffu karta→sekcja
   ============================================================ */

/* Szufladnik w hero (po prawej) — drewniana komoda z szufladami = menu */
.desk-cabinet {
  position: relative;
  justify-self: end;
  width: min(430px, 100%);
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px;
  border-radius: 16px;
  /* korpus komody = ilustracja „carcass" (ciemniejsze drewno), spójny z click-stage
     .cs-cabinet__unit (ten sam plik) (Claude v0.9.68) */
  background: url('assets/img/wood-carcass.svg') 0 0 / 100% 100% no-repeat;
  box-shadow:
    0 46px 100px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(233, 201, 140, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.desk-cabinet::before {
  /* górna listwa komody */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -9px;
  height: 10px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #6b4a28, #3a2613);
  box-shadow: inset 0 1px 0 rgba(233, 201, 140, 0.4);
}

.cab-drawer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 17px 18px;
  border-radius: 8px;
  /* drewno = JEDEN plik na front (komoda hero == komoda click-stage == front 3D),
     ilustracja słoja → całość spójna (Claude v0.9.68) */
  background: url('assets/img/wood-front.svg') 0 0 / 100% 100% no-repeat;
  box-shadow:
    inset 0 2px 0 rgba(243, 214, 156, 0.5),
    inset 0 -4px 7px rgba(0, 0, 0, 0.45),
    0 7px 15px rgba(0, 0, 0, 0.32);
  color: var(--ivory);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.38s ease, filter 0.3s ease;
}

.cab-drawer:hover,
.cab-drawer:focus-visible {
  transform: translateX(-16px);
  filter: brightness(1.08);
  box-shadow:
    inset 0 2px 0 rgba(243, 214, 156, 0.6),
    16px 0 28px rgba(0, 0, 0, 0.4),
    0 16px 30px rgba(0, 0, 0, 0.4);
  outline: none;
}

/* UCHWYT (Claude v0.9.69): jak w prawdziwym meblu — DWIE symetryczne gałki mosiężne
   po obu stronach frontu, a tytuł sekcji wyśrodkowany między nimi. Numerki usunięte.
   Gałka = ilustracyjny mosiądz: płaski korpus + cienki „atramentowy" kontur (inset ring)
   + drobny błysk; pasuje do rysowanego drewna. .cab-pull = niewidzialna szyna, gałki w
   pseudo-elementach na końcach (jeden element → dwie symetryczne gałki). */
.cab-pull {
  position: absolute;
  left: calc(16px * var(--fk, 1)); right: calc(16px * var(--fk, 1));
  top: 50%;
  height: 0;
  margin: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
.cab-pull::before,
.cab-pull::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(17px * var(--fk, 1)); height: calc(17px * var(--fk, 1));
  border-radius: 50%;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 39% 34%, #fbe6b6 0 16%, rgba(251,230,182,0) 46%),
    radial-gradient(circle at 50% 58%, #c0913f, #9c6e31 70%, #835a26);
  box-shadow:
    inset 0 0 0 calc(1.4px * var(--fk, 1)) rgba(62,38,15,0.62),
    inset 0 calc(-2px * var(--fk, 1)) calc(3px * var(--fk, 1)) rgba(70,44,16,0.45),
    0 calc(1px * var(--fk, 1)) calc(2px * var(--fk, 1)) rgba(0,0,0,0.4);
}
.cab-pull::before { left: 0; }
.cab-pull::after  { right: 0; }

/* tytuł sekcji = wyśrodkowana, elegancka „tabliczka" wersalikami (jak nazwa na froncie 3D) */
.cab-text {
  display: block;
  flex: 0 1 auto;
  max-width: calc(100% - 76px * var(--fk, 1));   /* nie wchodzi pod gałki */
  text-align: center;
  font-family: var(--serif);
  font-size: calc(1.04rem * var(--fk, 1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory);
  text-shadow: 0 calc(1px * var(--fk, 1)) calc(2px * var(--fk, 1)) rgba(0,0,0,0.45);
  white-space: nowrap;
}

.cab-no { display: none; }   /* numerki sekcji usunięte (user v0.9.69) */

/* LEKKIE ZRÓŻNICOWANIE desek (Claude v0.9.69): 3 warianty słoja rozdzielone po szufladach,
   żeby każda wyglądała jak osobna deska. Komoda hero i klon click-stage liczone TĄ SAMĄ
   kolejnością (nth-of-type) → wariant zgadza się hero↔zoom. Front 3D dostaje wariant targetu
   z JS (setStageContent) — patrz atmosphere.js. Domyślny (3n+1) = wood-front.svg. */
.cab-drawer:nth-of-type(3n+2) { background-image: url('assets/img/wood-front-2.svg'); }
.cab-drawer:nth-of-type(3n)   { background-image: url('assets/img/wood-front-3.svg'); }
.cs-cabinet__drawer:nth-of-type(3n+2) .cs-cabinet__front { background-image: url('assets/img/wood-front-2.svg'); }
.cs-cabinet__drawer:nth-of-type(3n)   .cs-cabinet__front { background-image: url('assets/img/wood-front-3.svg'); }

/* HANDOFF: karta-morph crossfade do ciemnej sekcji u końca (--p→1) */
.desk-morph__card {
  position: relative;
  overflow: hidden;
}

.desk-morph__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: #11140f;
  opacity: clamp(0, calc((var(--p, 0) - 0.84) * 6.5), 1);
  pointer-events: none;
}

.desk-morph__card > * {
  position: relative;
  z-index: 1;
}

.desk-morph__title {
  color: color-mix(in srgb, #11140f, #f7f1e6 calc(clamp(0, (var(--p, 0) - 0.84) * 6.5, 1) * 100%));
}

.desk-morph__eyebrow {
  color: color-mix(in srgb, var(--wine), var(--gold) calc(clamp(0, (var(--p, 0) - 0.84) * 6.5, 1) * 100%));
}

@media (max-width: 980px) {
  .desk-cabinet { width: min(430px, 100%); justify-self: stretch; }
}

/* ============================================================
   v0.9.2 — CLICK TRANSITION: klik szuflady w hero → pełnoekranowa scena
   (ta sama scena biurka co przy scrollu; --p animowane z JS)
   ============================================================ */

.click-stage {
  position: fixed;
  inset: 0;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(100% 70% at 50% 22%, rgba(208, 167, 90, 0.2), rgba(208, 167, 90, 0) 62%),
    linear-gradient(180deg, #2c1a0b, #080401);
  transition: opacity 0.4s ease;
}

.click-stage.is-playing {
  opacity: 1;
  visibility: visible;
}

.click-stage.is-ending {
  opacity: 0;
}

.cs-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(140% 80% at 50% 4%, rgba(208, 167, 90, 0.2), rgba(208, 167, 90, 0) 52%),
    linear-gradient(180deg, #3a2814 0%, #241608 46%, #110a04 100%);
}

.cs-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(94deg, rgba(20, 12, 6, 0.4) 0 4px, rgba(90, 60, 32, 0) 4px 13px);
  opacity: 0.5;
  pointer-events: none;
}

.cs-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(8, 5, 2, 0.8) 100%);
  pointer-events: none;
  z-index: 6;
}

@media (prefers-reduced-motion: reduce) {
  .click-stage { display: none; }
}

/* ============================================================
   v0.9.3 — SCENA v2: front→z góry (perspektywa 3D), wnętrze rośnie na
   cały ekran (zaglądanie do środka), kartki wylatują i OPADAJĄ
   ============================================================ */

.desk-gate__stage,
.cs-scene {
  perspective: 1150px;
  perspective-origin: 50% 40%;
}

/* SZUFLADA jako pudełko 3D: startuje frontem, obraca się na widok z góry,
   skaluje (zoom do wnętrza) aż wnętrze wypełnia ekran */
.desk-drawer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(74vw, 940px);
  height: 58vh;
  z-index: 3;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    rotateX(calc(clamp(0, (var(--p, 0) - 0.1) / 0.42, 1) * 56deg))
    scale(calc(0.82 + clamp(0, (var(--p, 0) - 0.06) / 0.74, 1) * 1.85));
}

/* wnętrze szuflady (dno + tylna ścianka dla głębi) */
.desk-drawer__interior {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(60, 40, 22, 0.6), rgba(10, 6, 3, 0.96) 70%),
    linear-gradient(180deg, #20140a, #0c0703);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 3px rgba(208, 167, 90, 0.22),
    inset 0 30px 70px rgba(0, 0, 0, 0.85),
    inset 0 -10px 30px rgba(0, 0, 0, 0.6);
  clip-path: none;
}

.desk-drawer__interior::before {
  /* tylna ścianka — daje wrażenie głębi wnętrza */
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 10%;
  bottom: 32%;
  background: linear-gradient(180deg, rgba(70, 48, 26, 0.55), rgba(28, 17, 8, 0.4));
  border-radius: 6px;
  box-shadow: inset 0 6px 18px rgba(0, 0, 0, 0.6);
}

/* front szuflady — przy p=0 zakrywa (zamknięta), potem składa się w dół (otwiera) */
.desk-drawer__front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  height: auto;
  transform-origin: 50% 100%;
  transform: rotateX(calc(clamp(0, (var(--p, 0) - 0.12) / 0.34, 1) * -98deg));
  background:
    repeating-linear-gradient(90deg, rgba(20, 12, 6, 0.32) 0 3px, transparent 3px 12px),
    linear-gradient(180deg, #855d34 0%, #5a3c20 60%, #432d18 100%);
  border-radius: 8px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 3px 1px rgba(243, 214, 156, 0.5);
  backface-visibility: visible;
  clip-path: none;
}

.desk-drawer__handle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 9px;
  background:
    radial-gradient(circle at 9% 50%, #3a2410 0 3px, transparent 3.5px),
    radial-gradient(circle at 91% 50%, #3a2410 0 3px, transparent 3.5px),
    linear-gradient(180deg, #f3d9a4 0%, #c79653 50%, #9a6736 100%);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 246, 224, 0.6);
}

/* KARTKI: wylatują z wnętrza i OPADAJĄ (rise → fall), różne rozmiary */
.desk-papers span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 196px;
  background: linear-gradient(135deg, #faf4e8 0%, #e7d6b2 55%, #cdb88e 100%);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  clip-path: polygon(0 0, 88% 3%, 100% 26%, 96% 64%, 100% 100%, 24% 97%, 4% 100%, 0 58%, 3% 26%);
  opacity: clamp(0, min(calc((var(--p, 0) - 0.3) * 6), calc((1.02 - var(--p, 0)) * 6)), 1);
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--px) * clamp(0, calc((var(--p, 0) - 0.32) / 0.55), 1)))
    translateY(calc(-1 * var(--rise) * clamp(0, calc((var(--p, 0) - 0.32) / 0.2), 1) + var(--fall) * clamp(0, calc((var(--p, 0) - 0.52) / 0.48), 1)))
    rotate(calc(var(--rot) * clamp(0, calc((var(--p, 0) - 0.3) / 0.65), 1)))
    scale(var(--sz));
  will-change: transform, opacity;
}

.desk-papers span:nth-child(1)  { --px: -60vw; --rise: 54vh; --fall: 135vh; --rot: -240deg; --sz: 1.7; }
.desk-papers span:nth-child(2)  { --px:  54vw; --rise: 66vh; --fall: 120vh; --rot:  260deg; --sz: 1.1; }
.desk-papers span:nth-child(3)  { --px: -38vw; --rise: 72vh; --fall: 150vh; --rot:  160deg; --sz: 0.7; }
.desk-papers span:nth-child(4)  { --px:  34vw; --rise: 48vh; --fall: 125vh; --rot: -190deg; --sz: 2.1; }
.desk-papers span:nth-child(5)  { --px: -14vw; --rise: 78vh; --fall: 140vh; --rot:  110deg; --sz: 1.0; }
.desk-papers span:nth-child(6)  { --px:  16vw; --rise: 62vh; --fall: 130vh; --rot: -140deg; --sz: 1.5; }
.desk-papers span:nth-child(7)  { --px: -68vw; --rise: 40vh; --fall: 115vh; --rot:  280deg; --sz: 0.85; }
.desk-papers span:nth-child(8)  { --px:  66vw; --rise: 44vh; --fall: 145vh; --rot: -260deg; --sz: 1.3; }
.desk-papers span:nth-child(9)  { --px:  -4vw; --rise: 86vh; --fall: 120vh; --rot:   60deg; --sz: 2.5; }
.desk-papers span:nth-child(10) { --px:  46vw; --rise: 70vh; --fall: 155vh; --rot:  -80deg; --sz: 0.6; }

/* karta-morph rośnie ciut później, gdy wnętrze już wypełnia ekran */
.desk-morph__card {
  transform: scale(calc(0.14 + clamp(0, calc((var(--p, 0) - 0.6) * 2.6), 1) * 2.7)) rotate(calc((1 - clamp(0, calc((var(--p, 0) - 0.6) * 2.6), 1)) * -7deg));
  opacity: clamp(0, min(calc((var(--p, 0) - 0.58) * 7), calc((1.04 - var(--p, 0)) * 16)), 1);
}

/* ============================================================
   v0.9.4 — krótkie bramy przy każdym przejściu + handoff per-sekcja
   ============================================================ */
.desk-gate { height: 150vh; }

/* handoff dopasowuje kolor do docelowej sekcji (--gate-bg / --gate-ink-end) */
.desk-morph__card::before { background: var(--gate-bg, #11140f); }
.desk-morph__title {
  color: color-mix(in srgb, #11140f, var(--gate-ink-end, #f7f1e6) calc(clamp(0, (var(--p, 0) - 0.84) * 6.5, 1) * 100%));
}

/* v0.9.4 — perf: will-change tylko dla aktywnej sceny (nie 70 stałych warstw) */
.desk-papers span,
.desk-drawer { will-change: auto; }
.desk-gate.is-live .desk-papers span,
.click-stage.is-playing .desk-papers span,
.desk-gate.is-live .desk-drawer,
.click-stage.is-playing .desk-drawer { will-change: transform, opacity; }

/* ============================================================
   v0.9.5 — SCENA v3: całe okno = WNĘTRZE szuflady (front + ścianki),
   front otwiera się, kartki lecą POZA ekran, jedna sekcja-kartka na front.
   Bez tytułów. Wspólne dla scroll-bram i klika.
   ============================================================ */

.dk {
  position: absolute;
  inset: 0;
}

/* DNO / wnętrze (całe okno) */
.dk-floor {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 100% at 50% 30%, rgba(70, 48, 26, 0.55), rgba(14, 9, 4, 0.98) 78%),
    linear-gradient(180deg, #1c1207, #0c0703);
}

/* ŚCIANKI (perspektywa — trapezy) */
.dk-wall { position: absolute; z-index: 2; }

.dk-back {
  left: 0; right: 0; top: 0; height: 26%;
  background: linear-gradient(180deg, #6a4a28 0%, #3c2814 100%);
  clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
  box-shadow: inset 0 -14px 26px rgba(0, 0, 0, 0.55);
}

.dk-left {
  left: 0; top: 0; bottom: 0; width: 20%;
  background: linear-gradient(90deg, #573a20 0%, #2a1a0c 100%);
  clip-path: polygon(0 0, 100% 26%, 100% 86%, 0 100%);
  box-shadow: inset -12px 0 24px rgba(0, 0, 0, 0.5);
}

.dk-right {
  right: 0; top: 0; bottom: 0; width: 20%;
  background: linear-gradient(270deg, #573a20 0%, #2a1a0c 100%);
  clip-path: polygon(100% 0, 0 26%, 0 86%, 100% 100%);
  box-shadow: inset 12px 0 24px rgba(0, 0, 0, 0.5);
}

/* przednia ścianka / lip (najbliżej nas) */
.dk-front {
  left: 0; right: 0; bottom: 0; height: 18%;
  z-index: 3;
  background:
    repeating-linear-gradient(90deg, rgba(20, 12, 6, 0.3) 0 3px, transparent 3px 12px),
    linear-gradient(180deg, #7c5631 0%, #4a3018 100%);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 10px 22px rgba(0, 0, 0, 0.45), 0 -2px 0 rgba(243, 214, 156, 0.35);
}

/* KARTKI — wylatują z wnętrza POZA ekran (scatter out) */
.dk-papers { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.dk-papers span {
  position: absolute;
  left: 50%; top: 56%;
  width: 150px; height: 196px;
  background: linear-gradient(135deg, #faf4e8 0%, #e7d6b2 55%, #cdb88e 100%);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  clip-path: polygon(0 0, 88% 3%, 100% 26%, 96% 64%, 100% 100%, 24% 97%, 4% 100%, 0 58%, 3% 26%);
  opacity: clamp(0, min(calc((var(--p, 0) - 0.3) * 7), calc((0.92 - var(--p, 0)) * 7)), 1);
  transform:
    translate(-50%, -50%)
    translate(calc(var(--px) * clamp(0, calc((var(--p, 0) - 0.3) / 0.6), 1)), calc(var(--py) * clamp(0, calc((var(--p, 0) - 0.3) / 0.6), 1)))
    rotate(calc(var(--rot) * clamp(0, calc((var(--p, 0) - 0.3) / 0.6), 1)))
    scale(var(--sz));
}

.dk-papers span:nth-child(1)  { --px: -92vw; --py: -64vh; --rot: -260deg; --sz: 1.7; }
.dk-papers span:nth-child(2)  { --px:  88vw; --py: -54vh; --rot:  280deg; --sz: 1.1; }
.dk-papers span:nth-child(3)  { --px: -78vw; --py:  60vh; --rot:  180deg; --sz: 0.8; }
.dk-papers span:nth-child(4)  { --px:  70vw; --py:  70vh; --rot: -210deg; --sz: 2.1; }
.dk-papers span:nth-child(5)  { --px: -40vw; --py: -90vh; --rot:  120deg; --sz: 1.0; }
.dk-papers span:nth-child(6)  { --px:  44vw; --py: -86vh; --rot: -150deg; --sz: 1.5; }
.dk-papers span:nth-child(7)  { --px: -96vw; --py:  18vh; --rot:  300deg; --sz: 0.9; }
.dk-papers span:nth-child(8)  { --px:  96vw; --py:  24vh; --rot: -280deg; --sz: 1.3; }
.dk-papers span:nth-child(9)  { --px: -20vw; --py:  92vh; --rot:   70deg; --sz: 2.5; }
.dk-papers span:nth-child(10) { --px:  30vw; --py:  96vh; --rot:  -90deg; --sz: 0.6; }

/* POKRYWA = front szuflady (zamknięty), otwiera się rotacją w dół */
.dk-cover {
  position: absolute;
  inset: 0;
  z-index: 6;
  transform-origin: 50% 100%;
  transform: rotateX(calc(clamp(0, calc((var(--p, 0) - 0.06) / 0.4), 1) * -104deg));
  background:
    repeating-linear-gradient(90deg, rgba(20, 12, 6, 0.3) 0 3px, transparent 3px 13px),
    linear-gradient(180deg, #855d34 0%, #5a3c20 58%, #432d18 100%);
  box-shadow: inset 0 0 0 2px rgba(243, 214, 156, 0.25), inset 0 30px 80px rgba(0, 0, 0, 0.4);
  backface-visibility: visible;
  opacity: clamp(0, calc(1.5 - var(--p, 0) * 2.6), 1);
}

.dk-handle {
  position: absolute;
  left: 50%; top: 50%;
  width: min(34%, 320px); height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background:
    radial-gradient(circle at 8% 50%, #3a2410 0 4px, transparent 4.5px),
    radial-gradient(circle at 92% 50%, #3a2410 0 4px, transparent 4.5px),
    linear-gradient(180deg, #f3d9a4 0%, #c79653 50%, #9a6736 100%);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 246, 224, 0.6);
}

/* SEKCJA-KARTKA: jedna kartka leci na front i wypełnia okno (kolor docelowej sekcji) */
.dk-sheet {
  position: absolute;
  left: 50%; top: 50%;
  width: 62vw; height: 70vh;
  z-index: 7;
  border-radius: 8px;
  background: var(--gate-bg, #11140f);
  box-shadow: 0 60px 140px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%) scale(calc(0.1 + clamp(0, calc((var(--p, 0) - 0.58) / 0.42), 1) * 3.4));
  opacity: clamp(0, calc((var(--p, 0) - 0.56) * 8), 1);
}

@media (prefers-reduced-motion: reduce) {
  .dk { display: none; }
}

/* ============================================================
   v0.9.6 — SZUFLADA 3D (prawdziwy box): niska, start dolne ~50%,
   kamera wjeżdża do środka, front zespolony z bokami (zanika),
   dno wypełnia okno i staje się sekcją.
   ============================================================ */

.desk-gate__stage,
.cs-scene { perspective: 1000px; perspective-origin: 50% 32%; }

.dkx {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* wymiary szuflady (płytka): szer/gł duże, wysokość mała */
.dkx-box {
  --w: 1600px;   /* szerokość */
  --d: 1500px;   /* głębokość */
  --h: 300px;    /* wysokość ścianek (niska) */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform:
    translateY(calc((1 - var(--p, 0)) * 17vh))
    translateZ(calc(-540px + var(--p, 0) * 1140px))
    rotateX(calc(19deg + var(--p, 0) * 71deg));
}

/* niezawodny handoff: dno „staje się" sekcją — pełnoekranowa nakładka w kolorze sekcji */
.dkx::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--gate-bg, #11140f);
  opacity: clamp(0, calc((var(--p, 0) - 0.8) * 5), 1);
  pointer-events: none;
}

.dkx-box > * {
  position: absolute;
  background:
    repeating-linear-gradient(90deg, rgba(20, 12, 6, 0.28) 0 3px, transparent 3px 13px),
    linear-gradient(180deg, #6b4a28, #3c2814);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
  backface-visibility: visible;
}

.dkx-floor {
  width: var(--w);
  height: var(--d);
  left: calc(var(--w) / -2);
  top: calc(var(--d) / -2);
  transform: translateY(calc(var(--h) / 2)) rotateX(90deg);
  background:
    radial-gradient(120% 100% at 50% 40%, rgba(70, 48, 26, 0.5), rgba(14, 9, 4, 0.96) 78%),
    linear-gradient(180deg, #1c1207, #0c0703);
}

/* dno staje się sekcją (kolor docelowej sekcji nakłada się pod koniec) */
.dkx-floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gate-bg, #11140f);
  opacity: clamp(0, calc((var(--p, 0) - 0.62) * 3.4), 1);
}

.dkx-front {
  width: var(--w);
  height: var(--h);
  left: calc(var(--w) / -2);
  top: calc(var(--h) / -2);
  transform: translateZ(calc(var(--d) / 2));
  display: grid;
  place-items: center;
  /* front zespolony z bokami; przy wjeździe do środka mija kamerę i zanika */
  opacity: clamp(0, calc(1.25 - var(--p, 0) * 2.6), 1);
}

.dkx-back {
  width: var(--w);
  height: var(--h);
  left: calc(var(--w) / -2);
  top: calc(var(--h) / -2);
  transform: translateZ(calc(var(--d) / -2)) rotateY(180deg);
}

.dkx-left {
  width: var(--d);
  height: var(--h);
  left: calc(var(--d) / -2);
  top: calc(var(--h) / -2);
  transform: translateX(calc(var(--w) / -2)) rotateY(90deg);
}

.dkx-right {
  width: var(--d);
  height: var(--h);
  left: calc(var(--d) / -2);
  top: calc(var(--h) / -2);
  transform: translateX(calc(var(--w) / 2)) rotateY(-90deg);
}

.dkx-handle {
  width: min(30%, 300px);
  height: 26px;
  border-radius: 13px;
  background:
    radial-gradient(circle at 8% 50%, #3a2410 0 4px, transparent 4.5px),
    radial-gradient(circle at 92% 50%, #3a2410 0 4px, transparent 4.5px),
    linear-gradient(180deg, #f3d9a4 0%, #c79653 50%, #9a6736 100%);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 246, 224, 0.6);
}

/* kartki — lecą poza ekran (2D warstwa nad sceną) */
.dkx-papers { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

.dkx-papers span {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 150px;
  height: 196px;
  background: linear-gradient(135deg, #faf4e8 0%, #e7d6b2 55%, #cdb88e 100%);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  clip-path: polygon(0 0, 88% 3%, 100% 26%, 96% 64%, 100% 100%, 24% 97%, 4% 100%, 0 58%, 3% 26%);
  opacity: clamp(0, min(calc((var(--p, 0) - 0.32) * 7), calc((0.9 - var(--p, 0)) * 7)), 1);
  transform:
    translate(-50%, -50%)
    translate(calc(var(--px) * clamp(0, calc((var(--p, 0) - 0.32) / 0.58), 1)), calc(var(--py) * clamp(0, calc((var(--p, 0) - 0.32) / 0.58), 1)))
    rotate(calc(var(--rot) * clamp(0, calc((var(--p, 0) - 0.32) / 0.58), 1)))
    scale(var(--sz));
}
.dkx-papers span:nth-child(1)  { --px: -92vw; --py: -64vh; --rot: -260deg; --sz: 1.7; }
.dkx-papers span:nth-child(2)  { --px:  88vw; --py: -54vh; --rot:  280deg; --sz: 1.1; }
.dkx-papers span:nth-child(3)  { --px: -78vw; --py:  60vh; --rot:  180deg; --sz: 0.8; }
.dkx-papers span:nth-child(4)  { --px:  70vw; --py:  72vh; --rot: -210deg; --sz: 2.1; }
.dkx-papers span:nth-child(5)  { --px: -40vw; --py: -90vh; --rot:  120deg; --sz: 1.0; }
.dkx-papers span:nth-child(6)  { --px:  44vw; --py: -86vh; --rot: -150deg; --sz: 1.5; }
.dkx-papers span:nth-child(7)  { --px: -96vw; --py:  20vh; --rot:  300deg; --sz: 0.9; }
.dkx-papers span:nth-child(8)  { --px:  96vw; --py:  26vh; --rot: -280deg; --sz: 1.3; }
.dkx-papers span:nth-child(9)  { --px: -22vw; --py:  92vh; --rot:   70deg; --sz: 2.5; }
.dkx-papers span:nth-child(10) { --px:  32vw; --py:  96vh; --rot:  -90deg; --sz: 0.6; }

@media (prefers-reduced-motion: reduce) { .dkx { display: none; } }

/* ============================================================
   v0.9.7 — rytm: front-prostokąt → ZAMKNIĘCIE (bez kartek) → OTWARCIE
   (kartki) → dno=sekcja. Start = czysty widok od frontu (rotateX 0).
   ============================================================ */

.desk-gate { height: 130vh; }

.dkx {
  --close: clamp(0, calc(var(--p, 0) / 0.35), 1);
  --open: clamp(0, calc((var(--p, 0) - 0.35) / 0.65), 1);
}

/* kamera: podczas close rotateX=0 (front, prostokąt), podczas open 0→90 (zaglądanie),
   zoom rośnie cały czas */
.dkx-box {
  transform:
    translateZ(calc(-320px + var(--close, 0) * 320px + var(--open, 0) * 640px))
    rotateX(calc(var(--open, 0) * 90deg));
}

/* front zespolony: widoczny i pełny przy zamknięciu, zanika przy zaglądaniu */
.dkx-front {
  opacity: clamp(0, calc(1 - var(--open, 0) * 1.7), 1);
}

/* dno staje się sekcją dopiero przy OTWARCIU */
.dkx-floor::after {
  opacity: clamp(0, calc((var(--open, 0) - 0.5) * 3), 1);
}

/* nakładka-handoff też wg open (nie pojawia się podczas zamykania) */
.dkx::after {
  opacity: clamp(0, calc((var(--open, 0) - 0.62) * 3.4), 1);
}

/* KARTKI tylko podczas OTWARCIA (na zamknięciu ich nie ma) */
.dkx-papers span {
  opacity: clamp(0, min(calc(var(--open, 0) * 6 - 0.1), calc((1 - var(--open, 0)) * 7)), 1);
  transform:
    translate(-50%, -50%)
    translate(calc(var(--px) * var(--open, 0)), calc(var(--py) * var(--open, 0)))
    rotate(calc(var(--rot) * var(--open, 0)))
    scale(var(--sz));
}

/* ============================================================
   v0.9.8 — PANEL DRAWER FLOW: sekcje przewijają się lokalnie,
   a granice sekcji uruchamiają pełnoekranową szufladę.
   ============================================================ */

.drawer-flow {
  scroll-behavior: auto;
}

.drawer-flow body {
  overscroll-behavior-y: none;
}

.drawer-flow main > .drawer-panel {
  height: 100svh;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  scrollbar-gutter: stable;
}

.drawer-flow main > .section.drawer-panel {
  padding-block: clamp(76px, 10svh, 124px);
}

.drawer-flow main > .journey.drawer-panel {
  padding-block: clamp(76px, 10svh, 124px);
}

.drawer-flow main > .hero.drawer-panel {
  min-height: 100svh;
}

.drawer-flow main > .threshold.drawer-panel {
  min-height: 100svh;
  overflow-y: auto;
}

.drawer-flow main > .drawer-panel::-webkit-scrollbar {
  width: 10px;
}

.drawer-flow main > .drawer-panel::-webkit-scrollbar-track {
  background: rgba(17, 22, 20, 0.18);
}

.drawer-flow main > .drawer-panel::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(208, 167, 90, 0.52);
  background-clip: padding-box;
}

.drawer-flow .desk-gate {
  display: none;
}

.drawer-flow .click-stage {
  background: #100803;
  transition: opacity 280ms ease;
}

.drawer-flow.drawer-moving {
  cursor: progress;
}

.drawer-flow.drawer-moving .site-header {
  transform: translateY(-130%);
}

.drawer-flow .desk-gate__stage,
.drawer-flow .cs-scene {
  perspective: clamp(780px, 82vw, 1360px);
  perspective-origin: 50% 24%;
}

.drawer-flow .cs-scene {
  background:
    radial-gradient(90% 54% at 50% 4%, rgba(240, 199, 122, 0.24), rgba(240, 199, 122, 0) 60%),
    radial-gradient(100% 100% at 50% 106%, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0) 44%),
    linear-gradient(180deg, #3f2913 0%, #241507 46%, #0e0703 100%);
}

.drawer-flow .cs-scene::before {
  background:
    repeating-linear-gradient(92deg, rgba(20, 12, 6, 0.5) 0 4px, rgba(112, 73, 35, 0) 4px 14px),
    linear-gradient(90deg, rgba(255, 223, 156, 0.08), rgba(0, 0, 0, 0.18));
  opacity: 0.68;
}

.drawer-flow .cs-scene::after {
  background:
    radial-gradient(76% 56% at 50% 42%, rgba(0, 0, 0, 0) 44%, rgba(5, 3, 1, 0.72) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.44));
  opacity: 0.92;
}

.drawer-flow .dkx {
  --close: clamp(0, calc(var(--p, 0) / 0.38), 1);
  --open: clamp(0, calc((var(--p, 0) - 0.38) / 0.62), 1);
}

.drawer-flow .dkx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: clamp(0, min(calc(var(--open, 0) * 2.8), calc((1 - var(--open, 0)) * 2.8)), 1);
  background:
    linear-gradient(180deg, rgba(166, 111, 54, 0.96) 0%, rgba(104, 63, 27, 0.82) 13%, rgba(24, 13, 5, 0.12) 34%, rgba(18, 10, 4, 0) 44%),
    linear-gradient(0deg, rgba(148, 92, 43, 0.86) 0%, rgba(83, 48, 20, 0.76) 13%, rgba(24, 13, 5, 0.1) 34%, rgba(18, 10, 4, 0) 44%),
    linear-gradient(90deg, rgba(135, 83, 39, 0.96) 0%, rgba(79, 45, 18, 0.76) 13%, rgba(18, 10, 4, 0.05) 32%, rgba(18, 10, 4, 0.05) 68%, rgba(79, 45, 18, 0.76) 87%, rgba(135, 83, 39, 0.96) 100%),
    radial-gradient(72% 56% at 50% 44%, rgba(255, 220, 150, 0.16), rgba(0, 0, 0, 0) 58%);
  box-shadow:
    inset 0 2px 0 rgba(243, 214, 156, 0.28),
    inset 0 -2px 0 rgba(243, 214, 156, 0.16),
    inset 2px 0 0 rgba(243, 214, 156, 0.14),
    inset -2px 0 0 rgba(243, 214, 156, 0.14),
    inset 0 86px 96px rgba(0, 0, 0, 0.34),
    inset 0 -86px 110px rgba(0, 0, 0, 0.48),
    inset 96px 0 110px rgba(0, 0, 0, 0.5),
    inset -96px 0 110px rgba(0, 0, 0, 0.5);
}

.drawer-flow .dkx-box {
  --w: clamp(980px, 132vw, 1880px);
  --d: clamp(920px, 124vh, 1580px);
  --h: clamp(170px, 22vh, 310px);
  transform:
    translateY(calc((1 - var(--close, 0)) * 18vh - var(--open, 0) * 5vh))
    translateZ(calc(-560px + var(--close, 0) * 520px + var(--open, 0) * 1180px))
    rotateX(calc(var(--open, 0) * 86deg))
    scale(calc(0.72 + var(--open, 0) * 0.2));
}

.drawer-flow .dkx-box > * {
  background:
    repeating-linear-gradient(90deg, rgba(20, 12, 6, 0.3) 0 3px, transparent 3px 13px),
    linear-gradient(180deg, #75502b, #35210f);
}

.drawer-flow .dkx-floor {
  background:
    radial-gradient(88% 92% at 50% 42%, rgba(92, 61, 31, 0.58), rgba(13, 8, 4, 0.98) 76%),
    repeating-linear-gradient(92deg, rgba(102, 70, 36, 0.34) 0 5px, rgba(28, 16, 7, 0.22) 5px 14px),
    linear-gradient(180deg, #241609, #0c0703);
}

.drawer-flow .dkx-front {
  opacity: clamp(0, calc(1 - var(--open, 0) * 1.85), 1);
  box-shadow:
    inset 0 16px 30px rgba(0, 0, 0, 0.5),
    inset 0 2px 0 rgba(243, 214, 156, 0.42),
    0 22px 80px rgba(0, 0, 0, 0.56);
}

.drawer-flow .dkx-handle {
  width: min(34%, 340px);
  height: clamp(20px, 3vh, 30px);
}

.drawer-flow .dkx-floor::after {
  opacity: clamp(0, calc((var(--open, 0) - 0.48) * 3.1), 1);
}

.drawer-flow .dkx::after {
  opacity: clamp(0, calc((var(--open, 0) - 0.58) * 3.2), 1);
}

.drawer-flow .dkx-papers span {
  top: 60%;
  opacity: clamp(0, min(calc(var(--open, 0) * 7 - 0.2), calc((1 - var(--open, 0)) * 6.5)), 1);
  transform:
    translate(-50%, -50%)
    translate(calc(var(--px) * var(--open, 0)), calc(var(--py) * var(--open, 0)))
    translateZ(calc(var(--open, 0) * 120px))
    rotate(calc(var(--rot) * var(--open, 0)))
    scale(var(--sz));
}

@media (max-width: 760px) {
  .drawer-flow main > .section.drawer-panel {
    padding-block: 76px 88px;
  }

  .drawer-flow .dkx-box {
    --w: 1120px;
    --d: 1040px;
    --h: 220px;
    transform:
      translateY(calc((1 - var(--close, 0)) * 18vh - var(--open, 0) * 3vh))
      translateZ(calc(-640px + var(--close, 0) * 520px + var(--open, 0) * 1180px))
      rotateX(calc(var(--open, 0) * 84deg))
      scale(calc(0.62 + var(--open, 0) * 0.24));
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-flow main > .drawer-panel {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
}

/* ============================================================
   v0.9.9 — CABINET GATE: komoda z hero jako mapa sekcji.
   Sekwencja: wnętrze obecnej szuflady -> front komody ->
   zoom do kolejnej szuflady -> widok dna od góry -> sekcja.
   ============================================================ */

.click-stage {
  --from-bg: #111614;
  --from-floor: 0;
  --cabinet-opacity: 0;
  --cabinet-scale: 1;
  --cabinet-tx: 0px;
  --cabinet-ty: 0px;
  --target-open: 0;
  --interior: 0;
  --section-floor: 0;
}

.drawer-flow .click-stage.is-playing {
  background: var(--from-bg, #111614);
}

.cs-cabinet {
  position: absolute;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  opacity: var(--cabinet-opacity, 0);
  pointer-events: none;
  /* lity ciemny spód — żeby jasne tło źródła (np. Oferta) nie prześwitywało przez
     komodę przy minScale (wracanie) i nie rozjaśniało jej na biało (Claude v0.9.61) */
  background: #140c04;
}

.cs-cabinet::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 48% at 50% 18%, rgba(243, 214, 156, 0.23), rgba(243, 214, 156, 0) 62%),
    radial-gradient(110% 76% at 50% 60%, rgba(9, 5, 2, 0), rgba(9, 5, 2, 0.78) 74%),
    linear-gradient(180deg, #2b1708, #090502);
}

.cs-cabinet__unit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(620px, 58vw);
  height: min(790px, 82vh);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.2vh, 13px);
  padding: clamp(16px, 2.1vh, 24px);
  border: 1px solid rgba(243, 214, 156, 0.24);
  border-radius: 12px;
  /* korpus komody = ilustracja „carcass" — ten sam plik co hero .desk-cabinet (Claude v0.9.68) */
  background: url('assets/img/wood-carcass.svg') 0 0 / 100% 100% no-repeat;
  box-shadow:
    0 64px 160px rgba(0, 0, 0, 0.74),
    inset 0 2px 0 rgba(243, 214, 156, 0.32),
    inset 0 0 0 6px rgba(24, 12, 4, 0.22);
  transform:
    translate(-50%, -50%)
    translate3d(var(--cabinet-tx, 0px), var(--cabinet-ty, 0px), 0)
    scale(var(--cabinet-scale, 1));
  transform-origin: 50% 50%;
  transition: filter 160ms linear;
}

.cs-cabinet__unit::before,
.cs-cabinet__unit::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  height: 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, #82572c, #3b220e);
  box-shadow: inset 0 1px 0 rgba(243, 214, 156, 0.34);
}

.cs-cabinet__unit::before {
  top: -12px;
}

.cs-cabinet__unit::after {
  bottom: -12px;
  transform: rotate(180deg);
}

.cs-cabinet__drawer {
  position: relative;
  display: block;
  border-radius: 7px;
  background:
    repeating-linear-gradient(91deg, rgba(20, 12, 6, 0.16) 0 2px, transparent 2px 10px),
    linear-gradient(180deg, #8b6035 0%, #5f3e1e 58%, #3f2712 100%);
  box-shadow:
    inset 0 2px 0 rgba(243, 214, 156, 0.48),
    inset 0 -5px 10px rgba(0, 0, 0, 0.5),
    0 8px 15px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.cs-cabinet__drawer::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 50% 22%, rgba(243, 214, 156, 0.2), rgba(11, 6, 2, 0.96) 58%),
    linear-gradient(180deg, #1b0e04, #070301);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.82);
  opacity: 0;
  transform: scaleY(0.42);
  transform-origin: 50% 18%;
}

.cs-cabinet__drawer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 90% at 50% 28%, rgba(255, 221, 152, 0.28), rgba(255, 221, 152, 0) 60%);
  opacity: 0;
}

.cs-cabinet__drawer.is-from {
  filter: brightness(1.08);
}

.cs-cabinet__drawer.is-target {
  transform: translateY(calc(var(--target-open, 0) * 16px)) scale(calc(1 + var(--target-open, 0) * 0.045));
  box-shadow:
    inset 0 2px 0 rgba(243, 214, 156, 0.62),
    inset 0 -6px 12px rgba(0, 0, 0, 0.58),
    0 14px 28px rgba(0, 0, 0, 0.48),
    0 0 calc(var(--target-open, 0) * 52px) rgba(208, 167, 90, 0.62);
}

.cs-cabinet__drawer.is-target::before {
  opacity: calc(var(--target-open, 0) * 0.92);
  transform: scaleY(calc(0.42 + var(--target-open, 0) * 0.72));
}

.cs-cabinet__drawer.is-target::after {
  opacity: var(--target-open, 0);
}

.cs-cabinet__pull {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(50%, 118px);
  height: clamp(11px, 1.7vh, 17px);
  border-radius: 999px;
  background:
    radial-gradient(circle at 10% 50%, #3a2410 0 3px, transparent 3.5px),
    radial-gradient(circle at 90% 50%, #3a2410 0 3px, transparent 3.5px),
    linear-gradient(180deg, #f3d9a4 0%, #c79653 50%, #9a6736 100%);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.56), inset 0 1px 1px rgba(255, 246, 224, 0.66);
  transform: translate(-50%, -50%);
}

.click-stage.is-playing .cs-scene::before,
.click-stage.is-playing .cs-scene::after {
  opacity: calc(0.2 + var(--cabinet-opacity, 0) * 0.6);
}

.drawer-flow .dkx {
  z-index: 10;
  opacity: var(--interior, 0);
  transform: scale(calc(0.94 + var(--interior, 0) * 0.08));
  transform-origin: 50% 50%;
}

.drawer-flow .dkx-box {
  opacity: 0;
  transform: none;
}

.drawer-flow .dkx::before {
  opacity: calc(var(--interior, 0) * 0.92);
  background:
    linear-gradient(180deg, rgba(190, 126, 58, 0.98) 0%, rgba(126, 75, 31, 0.9) 15%, rgba(45, 25, 10, 0.18) 34%, rgba(20, 11, 4, 0) 48%),
    linear-gradient(0deg, rgba(170, 101, 43, 0.92) 0%, rgba(103, 59, 24, 0.84) 15%, rgba(45, 25, 10, 0.16) 34%, rgba(20, 11, 4, 0) 48%),
    linear-gradient(90deg, rgba(152, 91, 39, 0.98) 0%, rgba(92, 52, 20, 0.86) 15%, rgba(24, 13, 5, 0.05) 34%, rgba(24, 13, 5, 0.05) 66%, rgba(92, 52, 20, 0.86) 85%, rgba(152, 91, 39, 0.98) 100%),
    radial-gradient(78% 66% at 50% 48%, rgba(142, 91, 43, 0.62), rgba(49, 28, 12, 0.88) 68%, rgba(12, 6, 2, 0.98) 100%),
    repeating-linear-gradient(92deg, rgba(132, 86, 43, 0.34) 0 5px, rgba(35, 20, 8, 0.26) 5px 15px),
    linear-gradient(180deg, #3f2610, #130902);
  box-shadow:
    inset 0 3px 0 rgba(243, 214, 156, 0.34),
    inset 0 -3px 0 rgba(243, 214, 156, 0.18),
    inset 3px 0 0 rgba(243, 214, 156, 0.16),
    inset -3px 0 0 rgba(243, 214, 156, 0.16),
    inset 0 90px 112px rgba(0, 0, 0, 0.28),
    inset 0 -96px 126px rgba(0, 0, 0, 0.42),
    inset 98px 0 118px rgba(0, 0, 0, 0.44),
    inset -98px 0 118px rgba(0, 0, 0, 0.44);
}

.drawer-flow .dkx::after {
  z-index: 7;
  background:
    radial-gradient(78% 64% at 50% 50%, var(--gate-bg, #11140f) 0%, var(--gate-bg, #11140f) 56%, rgba(17, 22, 20, 0.52) 72%, rgba(17, 22, 20, 0) 100%),
    radial-gradient(64% 48% at 50% 44%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 72%);
  opacity: var(--section-floor, 0);
}

.drawer-flow .dkx-papers {
  z-index: 6;
  opacity: clamp(0, calc(var(--interior, 0) - var(--section-floor, 0) * 0.9), 1);
}

.drawer-flow .dkx-papers span {
  top: 54%;
  opacity: clamp(0, min(calc(var(--interior, 0) * 6), calc((1 - var(--section-floor, 0)) * 2.2)), 1);
  transform:
    translate(-50%, -50%)
    translate(calc(var(--px) * var(--interior, 0)), calc(var(--py) * var(--interior, 0)))
    rotate(calc(var(--rot) * var(--interior, 0)))
    scale(var(--sz));
}

.click-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background:
    radial-gradient(70% 58% at 50% 48%, rgba(255, 222, 156, 0.12), rgba(0, 0, 0, 0) 55%),
    var(--from-bg, #111614);
  opacity: var(--from-floor, 0);
}

@media (max-width: 760px) {
  .cs-cabinet__unit {
    width: min(470px, 78vw);
    height: min(720px, 78vh);
    gap: 8px;
    padding: 14px;
  }

  .cs-cabinet__pull {
    width: 54%;
  }
}

/* ============================================================
   v0.9.10 — HERO CABINET ZOOM: overlay używa klonu komody z hero
   (jedna kolumna szerokich szuflad) i dopiero po zoomie zagląda do wnętrza.
   ============================================================ */

.cs-cabinet__unit {
  /* OSTROŚĆ ZOOMU (Claude v0.9.70): komodę renderujemy --fk× WIĘKSZĄ, a JS skaluje ją
     W DÓŁ (skala liczona z mierzonej szerokości frontu → automatycznie ~1/fk). Dzięki temu
     SVG + fonty rasteryzują się w pełnej rozdzielczości i nie ma rozmycia od upscale.
     Wszystkie wymiary w poddrzewie komody = BASE * var(--fk). */
  --fk: 5;
  width: calc(430px * var(--fk, 1));
  height: auto;
  display: flex;
  flex-direction: column;
  gap: calc(9px * var(--fk, 1));
  padding: calc(15px * var(--fk, 1));
  border-radius: calc(16px * var(--fk, 1));
  background: url('assets/img/wood-carcass.svg') 0 0 / 100% 100% no-repeat;
  /* cień skaluje się z --fk, by przy downscale komoda dalej „unosiła się" tak samo */
  box-shadow:
    0 calc(46px * var(--fk, 1)) calc(100px * var(--fk, 1)) rgba(0, 0, 0, 0.58),
    inset 0 calc(1px * var(--fk, 1)) 0 rgba(233, 201, 140, 0.35),
    inset 0 0 0 calc(1px * var(--fk, 1)) rgba(0, 0, 0, 0.45);
}

.cs-cabinet__drawer {
  min-height: calc(70px * var(--fk, 1));
  display: flex;
  align-items: center;
  gap: calc(18px * var(--fk, 1));
  padding: calc(17px * var(--fk, 1)) calc(18px * var(--fk, 1));
  color: var(--ivory);
  transform-origin: 50% 50%;
}

.cs-cabinet__drawer > * {
  position: relative;
  z-index: 2;
}

.cs-cabinet__drawer::before {
  inset: 8px 12px;
  z-index: 1;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(243, 214, 156, 0.24), rgba(13, 7, 3, 0.98) 58%),
    linear-gradient(180deg, #221105, #050201);
  box-shadow:
    inset 0 24px 40px rgba(0, 0, 0, 0.74),
    inset 0 -8px 20px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(208, 167, 90, 0.18);
  opacity: 0;
  transform: scaleY(0.18) translateY(-8px);
  transform-origin: 50% 16%;
}

.cs-cabinet__drawer.is-target {
  transform:
    translateY(calc(var(--target-open, 0) * 44px))
    translateZ(0)
    scale(calc(1 + var(--target-open, 0) * 0.12));
  filter: brightness(calc(1 + var(--target-open, 0) * 0.18));
  box-shadow:
    inset 0 2px 0 rgba(243, 214, 156, 0.68),
    inset 0 -8px 16px rgba(0, 0, 0, 0.62),
    0 calc(10px + var(--target-open, 0) * 24px) calc(18px + var(--target-open, 0) * 46px) rgba(0, 0, 0, 0.62),
    0 0 calc(var(--target-open, 0) * 58px) rgba(208, 167, 90, 0.58);
}

.cs-cabinet__drawer.is-target::before {
  opacity: calc(var(--target-open, 0) * 0.98);
  transform: scaleY(calc(0.18 + var(--target-open, 0) * 1.1)) translateY(calc(var(--target-open, 0) * -4px));
}

.cs-cabinet__drawer.is-target .cab-pull {
  transform: translateY(calc(var(--target-open, 0) * 10px));
  box-shadow:
    0 calc(2px + var(--target-open, 0) * 8px) calc(5px + var(--target-open, 0) * 18px) rgba(0, 0, 0, 0.72),
    inset 0 1px 1px rgba(255, 246, 224, 0.65);
}

.cs-cabinet__drawer.is-target .cab-text {
  opacity: calc(1 - var(--target-open, 0) * 0.72);
  transform: translateY(calc(var(--target-open, 0) * 5px));
}

.drawer-flow .dkx {
  opacity: clamp(0, calc((var(--interior, 0) - 0.08) * 1.25), 1);
}

.drawer-flow .dkx::before {
  opacity: clamp(0, calc((var(--interior, 0) - 0.12) * 1.18), 0.94);
}

.drawer-flow .dkx-papers {
  opacity: clamp(0, calc((var(--interior, 0) - 0.18) * 1.35), 1);
}

@media (max-width: 760px) {
  .cs-cabinet__unit {
    width: min(430px, calc(100vw - 28px));
    gap: 8px;
    padding: 13px;
  }

  .cs-cabinet__drawer {
    min-height: 62px;
    padding: 14px;
  }
}

/* ============================================================
   v0.9.11 — FRONT + CAVITY: po zoomie front szuflady odjeżdża
   od stałej wnęki, zanim scena przechyli się do wnętrza.
   ============================================================ */

.cs-cabinet__drawer {
  display: block;
  min-height: calc(70px * var(--fk, 1));   /* slot szuflady skaluje się z --fk (v0.9.70) */
  padding: 0;
  overflow: visible;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(243, 214, 156, 0.2), rgba(18, 9, 3, 0.98) 58%),
    linear-gradient(180deg, #241205, #060201);
  box-shadow:
    inset 0 14px 30px rgba(0, 0, 0, 0.72),
    inset 0 -6px 18px rgba(0, 0, 0, 0.78);
  perspective: 900px;
}

.cs-cabinet__front {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;   /* tytuł wyśrodkowany między gałkami (v0.9.69) */
  min-height: inherit;
  gap: calc(18px * var(--fk, 1));
  padding: calc(17px * var(--fk, 1)) calc(18px * var(--fk, 1));
  border-radius: calc(8px * var(--fk, 1));
  /* drewno v0.9.68 (Claude): TEN SAM plik ilustracji co .cab-drawer (hero) i front 3D
     → front komody i front 3D pokazują identyczny słój na styku crossfade. */
  background: url('assets/img/wood-front.svg') 0 0 / 100% 100% no-repeat;
  box-shadow:
    inset 0 calc(2px * var(--fk, 1)) 0 rgba(243, 214, 156, 0.5),
    inset 0 calc(-4px * var(--fk, 1)) calc(7px * var(--fk, 1)) rgba(0, 0, 0, 0.45),
    0 calc(7px * var(--fk, 1)) calc(15px * var(--fk, 1)) rgba(0, 0, 0, 0.32);
  color: var(--ivory);
  transform-origin: 50% 10%;
}

.cs-cabinet__drawer::before {
  inset: -10px 10px 6px;
  z-index: 1;
  border: 1px solid rgba(243, 214, 156, 0.2);
  border-radius: 9px;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(248, 211, 135, 0.28), rgba(38, 19, 7, 0.84) 34%, rgba(6, 2, 0, 0.99) 72%),
    repeating-linear-gradient(92deg, rgba(110, 70, 32, 0.18) 0 4px, rgba(12, 6, 2, 0.2) 4px 13px),
    linear-gradient(180deg, #271205, #050201);
  box-shadow:
    inset 0 28px 54px rgba(0, 0, 0, 0.76),
    inset 0 -14px 26px rgba(0, 0, 0, 0.82),
    0 0 calc(var(--target-open, 0) * 44px) rgba(208, 167, 90, 0.24);
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  opacity: calc(var(--target-open, 0) * 0.98);
  transform:
    translateY(calc(var(--target-open, 0) * -28px))
    scaleY(calc(0.24 + var(--target-open, 0) * 0.86));
  transform-origin: 50% 0;
}

.cs-cabinet__drawer::after {
  z-index: 4;
  background:
    radial-gradient(64% 86% at 50% 22%, rgba(255, 221, 152, 0.24), rgba(255, 221, 152, 0) 64%),
    linear-gradient(180deg, rgba(255, 246, 224, 0.08), rgba(0, 0, 0, 0));
}

.cs-cabinet__drawer.is-from {
  filter: none;
}

.cs-cabinet__drawer.is-target {
  z-index: 8;
  transform:
    translateY(calc(var(--target-open, 0) * -8px))
    scale(calc(1 + var(--target-open, 0) * 0.025));
  filter: brightness(calc(1 + var(--target-open, 0) * 0.12));
  box-shadow:
    inset 0 18px 34px rgba(0, 0, 0, 0.78),
    inset 0 -10px 24px rgba(0, 0, 0, 0.82),
    0 0 calc(var(--target-open, 0) * 62px) rgba(208, 167, 90, 0.36);
}

.cs-cabinet__drawer.is-target .cs-cabinet__front {
  transform:
    translateY(calc(var(--target-open, 0) * 82px))
    translateZ(calc(var(--target-open, 0) * 24px))
    scale(calc(1 + var(--target-open, 0) * 0.1));
  filter: brightness(calc(1 + var(--target-open, 0) * 0.16));
  box-shadow:
    inset 0 2px 0 rgba(243, 214, 156, 0.68),
    inset 0 -8px 16px rgba(0, 0, 0, 0.62),
    0 calc(12px + var(--target-open, 0) * 34px) calc(22px + var(--target-open, 0) * 62px) rgba(0, 0, 0, 0.68),
    0 0 calc(var(--target-open, 0) * 48px) rgba(208, 167, 90, 0.42);
}

.cs-cabinet__drawer.is-target .cab-pull {
  transform: translateY(calc(var(--target-open, 0) * 8px));
  box-shadow:
    0 calc(2px + var(--target-open, 0) * 8px) calc(5px + var(--target-open, 0) * 18px) rgba(0, 0, 0, 0.72),
    inset 0 1px 1px rgba(255, 246, 224, 0.65);
}

.cs-cabinet__drawer.is-target .cab-text {
  opacity: calc(1 - var(--target-open, 0) * 0.56);
  transform: translateY(calc(var(--target-open, 0) * 7px));
}

.click-stage.is-playing .cs-cabinet__drawer:not(.is-target) .cs-cabinet__front {
  opacity: calc(1 - var(--target-open, 0) * 0.48);
  filter:
    brightness(calc(1 - var(--target-open, 0) * 0.28))
    blur(calc(var(--target-open, 0) * 0.7px));
}

@media (max-width: 760px) {
  .cs-cabinet__front {
    padding: 14px;
  }

  .cs-cabinet__drawer.is-target .cs-cabinet__front {
    transform:
      translateY(calc(var(--target-open, 0) * 70px))
      translateZ(calc(var(--target-open, 0) * 18px))
      scale(calc(1 + var(--target-open, 0) * 0.08));
  }
}

/* ============================================================
   v0.9.12 (Claude) — przechył perspektywy do wnętrza: po wysunięciu
   szuflady (--target-open) kamera nachyla się OD GÓRY do środka,
   ukazując dno (faza --interior). Wcześniej wnętrze tylko się pojawiało.
   ============================================================ */

.drawer-flow .cs-scene {
  perspective: clamp(720px, 80vw, 1280px);
  perspective-origin: 50% 14%;
}

.drawer-flow .dkx {
  transform-origin: 50% 6%;
  transform:
    rotateX(calc((1 - var(--interior, 0)) * 58deg))
    translateY(calc((1 - var(--interior, 0)) * -6vh))
    scale(calc(0.88 + var(--interior, 0) * 0.14));
}

/* dno (sekcja) płasko na końcu — domknięcie przechyłu */
.drawer-flow .dkx::after {
  transform-origin: 50% 6%;
}

/* ============================================================
   v0.9.13 (Claude) — „zaglądanie" = zoom wnętrza na CAŁY EKRAN; dno
   wypełnia okno jako sekcja. Ścianki wnęki znikają przy końcu.
   ============================================================ */

.drawer-flow .dkx {
  transform-origin: 50% 44%;
  transform:
    rotateX(calc((1 - var(--interior, 0)) * 40deg))
    scale(calc(0.82 + var(--interior, 0) * 1.18));
}

/* ścianki/wnęka gasną, gdy dno wypełnia ekran */
.drawer-flow .dkx::before {
  opacity: clamp(0, min(calc((var(--interior, 0) - 0.1) * 1.4), calc((1 - var(--section-floor, 0)) * 1.5)), 0.94);
}

/* dno = pełnoekranowy, lity kolor sekcji (zamiast zanikającego owalu) */
.drawer-flow .dkx::after {
  background:
    radial-gradient(160% 160% at 50% 46%, var(--gate-bg, #11140f) 0 82%, var(--gate-bg, #11140f) 100%);
  opacity: var(--section-floor, 0);
}

/* winieta sceny nie ma kadrować gotowego dna */
.drawer-flow .cs-scene::after {
  opacity: calc(0.92 * (1 - var(--section-floor, 0)));
}

/* ============================================================
   v0.9.14 — sekwencja kamery: zoom komody -> wysuniecie szuflady
   -> nachylenie obserwatora do wnetrza -> dno przechodzi w sekcje.
   Nadpisuje tylko koncowe timingi/geometry v0.9.12-0.9.13.
   ============================================================ */

.click-stage {
  --camera-peek: 0;
}

.drawer-flow .cs-scene {
  perspective: clamp(700px, 78vw, 1340px);
  perspective-origin: 50% calc(18% + var(--camera-peek, 0) * 10%);
}

.cs-cabinet__unit {
  transform:
    translate(-50%, -50%)
    translate3d(var(--cabinet-tx, 0px), var(--cabinet-ty, 0px), 0)
    scale(var(--cabinet-scale, 1))
    rotateX(calc(var(--camera-peek, 0) * -10deg));
  transform-style: preserve-3d;
  will-change: transform;
}

.cs-cabinet__drawer.is-target {
  transform:
    translateY(calc(var(--target-open, 0) * -10px + var(--camera-peek, 0) * -18px))
    scale(calc(1 + var(--target-open, 0) * 0.025 + var(--camera-peek, 0) * 0.02));
}

.cs-cabinet__drawer.is-target::before {
  border-color: rgba(243, 214, 156, calc(0.2 + var(--camera-peek, 0) * 0.16));
  opacity: calc(var(--target-open, 0) * (1 - var(--section-floor, 0) * 0.78));
  transform:
    translateY(calc(var(--target-open, 0) * -28px + var(--camera-peek, 0) * -34px))
    scaleX(calc(1 + var(--camera-peek, 0) * 0.14))
    scaleY(calc(0.24 + var(--target-open, 0) * 0.78 + var(--camera-peek, 0) * 0.44));
}

.cs-cabinet__drawer.is-target::after {
  opacity: calc(var(--camera-peek, 0) * (1 - var(--section-floor, 0) * 0.8));
}

.cs-cabinet__drawer.is-target .cs-cabinet__front {
  transform:
    translateY(calc(var(--target-open, 0) * 104px + var(--camera-peek, 0) * 16px))
    translateZ(calc(var(--target-open, 0) * 34px - var(--camera-peek, 0) * 74px))
    rotateX(calc(var(--camera-peek, 0) * -7deg))
    scale(calc(1 + var(--target-open, 0) * 0.1 - var(--camera-peek, 0) * 0.08));
  opacity: calc(1 - var(--section-floor, 0) * 0.55);
}

.click-stage.is-playing .cs-cabinet__drawer:not(.is-target) .cs-cabinet__front {
  opacity: calc(1 - var(--target-open, 0) * 0.34 - var(--camera-peek, 0) * 0.44);
  filter:
    brightness(calc(1 - var(--target-open, 0) * 0.18 - var(--camera-peek, 0) * 0.34))
    blur(calc(var(--camera-peek, 0) * 1.2px));
}

.drawer-flow .dkx {
  z-index: 10;
  opacity: clamp(0, min(calc((var(--camera-peek, 0) - 0.04) * 1.55), calc(1 - var(--section-floor, 0) * 0.06)), 1);
  transform-origin: 50% calc(18% + var(--camera-peek, 0) * 24%);
  transform:
    translateY(calc((1 - var(--camera-peek, 0)) * 16vh - var(--section-floor, 0) * 5vh))
    translateZ(calc((1 - var(--camera-peek, 0)) * -280px))
    rotateX(calc((1 - var(--camera-peek, 0)) * 62deg))
    scale(calc(0.48 + var(--camera-peek, 0) * 0.88 + var(--section-floor, 0) * 0.96));
}

.drawer-flow .dkx::before {
  opacity: clamp(0, min(calc(var(--camera-peek, 0) * 1.28), calc((1 - var(--section-floor, 0)) * 1.36)), 0.96);
  transform: scale(calc(0.86 + var(--camera-peek, 0) * 0.12));
  transform-origin: 50% 34%;
}

.drawer-flow .dkx-papers {
  opacity: clamp(0, calc(var(--camera-peek, 0) - var(--section-floor, 0) * 0.88), 1);
}

.drawer-flow .dkx-papers span {
  top: 50%;
  opacity: clamp(0, min(calc(var(--camera-peek, 0) * 3.8), calc((1 - var(--section-floor, 0)) * 2.4)), 0.72);
  transform:
    translate(-50%, -50%)
    translate(calc(var(--px) * var(--camera-peek, 0) * 0.72), calc(var(--py) * var(--camera-peek, 0) * 0.72))
    rotate(calc(var(--rot) * var(--camera-peek, 0)))
    scale(calc(var(--sz) * 0.78));
}

.drawer-flow .dkx::after {
  background:
    radial-gradient(116% 92% at 50% 44%, var(--gate-bg, #11140f) 0 58%, rgba(17, 22, 20, 0.62) 72%, rgba(17, 22, 20, 0) 100%),
    radial-gradient(58% 40% at 50% 36%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 74%);
  opacity: var(--section-floor, 0);
  transform: scale(calc(0.64 + var(--section-floor, 0) * 0.56));
  transform-origin: 50% 44%;
}

.drawer-flow .cs-scene::after {
  opacity: calc((0.82 + var(--cabinet-opacity, 0) * 0.1) * (1 - var(--section-floor, 0)));
}

@media (max-width: 760px) {
  .cs-cabinet__drawer.is-target .cs-cabinet__front {
    transform:
      translateY(calc(var(--target-open, 0) * 82px + var(--camera-peek, 0) * 12px))
      translateZ(calc(var(--target-open, 0) * 24px - var(--camera-peek, 0) * 58px))
      rotateX(calc(var(--camera-peek, 0) * -6deg))
      scale(calc(1 + var(--target-open, 0) * 0.08 - var(--camera-peek, 0) * 0.06));
  }
}

/* ============================================================
   v0.9.15 — przyczepiony box szuflady: dno i scianki sa czescia
   docelowej szuflady, nie osobnym platem nad frontem.
   ============================================================ */

.cs-drawer-box {
  position: absolute;
  left: 10px;
  right: 10px;
  top: -58px;
  height: clamp(132px, 30vh, 260px);
  z-index: 2;
  pointer-events: none;
  opacity: calc(var(--target-open, 0) * (1 - var(--section-floor, 0) * 0.92));
  transform-origin: 50% 100%;
  transform:
    translateY(calc(var(--target-open, 0) * -10px + var(--camera-peek, 0) * -42px))
    scaleX(calc(0.94 + var(--camera-peek, 0) * 0.16))
    scaleY(calc(0.72 + var(--camera-peek, 0) * 0.38));
}

.cs-drawer-box > span {
  position: absolute;
  display: block;
  pointer-events: none;
}

.cs-drawer-box__floor {
  left: 3.5%;
  right: 3.5%;
  top: 20%;
  bottom: 0;
  z-index: 1;
  clip-path: polygon(13% 0, 87% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(78% 68% at 50% 48%, rgba(118, 77, 36, 0.7), rgba(32, 17, 6, 0.98) 72%),
    repeating-linear-gradient(92deg, rgba(151, 99, 48, 0.3) 0 4px, rgba(36, 19, 7, 0.3) 4px 13px),
    linear-gradient(180deg, #5e3c1c, #120803);
  box-shadow:
    inset 0 28px 54px rgba(0, 0, 0, 0.5),
    inset 0 -18px 42px rgba(0, 0, 0, 0.72);
  transform-origin: 50% 100%;
  transform:
    perspective(760px)
    rotateX(calc(60deg - var(--camera-peek, 0) * 34deg))
    translateY(calc(var(--camera-peek, 0) * 10px));
}

.cs-drawer-box__floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 94% at 50% 46%, var(--gate-bg, #11140f) 0 64%, rgba(17, 22, 20, 0.42) 78%, rgba(17, 22, 20, 0) 100%);
  opacity: calc(var(--section-floor, 0) * 0.96);
}

.cs-drawer-box__back {
  left: 14%;
  right: 14%;
  top: 0;
  height: 30%;
  z-index: 3;
  border-radius: 10px 10px 3px 3px;
  background:
    repeating-linear-gradient(92deg, rgba(151, 99, 48, 0.28) 0 4px, rgba(42, 22, 8, 0.28) 4px 13px),
    linear-gradient(180deg, #573617, #160904);
  box-shadow:
    inset 0 2px 0 rgba(243, 214, 156, 0.18),
    inset 0 -24px 42px rgba(0, 0, 0, 0.74);
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  opacity: calc(0.62 + var(--camera-peek, 0) * 0.28);
}

.cs-drawer-box__left,
.cs-drawer-box__right {
  top: 18%;
  bottom: 2%;
  z-index: 2;
  width: 19%;
  background:
    linear-gradient(90deg, rgba(180, 116, 55, 0.72), rgba(44, 22, 7, 0.94)),
    repeating-linear-gradient(92deg, rgba(151, 99, 48, 0.28) 0 4px, rgba(42, 22, 8, 0.28) 4px 13px);
  box-shadow:
    inset 0 2px 0 rgba(243, 214, 156, 0.16),
    inset 0 -30px 52px rgba(0, 0, 0, 0.64);
  opacity: calc(0.72 + var(--camera-peek, 0) * 0.2);
}

.cs-drawer-box__left {
  left: 0;
  clip-path: polygon(72% 0, 100% 0, 58% 100%, 0 100%);
}

.cs-drawer-box__right {
  right: 0;
  clip-path: polygon(0 0, 28% 0, 100% 100%, 42% 100%);
  transform: scaleX(-1);
}

.cs-cabinet__drawer.is-target::before {
  opacity: calc(var(--target-open, 0) * (1 - var(--section-floor, 0)) * 0.46);
}

.cs-cabinet__drawer.is-target .cs-cabinet__front {
  z-index: 6;
  transform:
    translateY(calc(var(--target-open, 0) * 118px + var(--camera-peek, 0) * 20px))
    translateZ(calc(var(--target-open, 0) * 38px - var(--camera-peek, 0) * 42px))
    rotateX(calc(var(--camera-peek, 0) * -5deg))
    scale(calc(1 + var(--target-open, 0) * 0.08 - var(--camera-peek, 0) * 0.05));
}

.drawer-flow .dkx {
  opacity: clamp(0, calc(var(--section-floor, 0) * 1.15), 0.96);
  transform:
    translateY(calc((1 - var(--section-floor, 0)) * 7vh))
    scale(calc(0.82 + var(--section-floor, 0) * 1.28));
}

.drawer-flow .dkx::before,
.drawer-flow .dkx-papers {
  opacity: 0;
}

.drawer-flow .dkx::after {
  background:
    radial-gradient(140% 116% at 50% 48%, var(--gate-bg, #11140f) 0 78%, var(--gate-bg, #11140f) 100%);
  opacity: var(--section-floor, 0);
  transform: scale(calc(0.92 + var(--section-floor, 0) * 0.16));
}

@media (max-width: 760px) {
  .cs-drawer-box {
    top: -44px;
    height: clamp(112px, 26vh, 210px);
  }

  .cs-cabinet__drawer.is-target .cs-cabinet__front {
    transform:
      translateY(calc(var(--target-open, 0) * 92px + var(--camera-peek, 0) * 16px))
      translateZ(calc(var(--target-open, 0) * 26px - var(--camera-peek, 0) * 32px))
      rotateX(calc(var(--camera-peek, 0) * -4deg))
      scale(calc(1 + var(--target-open, 0) * 0.06 - var(--camera-peek, 0) * 0.04));
  }
}

/* ============================================================
   v0.9.16 — scroll-scrub + jednolita bryla szuflady.
   Wnetrze jest jednym spojnym ksztaltem, a nie zestawem osobnych platow.
   ============================================================ */

.click-stage {
  --scrub-progress: 0;
}

.drawer-flow .click-stage {
  transition: none;
}

.cs-cabinet__drawer {
  isolation: isolate;
}

.cs-cabinet__drawer.is-target {
  transform:
    translateY(calc(var(--target-open, 0) * -4px + var(--camera-peek, 0) * -24px))
    scale(calc(1 + var(--target-open, 0) * 0.028 + var(--camera-peek, 0) * 0.032));
}

.cs-cabinet__drawer.is-target::before {
  inset: 9px 12px 8px;
  border-color: rgba(243, 214, 156, calc(0.14 + var(--target-open, 0) * 0.12));
  background:
    radial-gradient(ellipse at 50% 18%, rgba(244, 206, 134, 0.22), rgba(30, 14, 4, 0.92) 44%, rgba(4, 2, 0, 0.99) 82%),
    linear-gradient(180deg, #1d0d03, #050201);
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  opacity: calc(var(--target-open, 0) * (1 - var(--section-floor, 0)) * (1 - var(--camera-peek, 0) * 0.42));
  transform:
    translateY(calc(var(--target-open, 0) * 2px + var(--camera-peek, 0) * -12px))
    scaleY(calc(0.45 + var(--target-open, 0) * 0.52 + var(--camera-peek, 0) * 0.16));
}

.cs-cabinet__drawer.is-target::after {
  opacity: calc(var(--target-open, 0) * (1 - var(--section-floor, 0)) * 0.36);
}

.cs-drawer-box {
  left: 8px;
  right: 8px;
  top: 12px;
  height: clamp(128px, 26vh, 236px);
  z-index: 5;
  border-radius: 7px 7px 18px 18px;
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(88, 47, 18, 0.94) 0 13%, rgba(114, 68, 29, 0.2) 22%, rgba(114, 68, 29, 0.2) 78%, rgba(76, 39, 14, 0.96) 87% 100%),
    linear-gradient(180deg, rgba(70, 35, 12, 0.98) 0 18%, rgba(70, 35, 12, 0.1) 27%),
    radial-gradient(86% 72% at 50% 61%, rgba(142, 89, 42, 0.78), rgba(47, 24, 8, 0.98) 74%, rgba(20, 9, 2, 1) 100%),
    repeating-linear-gradient(92deg, rgba(170, 111, 55, 0.24) 0 4px, rgba(39, 20, 7, 0.22) 4px 14px),
    linear-gradient(180deg, #744922, #231006);
  box-shadow:
    inset 0 2px 0 rgba(244, 210, 151, 0.26),
    inset 0 -38px 72px rgba(0, 0, 0, 0.62),
    inset 34px 0 62px rgba(18, 8, 2, 0.5),
    inset -34px 0 62px rgba(18, 8, 2, 0.5),
    0 calc(var(--target-open, 0) * 20px) calc(var(--target-open, 0) * 44px) rgba(0, 0, 0, 0.5);
  opacity: calc(var(--target-open, 0) * (1 - var(--section-floor, 0) * 0.94));
  transform-origin: 50% 6%;
  transform:
    translateY(calc(var(--target-open, 0) * 44px + var(--camera-peek, 0) * -36px))
    scaleX(calc(0.78 + var(--target-open, 0) * 0.18 + var(--camera-peek, 0) * 0.24))
    scaleY(calc(0.56 + var(--target-open, 0) * 0.34 + var(--camera-peek, 0) * 0.18));
}

.cs-drawer-box > span {
  display: none;
}

.cs-drawer-box::before,
.cs-drawer-box::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cs-drawer-box::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(244, 210, 151, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 13%, rgba(0, 0, 0, 0) 87%, rgba(244, 210, 151, 0.12) calc(100% - 1px), rgba(244, 210, 151, 0.12) 100%),
    linear-gradient(180deg, rgba(244, 210, 151, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 100%),
    radial-gradient(90% 46% at 50% 10%, rgba(251, 219, 151, 0.2), rgba(251, 219, 151, 0) 62%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.26) 0 13%, rgba(0, 0, 0, 0) 24% 76%, rgba(0, 0, 0, 0.3) 87% 100%);
  opacity: calc(0.82 + var(--camera-peek, 0) * 0.12);
}

.cs-drawer-box::after {
  z-index: 2;
  background:
    radial-gradient(112% 86% at 50% 56%, var(--gate-bg, #11140f) 0 68%, rgba(17, 22, 20, 0.5) 84%, rgba(17, 22, 20, 0) 100%);
  opacity: calc(var(--section-floor, 0) * 0.94);
}

.cs-cabinet__drawer.is-target .cs-cabinet__front {
  z-index: 8;
  transform:
    translateY(calc(var(--target-open, 0) * 134px + var(--camera-peek, 0) * 38px))
    translateZ(calc(var(--target-open, 0) * 34px - var(--camera-peek, 0) * 58px))
    scale(calc(1 + var(--target-open, 0) * 0.072 - var(--camera-peek, 0) * 0.035));
  opacity: calc(1 - var(--section-floor, 0) * 0.7);
}

.drawer-flow .dkx {
  opacity: clamp(0, calc(var(--section-floor, 0) * 1.08), 0.98);
  transform:
    translateY(calc((1 - var(--section-floor, 0)) * 5vh))
    scale(calc(0.84 + var(--section-floor, 0) * 1.18));
}

.drawer-flow .dkx::before,
.drawer-flow .dkx-papers {
  opacity: 0;
}

.drawer-flow .dkx::after {
  background:
    radial-gradient(140% 116% at 50% 48%, var(--gate-bg, #11140f) 0 80%, var(--gate-bg, #11140f) 100%);
  opacity: var(--section-floor, 0);
  transform: scale(calc(0.9 + var(--section-floor, 0) * 0.16));
}

@media (max-width: 760px) {
  .cs-drawer-box {
    top: 10px;
    height: clamp(110px, 24vh, 194px);
    transform:
      translateY(calc(var(--target-open, 0) * 34px + var(--camera-peek, 0) * -28px))
      scaleX(calc(0.78 + var(--target-open, 0) * 0.17 + var(--camera-peek, 0) * 0.22))
      scaleY(calc(0.58 + var(--target-open, 0) * 0.3 + var(--camera-peek, 0) * 0.14));
  }

  .cs-cabinet__drawer.is-target .cs-cabinet__front {
    transform:
      translateY(calc(var(--target-open, 0) * 102px + var(--camera-peek, 0) * 30px))
      translateZ(calc(var(--target-open, 0) * 24px - var(--camera-peek, 0) * 44px))
      scale(calc(1 + var(--target-open, 0) * 0.058 - var(--camera-peek, 0) * 0.03));
  }
}

/* ============================================================
   v0.9.17 — nieruchoma wneka + jedna wysuwana bryla 3D.
   .cs-cabinet__drawer zostaje slotem w komodzie; porusza sie tylko
   .cs-drawer-assembly, czyli wspolny korpus szuflady z frontem.
   ============================================================ */

.cs-cabinet__drawer {
  transform: none;
  transform-style: preserve-3d;
}

.cs-cabinet__drawer.is-target {
  transform: none;
  filter: brightness(calc(1 + var(--target-open, 0) * 0.1));
}

.cs-cabinet__drawer.is-target::before {
  inset: 8px 12px;
  border: 1px solid rgba(243, 214, 156, calc(0.16 + var(--target-open, 0) * 0.14));
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 16%, rgba(241, 199, 123, 0.22), rgba(18, 8, 2, 0.96) 54%, rgba(4, 1, 0, 1) 86%),
    linear-gradient(180deg, #1c0b03, #050201);
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  opacity: calc(var(--target-open, 0) * (1 - var(--section-floor, 0)) * 0.94);
  transform: scaleY(calc(0.42 + var(--target-open, 0) * 0.5));
  transform-origin: 50% 50%;
}

.cs-drawer-assembly {
  position: absolute;
  inset: 0;
  z-index: 5;
  min-height: inherit;
  pointer-events: none;
  transform-style: preserve-3d;
  transform-origin: 50% 12%;
}

.cs-cabinet__drawer.is-target .cs-drawer-assembly {
  z-index: 9;
  transform:
    translateY(calc(var(--target-open, 0) * 118px + var(--camera-peek, 0) * 28px))
    translateZ(calc(var(--target-open, 0) * 34px - var(--camera-peek, 0) * 26px))
    rotateX(calc(var(--camera-peek, 0) * -18deg))
    scale(calc(1 + var(--target-open, 0) * 0.07 - var(--camera-peek, 0) * 0.02));
}

.cs-drawer-box {
  left: 7px;
  right: 7px;
  top: calc(-1 * clamp(124px, 25vh, 230px));
  height: clamp(124px, 25vh, 230px);
  z-index: 6;
  overflow: visible;
  border-radius: 10px 10px 4px 4px;
  clip-path: none;
  background: none;
  box-shadow: none;
  opacity: 0;
  transform-origin: 50% 100%;
  transform:
    translateY(calc(var(--target-open, 0) * 8px + var(--camera-peek, 0) * -12px))
    rotateX(calc(58deg - var(--camera-peek, 0) * 30deg))
    scaleX(calc(0.92 + var(--camera-peek, 0) * 0.12))
    scaleY(calc(0.9 + var(--camera-peek, 0) * 0.1));
}

.cs-cabinet__drawer.is-target .cs-drawer-box {
  opacity: calc(var(--target-open, 0) * (1 - var(--section-floor, 0) * 0.96));
}

.cs-drawer-box > span {
  position: absolute;
  display: block;
  pointer-events: none;
}

.cs-drawer-box::before {
  display: none;
}

.cs-drawer-box::after {
  content: "";
  position: absolute;
  inset: 18% 5% 0;
  z-index: 8;
  border-radius: 8px 8px 18px 18px;
  background:
    radial-gradient(116% 86% at 50% 56%, var(--gate-bg, #11140f) 0 68%, rgba(17, 22, 20, 0.48) 84%, rgba(17, 22, 20, 0) 100%);
  opacity: calc(var(--section-floor, 0) * 0.96);
}

.cs-drawer-box__floor {
  left: 7%;
  right: 7%;
  top: 24%;
  bottom: 0;
  z-index: 3;
  border-radius: 8px 8px 18px 18px;
  clip-path: polygon(13% 0, 87% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(80% 70% at 50% 54%, rgba(156, 96, 43, 0.82), rgba(56, 27, 8, 0.98) 72%, rgba(18, 8, 2, 1) 100%),
    repeating-linear-gradient(92deg, rgba(184, 119, 55, 0.25) 0 4px, rgba(42, 21, 7, 0.24) 4px 13px),
    linear-gradient(180deg, #71461d, #1e0d04);
  box-shadow:
    inset 0 4px 0 rgba(245, 213, 152, 0.14),
    inset 0 -34px 62px rgba(0, 0, 0, 0.66),
    inset 28px 0 54px rgba(0, 0, 0, 0.32),
    inset -28px 0 54px rgba(0, 0, 0, 0.32);
}

.cs-drawer-box__back {
  left: 18%;
  right: 18%;
  top: 0;
  height: 28%;
  z-index: 5;
  border-radius: 9px 9px 3px 3px;
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(238, 196, 126, 0.16), rgba(0, 0, 0, 0)),
    repeating-linear-gradient(92deg, rgba(174, 111, 52, 0.2) 0 4px, rgba(43, 22, 7, 0.22) 4px 13px),
    linear-gradient(180deg, #5f3716, #160803);
  box-shadow:
    inset 0 2px 0 rgba(243, 214, 156, 0.2),
    inset 0 -24px 38px rgba(0, 0, 0, 0.72);
}

.cs-drawer-box__left,
.cs-drawer-box__right {
  top: 12%;
  bottom: 1%;
  width: 23%;
  z-index: 4;
  background:
    linear-gradient(180deg, rgba(243, 199, 126, 0.16), rgba(0, 0, 0, 0)),
    repeating-linear-gradient(92deg, rgba(174, 111, 52, 0.2) 0 4px, rgba(43, 22, 7, 0.18) 4px 13px),
    linear-gradient(90deg, #7a481e, #281105);
  box-shadow:
    inset 0 2px 0 rgba(243, 214, 156, 0.16),
    inset 0 -30px 52px rgba(0, 0, 0, 0.58);
}

.cs-drawer-box__left {
  left: 0;
  clip-path: polygon(64% 0, 100% 0, 58% 100%, 0 100%);
}

.cs-drawer-box__right {
  right: 0;
  clip-path: polygon(0 0, 36% 0, 100% 100%, 42% 100%);
  transform: scaleX(-1);
}

.cs-cabinet__drawer.is-target .cs-cabinet__front {
  z-index: 10;
  transform:
    translateZ(32px)
    rotateX(calc(var(--camera-peek, 0) * -9deg));
  opacity: calc(1 - var(--section-floor, 0) * 0.72);
  filter: brightness(calc(1 + var(--target-open, 0) * 0.08 - var(--camera-peek, 0) * 0.04));
}

.click-stage.is-playing .cs-cabinet__drawer:not(.is-target) .cs-drawer-assembly {
  opacity: calc(1 - var(--target-open, 0) * 0.3 - var(--camera-peek, 0) * 0.42);
  filter:
    brightness(calc(1 - var(--target-open, 0) * 0.14 - var(--camera-peek, 0) * 0.22))
    blur(calc(var(--camera-peek, 0) * 0.9px));
}

@media (max-width: 760px) {
  .cs-cabinet__drawer.is-target .cs-drawer-assembly {
    transform:
      translateY(calc(var(--target-open, 0) * 94px + var(--camera-peek, 0) * 22px))
      translateZ(calc(var(--target-open, 0) * 24px - var(--camera-peek, 0) * 20px))
      rotateX(calc(var(--camera-peek, 0) * -16deg))
      scale(calc(1 + var(--target-open, 0) * 0.06 - var(--camera-peek, 0) * 0.018));
  }

  .cs-drawer-box {
    top: calc(-1 * clamp(104px, 22vh, 188px));
    height: clamp(104px, 22vh, 188px);
  }
}

/* ============================================================
   v0.9.18 — porzadkowanie bryly po przebudowie: sciany nie dziedzicza
   starych transformacji i tworza nizsza, spojna kasete.
   ============================================================ */

.cs-drawer-box {
  top: clamp(-176px, -18vh, -104px);
  height: clamp(112px, 22vh, 204px);
  transform:
    translateY(calc(var(--target-open, 0) * 14px + var(--camera-peek, 0) * -8px))
    rotateX(calc(48deg - var(--camera-peek, 0) * 18deg))
    scaleX(calc(0.86 + var(--camera-peek, 0) * 0.1))
    scaleY(calc(0.92 + var(--camera-peek, 0) * 0.06));
}

.cs-drawer-box__floor,
.cs-drawer-box__back,
.cs-drawer-box__left,
.cs-drawer-box__right {
  opacity: 1;
  transform: none;
}

.cs-drawer-box__floor {
  left: 8%;
  right: 8%;
  top: 30%;
  bottom: 0;
  z-index: 3;
  transform: none;
}

.cs-drawer-box__back {
  left: 19%;
  right: 19%;
  top: 8%;
  height: 25%;
  z-index: 5;
  opacity: 0.92;
}

.cs-drawer-box__left,
.cs-drawer-box__right {
  top: 24%;
  bottom: 0;
  width: 17%;
  z-index: 4;
  opacity: 0.96;
}

.cs-drawer-box__left {
  clip-path: polygon(72% 0, 100% 0, 58% 100%, 6% 100%);
}

.cs-drawer-box__right {
  clip-path: polygon(0 0, 28% 0, 94% 100%, 42% 100%);
  transform: scaleX(-1);
}

.cs-cabinet__drawer.is-target .cs-drawer-assembly {
  transform:
    translateY(calc(var(--target-open, 0) * 112px + var(--camera-peek, 0) * 24px))
    translateZ(calc(var(--target-open, 0) * 32px - var(--camera-peek, 0) * 24px))
    rotateX(calc(var(--camera-peek, 0) * -20deg))
    scale(calc(1 + var(--target-open, 0) * 0.064 - var(--camera-peek, 0) * 0.018));
}

.cs-cabinet__drawer.is-target .cs-cabinet__front {
  transform:
    translateZ(30px)
    rotateX(calc(var(--camera-peek, 0) * -12deg));
}

@media (max-width: 760px) {
  .cs-drawer-box {
    top: clamp(-144px, -16vh, -92px);
    height: clamp(96px, 20vh, 172px);
  }

  .cs-cabinet__drawer.is-target .cs-drawer-assembly {
    transform:
      translateY(calc(var(--target-open, 0) * 90px + var(--camera-peek, 0) * 20px))
      translateZ(calc(var(--target-open, 0) * 24px - var(--camera-peek, 0) * 18px))
      rotateX(calc(var(--camera-peek, 0) * -18deg))
      scale(calc(1 + var(--target-open, 0) * 0.055 - var(--camera-peek, 0) * 0.016));
  }
}

/* ============================================================
   v0.9.19 — front szuflady takze podlega zmianie perspektywy.
   ============================================================ */

.cs-cabinet__drawer.is-target .cs-cabinet__front {
  transform-origin: 50% 0;
  transform:
    translateZ(30px)
    rotateX(calc(var(--camera-peek, 0) * -18deg))
    scaleY(calc(1 - var(--camera-peek, 0) * 0.08));
  clip-path: polygon(
    calc(var(--camera-peek, 0) * 3.2%) 0,
    calc(100% - var(--camera-peek, 0) * 3.2%) 0,
    100% 100%,
    0 100%
  );
  box-shadow:
    inset 0 2px 0 rgba(243, 214, 156, calc(0.5 + var(--target-open, 0) * 0.14)),
    inset 0 -10px 18px rgba(0, 0, 0, calc(0.48 + var(--camera-peek, 0) * 0.18)),
    0 calc(12px + var(--target-open, 0) * 24px) calc(24px + var(--camera-peek, 0) * 28px) rgba(0, 0, 0, 0.62);
}

/* ============================================================
   v0.9.20 — szeroka, spojna kaseta + maskowanie gorna belka wneki.
   ============================================================ */

.cs-cabinet__drawer.is-target {
  overflow: visible;
}

.cs-cabinet__drawer.is-target::before {
  z-index: 1;
  inset: 7px 10px;
  opacity: calc(var(--target-open, 0) * (1 - var(--section-floor, 0)) * 0.9);
}

.cs-cabinet__drawer.is-target::after {
  z-index: 12;
  inset: 0 0 auto;
  height: calc(18px + var(--camera-peek, 0) * 22px);
  border-radius: 8px 8px 3px 3px;
  background:
    linear-gradient(180deg, rgba(250, 218, 154, 0.24), rgba(250, 218, 154, 0.08) 22%, rgba(0, 0, 0, 0) 24%),
    repeating-linear-gradient(90deg, rgba(30, 15, 5, 0.12) 0 3px, rgba(30, 15, 5, 0) 3px 13px),
    linear-gradient(180deg, #7c5128 0%, #4b2b10 62%, #1b0c03 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 231, 176, 0.4),
    inset 0 -10px 18px rgba(0, 0, 0, 0.52),
    0 10px 24px rgba(0, 0, 0, 0.46);
  opacity: calc(var(--target-open, 0) * (1 - var(--section-floor, 0)) * 0.98);
  pointer-events: none;
}

.cs-cabinet__drawer.is-target .cs-drawer-assembly {
  transform:
    translateY(calc(var(--target-open, 0) * 112px + var(--camera-peek, 0) * 22px))
    translateZ(calc(var(--target-open, 0) * 32px - var(--camera-peek, 0) * 22px))
    rotateX(calc(var(--camera-peek, 0) * -20deg))
    scale(calc(1 + var(--target-open, 0) * 0.056 - var(--camera-peek, 0) * 0.014));
}

.cs-drawer-box {
  left: -3%;
  right: -3%;
  top: clamp(-168px, -17vh, -100px);
  height: clamp(110px, 21vh, 194px);
  transform:
    translateY(calc(var(--target-open, 0) * 12px + var(--camera-peek, 0) * -8px))
    rotateX(calc(46deg - var(--camera-peek, 0) * 17deg))
    scaleX(calc(0.98 + var(--camera-peek, 0) * 0.04))
    scaleY(calc(0.94 + var(--camera-peek, 0) * 0.04));
}

.cs-drawer-box::after {
  inset: 28% 6% 0;
  z-index: 9;
  border-radius: 3px 3px 16px 16px;
}

.cs-drawer-box__floor {
  left: 4.5%;
  right: 4.5%;
  top: 30%;
  bottom: 0;
  z-index: 3;
  border-radius: 2px 2px 16px 16px;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}

.cs-drawer-box__back {
  left: 12%;
  right: 12%;
  top: 9%;
  height: 23%;
  z-index: 5;
  border-radius: 4px 4px 2px 2px;
  clip-path: none;
  transform: none;
  opacity: 0.88;
}

.cs-drawer-box__left,
.cs-drawer-box__right {
  top: 25%;
  bottom: 0;
  width: 13.5%;
  z-index: 6;
  opacity: 0.95;
  transform: none;
  background:
    linear-gradient(180deg, rgba(243, 199, 126, 0.18), rgba(0, 0, 0, 0)),
    repeating-linear-gradient(92deg, rgba(174, 111, 52, 0.2) 0 4px, rgba(43, 22, 7, 0.18) 4px 13px),
    linear-gradient(90deg, #7d4a20, #331606);
}

.cs-drawer-box__left {
  left: 0;
  clip-path: polygon(68% 0, 100% 0, 96% 100%, 0 100%);
}

.cs-drawer-box__right {
  right: 0;
  clip-path: polygon(0 0, 32% 0, 100% 100%, 4% 100%);
}

.cs-cabinet__drawer.is-target .cs-cabinet__front {
  z-index: 11;
  transform:
    translateZ(32px)
    rotateX(calc(var(--camera-peek, 0) * -18deg))
    scaleY(calc(1 - var(--camera-peek, 0) * 0.08));
}

@media (max-width: 760px) {
  .cs-drawer-box {
    left: -2%;
    right: -2%;
    top: clamp(-136px, -15vh, -88px);
    height: clamp(92px, 19vh, 162px);
  }

  .cs-cabinet__drawer.is-target .cs-drawer-assembly {
    transform:
      translateY(calc(var(--target-open, 0) * 90px + var(--camera-peek, 0) * 18px))
      translateZ(calc(var(--target-open, 0) * 24px - var(--camera-peek, 0) * 18px))
      rotateX(calc(var(--camera-peek, 0) * -18deg))
      scale(calc(1 + var(--target-open, 0) * 0.05 - var(--camera-peek, 0) * 0.012));
  }
}

/* ============================================================
   v0.9.21 — subtelniejsza maska gornej krawedzi wneki.
   ============================================================ */

.cs-cabinet__drawer.is-target::after {
  height: calc(10px + var(--camera-peek, 0) * 12px);
  background:
    linear-gradient(180deg, rgba(250, 218, 154, 0.22), rgba(250, 218, 154, 0.06) 28%, rgba(0, 0, 0, 0) 32%),
    repeating-linear-gradient(90deg, rgba(30, 15, 5, 0.12) 0 3px, rgba(30, 15, 5, 0) 3px 13px),
    linear-gradient(180deg, #80542a 0%, #543214 58%, #201005 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 231, 176, 0.42),
    inset 0 -7px 12px rgba(0, 0, 0, 0.46),
    0 7px 18px rgba(0, 0, 0, 0.42);
}

/* ============================================================
   v0.9.22 (Claude) — SPÓJNA BRYŁA WNĘTRZA: 4 ściany jako kafle
   dzielące JEDEN prostokąt dna (--il/--ir/--it = lewy/prawy/górny
   wierzchołek wnętrza). Ściany stykają się na wspólnych krawędziach,
   tył ma szerokość dna. Eliminuje rozjazd tył<->boki i wąski tył.
   ============================================================ */

.cs-drawer-box {
  /* wierzchołki wnętrza (dna) w % bryły; --it = krawędź TYLNA (dalej) */
  --il: 13%;
  --ir: 87%;
  --it: 21%;
}

/* wszystkie ściany na pełnej powierzchni bryły, przycięte do swojego kafla */
.cs-drawer-box__floor,
.cs-drawer-box__back,
.cs-drawer-box__left,
.cs-drawer-box__right {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  border-radius: 0;
  opacity: 1;
}

/* TYŁ — od górnej krawędzi otworu do tylnej krawędzi dna (szerokość dna) */
.cs-drawer-box__back {
  z-index: 4;
  /* +0.4% zakładki na krawędziach, by nie było szczelin sub-pikselowych */
  clip-path: polygon(-0.5% -0.5%, 100.5% -0.5%, calc(var(--ir) + 0.4%) calc(var(--it) + 0.4%), calc(var(--il) - 0.4%) calc(var(--it) + 0.4%));
  background:
    linear-gradient(180deg, rgba(238, 196, 126, 0.14), rgba(0, 0, 0, 0)),
    repeating-linear-gradient(92deg, rgba(150, 96, 45, 0.16) 0 4px, rgba(36, 18, 6, 0.2) 4px 14px),
    linear-gradient(180deg, #4d2c11 0%, #140702 100%);
  box-shadow: inset 0 -22px 40px rgba(0, 0, 0, 0.66), inset 0 2px 0 rgba(243, 214, 156, 0.16);
}

/* LEWA — od lewej krawędzi otworu do lewej krawędzi dna */
.cs-drawer-box__left {
  z-index: 5;
  clip-path: polygon(-0.5% -0.5%, calc(var(--il) + 0.4%) calc(var(--it) - 0.4%), calc(var(--il) + 0.4%) 100.5%, -0.5% 100.5%);
  background:
    linear-gradient(255deg, rgba(243, 199, 126, 0.16), rgba(0, 0, 0, 0)),
    repeating-linear-gradient(2deg, rgba(150, 96, 45, 0.14) 0 5px, rgba(36, 18, 6, 0.18) 5px 15px),
    linear-gradient(100deg, #6f4019 0%, #20100553 60%, #1c0c04 100%);
  box-shadow: inset -26px 0 46px rgba(0, 0, 0, 0.5);
}

/* PRAWA — lustrzanie */
.cs-drawer-box__right {
  z-index: 5;
  clip-path: polygon(100.5% -0.5%, calc(var(--ir) - 0.4%) calc(var(--it) - 0.4%), calc(var(--ir) - 0.4%) 100.5%, 100.5% 100.5%);
  background:
    linear-gradient(105deg, rgba(243, 199, 126, 0.16), rgba(0, 0, 0, 0)),
    repeating-linear-gradient(-2deg, rgba(150, 96, 45, 0.14) 0 5px, rgba(36, 18, 6, 0.18) 5px 15px),
    linear-gradient(260deg, #6f4019 0%, #20100553 60%, #1c0c04 100%);
  box-shadow: inset 26px 0 46px rgba(0, 0, 0, 0.5);
  transform: none;
}

/* DNO — dokładnie prostokąt wnętrza [il..ir] x [it..dół] */
.cs-drawer-box__floor {
  z-index: 3;
  inset: var(--it) calc(100% - var(--ir)) 0 var(--il);
  clip-path: none;
  border-radius: 0 0 14px 14px;
  background:
    radial-gradient(82% 78% at 50% 60%, rgba(168, 104, 47, 0.8), rgba(54, 26, 8, 0.98) 74%, rgba(16, 7, 2, 1) 100%),
    repeating-linear-gradient(92deg, rgba(184, 119, 55, 0.22) 0 5px, rgba(40, 20, 7, 0.22) 5px 15px),
    linear-gradient(180deg, #6b421b, #160a03);
  box-shadow:
    inset 0 6px 14px rgba(0, 0, 0, 0.5),
    inset 0 -10px 22px rgba(0, 0, 0, 0.5);
}

/* nakładka koloru sekcji na DNO (zamiast wcześniejszego owalu na całej bryle) */
.cs-drawer-box::after {
  inset: var(--it) calc(100% - var(--ir)) 0 var(--il);
  z-index: 7;
  border-radius: 0 0 14px 14px;
  background:
    radial-gradient(120% 96% at 50% 60%, var(--gate-bg, #11140f) 0 74%, rgba(17, 22, 20, 0.4) 90%, rgba(17, 22, 20, 0) 100%);
  opacity: calc(var(--section-floor, 0) * 0.98);
}



/* ============================================================
   v0.9.28 (Claude) — REALNA SCENA 3D PRZEJŚCIA (zastępuje zepsuty dkx).
   Czysty kontekst: .d3-stage[perspective] > .d3-cam[preserve-3d] >
   .d3-box[preserve-3d] > ściany. Sterowana --d3p (kamera) i --d3o (crossfade).
   Komoda (cs-cabinet) zostaje jako wejście-zoom; tu przejmujemy zaglądanie 3D.
   ============================================================ */

.drawer-flow .dkx { display: none; }   /* stary, płaski scene off */

.d3-stage {
  position: absolute;
  inset: 0;
  z-index: 14;
  /* STAŁA perspektywa (nie 95vw) → naturalna szerokość frontu 3D jest niezależna od
     okna (1639px); o wypełnieniu szerokości decyduje --d3fill (scale boksu) z JS. */
  perspective: 1368px;
  perspective-origin: 50% 50%;
  overflow: hidden;
  opacity: var(--d3o, 0);
  pointer-events: none;
  background: transparent;
}
/* ciemne tło bryły TYLKO podczas zaglądania (--d3look), NIE przy crossfadzie z komodą.
   Inaczej przy wracaniu (backward) półprzezroczyste ciemne tło przysłaniało front
   szuflady komody na moment = mignięcie. (Claude v0.9.59) */
.d3-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;   /* ZA bryłą 3D (.d3-cam) — inaczej przykrywało dno/wnętrze */
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 28%, #2a1a0c, #0c0703 80%);
  opacity: var(--d3look, 0);
}

.d3-cam {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
  /* v0.9.53 (Claude): pochylenie do -90° (widok pionowo w dół na dno) sterowane
     --d3look; potem --d3dive nurkuje w dno (translateZ skalowane --d3fill, by na
     każdym ekranie dno wypełniło okno). */
  transform:
    translateZ(calc(var(--d3look, 0) * 170px + var(--d3dive, 0) * 360px * var(--d3fill, 1)))
    rotateX(calc(var(--d3look, 0) * -82deg));
}

.d3-box {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  /* skala względna do okna: front 3D wypełnia tę samą szerokość co front komody */
  transform: scale(var(--d3fill, 1));
}

.d3-box > span {
  position: absolute;
  left: 50%; top: 50%;
  display: block;
  backface-visibility: visible;
}

/* DREWNO ILUSTRACYJNE (Claude v0.9.68): porzucony szum/3d-gradienty (wyglądały jak
   płyta wiórowa / grafika z gier sprzed 25 lat). Teraz każda ściana = rysowana ilustracja
   słoja (SVG: płynne linie + figura katedralna), rozciągana 100%×100% na lico. Pliki w
   assets/img/wood-*.svg generuje woodgen.mjs. Front 3D i front komody używają TEGO SAMEGO
   wood-front.svg (ten sam aspekt ~5.67:1) → spójność na styku komoda↔szuflada. */

/* W=1100 H=194 DEP=900 ; hw=550 hh=97 hd=450
   H dobrane tak, by proporcje frontu 3D (~5.67:1) zgadzały się z frontem szuflady
   w widoku komody (~5.69:1) — koniec "rośnięcia" frontu przy zaglądaniu (Claude). */
.d3-back {
  width: 1100px; height: 194px; margin: -97px 0 0 -550px;
  transform: translateZ(-450px);
  /* wnętrze (ciemniejsza ilustracja słoja) — ta sama gama, niższy poziom światła */
  background: url('assets/img/wood-back.svg') 0 0 / 100% 100% no-repeat;
  box-shadow: inset 0 -26px 50px rgba(0,0,0,0.5), inset 0 3px 0 rgba(243,214,156,0.16);
}
.d3-front {
  width: 1100px; height: 194px; margin: -97px 0 0 -550px;
  display: grid; place-items: center;
  /* sztywna pionowa ściana: boczne (krótkie) krawędzie zostają na przednich
     krótkich krawędziach boków; odsłonięcie wnętrza = ruch kamery + zanik frontu */
  transform: translateZ(450px);
  /* drewno ILUSTRACYJNE: ten sam plik co front komody → idealna spójność na styku
     komoda↔3D (oba rozciągają tę samą ilustrację, ten sam aspekt ~5.67:1) (Claude v0.9.68) */
  background: url('assets/img/wood-front.svg') 0 0 / 100% 100% no-repeat;
  box-shadow: inset 0 3px 0 rgba(243,214,156,0.42), 0 24px 50px rgba(0,0,0,0.5);
  /* ŚCIANA frontu zostaje widoczna przez całe zaglądanie (jej wewnętrzna strona widać
     w widoku z góry); znika dopiero przy nurkowaniu w dno (--d3dive) */
  opacity: clamp(0, calc(1.05 - var(--d3dive,0) * 1.6), 1);
}
.d3-label {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 52px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  /* etykieta frontu (nazwa szuflady) gaśnie na początku zaglądania — zostaje sama
     ściana frontu; na dnie pojawia się nagłówek sekcji */
  opacity: clamp(0, calc(1.1 - var(--d3p,0) * 5), 1);
}
.d3-floor {
  width: 1100px; height: 900px; margin: -450px 0 0 -550px;
  transform: rotateX(90deg) translateZ(-97px);
  /* dno: ilustracja słoja biegnącego W GŁĄB (pionowo w pliku) + figura katedralna (Claude v0.9.68) */
  background: url('assets/img/wood-floor.svg') 0 0 / 100% 100% no-repeat;
}
.d3-floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gate-bg, #11140f);
  /* sekcja na dnie pojawia się JUŻ na początku zaglądania (d3p), nie dopiero na końcu */
  opacity: clamp(0, calc((var(--d3p, 0) - 0.02) / 0.12), 1);
}
/* dno = podgląd docelowej sekcji (nagłówek), widoczny przy ujęciu z góry; z-index 2
   nad kolorem sekcji (::after). Tekst „leży" na dnie, czytelny w widoku z góry. */
.d3-floor__card {
  position: absolute;
  left: 9%; right: 9%; top: 30%;
  z-index: 2;
  text-align: left;
  /* nagłówek widoczny JUŻ od początku zaglądania (d3p) — leży na dnie z naturalną
     perspektywą (scaleY niżej koryguje rozciągnięcie poziome od scale boksu) */
  opacity: clamp(0, calc((var(--d3p, 0) - 0.05) / 0.12), 1);
  /* dno (rotateX 90) jest rozciągane w poziomie przez scale(s,s,1) boksu, a głębia
     (oś z) NIE — przez co tekst był spłaszczony pionowo. scaleY(--d3fill) wyrównuje. */
  transform: scaleY(var(--d3fill, 1));
  transform-origin: 50% 0;
}
.d3-floor__eyebrow {
  display: block;
  font-size: 28px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.d3-floor__title {
  display: block;
  font-family: var(--serif);
  font-size: 96px;
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--card-ink, #f4ead6);
}
.d3-left {
  width: 900px; height: 194px; margin: -97px 0 0 -450px;
  transform: rotateY(-90deg) translateZ(550px);
  /* bok: deski poziome (biegną w głąb) — spójne ciemne drewno wnętrza (Claude v0.9.66) */
  /* bok: ilustracja słoja biegnącego w głąb (Claude v0.9.68) */
  background: url('assets/img/wood-side.svg') 0 0 / 100% 100% no-repeat;
  box-shadow: inset 0 -22px 44px rgba(0,0,0,0.42);
}
.d3-right {
  width: 900px; height: 194px; margin: -97px 0 0 -450px;
  /* bok prawy: ta sama ilustracja słoja (Claude v0.9.68) */
  transform: rotateY(90deg) translateZ(550px);
  background: url('assets/img/wood-side.svg') 0 0 / 100% 100% no-repeat;
  box-shadow: inset 0 -22px 44px rgba(0,0,0,0.42);
}

/* GRUBOŚĆ ścianek (Claude v0.9.66): górna krawędź każdej ściany to pozioma listwa
   („rant") grubości T — widoczna od góry jako grubość drewna. ::after na ścianie
   (preserve-3d), obrócona rotateX ±90° tak, by wychodziła do WNĘTRZA szuflady.
   Bevel SYMETRYCZNY (jasny grzbiet pośrodku) — front i tył wyglądają tak samo niezależnie
   od tego, którą stroną pseudo-elementu patrzymy (backface). Drugi pseudo (.d3-*::before)
   = górny kant na zewnętrznej ścianie + miękki cień (AO) pod rantem = mniej „surowo". */
.d3-back, .d3-front, .d3-left, .d3-right { transform-style: preserve-3d; }
.d3-back::after, .d3-front::after, .d3-left::after, .d3-right::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 28px;
  transform-origin: 50% 0;
  /* ilustracyjny kant cięcia drewna: płaski, ciepły, jasny grzbiet pośrodku (symetryczny —
     front pokazuje backface) + delikatne ciemniejsze krawędzie, bez szumu (Claude v0.9.68) */
  background: linear-gradient(180deg, #6f4a28 0%, #a9794a 28%, #8c613a 62%, #5e4125 100%);
  box-shadow: inset 0 1px 0 rgba(255,240,205,0.45), inset 0 -2px 6px rgba(0,0,0,0.42);
}
.d3-back::after  { transform: rotateX(90deg); }
.d3-front::after { transform: rotateX(-90deg); }
.d3-left::after  { transform: rotateX(-90deg); }
.d3-right::after { transform: rotateX(-90deg); }
/* boczne ranty wcięte o grubość T po obu końcach → nie nakładają się na rant przedni/tylny;
   narożniki spotykają się czystym stykiem (rama), zamiast podwójnej, „surowej" zakładki */
.d3-left::after, .d3-right::after { width: calc(100% - 60px); left: 30px; }
/* miękki cień pod rantem na wewnętrznej ścianie (ambient occlusion) — daje głębię styku */
.d3-back::before, .d3-front::before, .d3-left::before, .d3-right::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 22px;
  background: linear-gradient(180deg, rgba(0,0,0,0.34), rgba(0,0,0,0));
  pointer-events: none;
}

/* clean handoff: płaski kolor sekcji na sam koniec — domyka narożniki dna */
.d3-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: var(--gate-bg, #11140f);
  /* końcowe domknięcie do koloru sekcji DOPIERO po zanurkowaniu w dno (scrub 0.95→1) */
  opacity: clamp(0, calc((var(--scrub-progress, 0) - 0.95) / 0.05), 1);
}
/* etykieta: wyśrodkowana, nie szersza niż okno.
   UWAGA: front NIE może mieć overflow:hidden — to spłaszcza preserve-3d i przycina
   rant frontu (front był płaski, bez grubości). (Claude v0.9.66) */
.d3-front { overflow: visible; }
.d3-label { text-align: center; }

/* ============================================================
   v0.9.49 (Claude) — WNĘKA KOMODY nad szufladą.
   Górna część komody zostaje podczas zaglądania i zasłania górę wysuniętej
   szuflady (efekt: szuflada tkwi we wnęce). Płaska nakładka nad sceną 3D,
   pojawia się przy handoffie (--d3o) i zostaje przez całe zaglądanie.
   ============================================================ */
.d3-niche {
  position: absolute;
  inset: 0 0 auto 0;
  /* v0.9.51: WYRASTA wraz z perspektywą zaglądania (--d3p), nie wskakuje skokowo.
     Przy froncie na wprost (d3p=0) wysokość ~0; im głębiej kamera zagląda, tym
     więcej korpusu komody wchodzi w kadr od góry. Drewno = lico komody (słój w vw,
     żeby gęstość zgadzała się z frontem na ekranie). */
  height: calc(var(--d3p, 0) * 26%);
  z-index: 4;
  pointer-events: none;
  /* lico komody = ta sama ilustracja co fronty; stała wysokość tła (360px, kotwica u góry),
     żeby przy WYRASTANIU niszy słój się nie rozciągał w pionie (Claude v0.9.68) */
  background: url('assets/img/wood-front.svg') center top / 100% 360px no-repeat, #8f6539;
  box-shadow: inset 0 2px 0 rgba(243,214,156,0.30);
  /* wjazd: min(1, d3p*4) — płynnie z perspektywą; wyjazd: gaśnie razem z dnem,
     gdy wjeżdża sekcja (section-floor) */
  opacity: calc(min(1, var(--d3p, 0) * 4) * max(0, 1 - var(--section-floor, 0) * 1.7));
}
/* dolne lico komody nad szufladą (rozjaśniona krawędź) + cień wpadający w głąb */
.d3-niche__lip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10px;
  background: linear-gradient(180deg, rgba(243,214,156,0.34), rgba(120,80,38,0.1));
  box-shadow: 0 18px 30px rgba(6,3,1,0.62);
}
.d3-niche::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 64px;
  background: linear-gradient(180deg, rgba(6,3,1,0.55), rgba(6,3,1,0));
}

/* ============================================================
   v0.9.40 (Claude) — JEDEN spójny tytuł na froncie.
   Front komody (szuflada-target) i front bryły 3D pokazują tę samą nazwę
   sekcji, wyśrodkowaną i wersalikami (jak .d3-label). Komoda jest zoomowana
   na target (środek ekranu), więc tytuł zostaje w tym samym miejscu podczas
   crossfade komoda→3D — brak podwójnych nagłówków. Numer (cab-no) ukryty.
   ============================================================ */
.click-stage.is-playing .cs-cabinet__drawer.is-target .cs-cabinet__front {
  justify-content: center;
}
.click-stage.is-playing .cs-cabinet__drawer.is-target .cab-text {
  justify-content: center;
  width: 100%;
  font-size: calc(1.18rem * var(--fk, 1));   /* skaluje się z --fk (ostrość zoomu, v0.9.70) */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.click-stage.is-playing .cs-cabinet__drawer.is-target .cab-no {
  display: none;
}
/* uchwyt na froncie-targecie ukryty — inaczej flex centruje uchwyt+tekst razem i
   tytuł ucieka w prawo (~150px), nie pokrywając się z .d3-label przy crossfade. */
.click-stage.is-playing .cs-cabinet__drawer.is-target .cab-pull {
  display: none;
}

/* ============================================================
   v0.9.47 (Claude) — sąsiednie szuflady (nie-target) gasną PRZED crossfade,
   żeby do sceny 3D przechodził TYLKO jeden front (pełnoekranowy), a nie cała
   komoda. Inaczej blaknie cały „mebel" i komoda+szuflada wyglądają na odklejone.
   Gaśnięcie 0.27→0.40 (scrub), czyli zanim zacznie się handoff (0.40). ============ */
.click-stage.is-playing .cs-cabinet__drawer:not(.is-target) {
  opacity: clamp(0, calc((0.40 - var(--scrub-progress, 0)) / 0.13), 1);
}

/* ============================================================
   v0.9.71 (Claude) — Faza 0 planu: trzy karty modeli, formularz
   zgłoszenia w sekcji Kontakt, pas zapisu na checklistę (lead-band).
   ============================================================ */

.models {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cta-panel--form {
  grid-template-columns: minmax(0, 0.7fr) minmax(320px, 0.75fr);
  align-items: start;
}

.sz-form {
  display: grid;
  gap: 16px;
}

.sz-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sz-field {
  display: grid;
  gap: 6px;
}

.sz-field > span {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 241, 230, 0.66);
}

.sz-field > span em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}

.sz-field input,
.sz-field select,
.sz-field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--cream, #f7f1e6);
  background: rgba(247, 241, 230, 0.07);
  border: 1px solid rgba(247, 241, 230, 0.22);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.sz-field input::placeholder,
.sz-field textarea::placeholder {
  color: rgba(247, 241, 230, 0.38);
}

.sz-field input:focus-visible,
.sz-field select:focus-visible,
.sz-field textarea:focus-visible {
  border-color: rgba(208, 167, 90, 0.75);
  background: rgba(247, 241, 230, 0.1);
}

.sz-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(247, 241, 230, 0.6) 50%),
    linear-gradient(135deg, rgba(247, 241, 230, 0.6) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.sz-field select option {
  color: #1a1f1c;
  background: #f7f1e6;
}

.sz-field textarea {
  resize: vertical;
  min-height: 120px;
}

.sz-form__submit {
  justify-self: start;
}

.sz-form__note {
  font-size: 0.8rem;
  color: rgba(247, 241, 230, 0.55);
  margin: 0;
}

.sz-form__msg {
  margin: 0;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 0.92rem;
}

.sz-form__msg--ok {
  border: 1px solid rgba(126, 178, 138, 0.5);
  background: rgba(126, 178, 138, 0.12);
  color: #cde7d3;
}

.sz-form__msg--err {
  border: 1px solid rgba(196, 110, 110, 0.5);
  background: rgba(196, 110, 110, 0.12);
  color: #efccc7;
}

/* Honeypot: poza ekranem, niewidoczny dla ludzi, dostępny dla botów. */
.sz-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

.lead-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.65fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
  margin-top: clamp(28px, 5vw, 56px);
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid rgba(247, 241, 230, 0.14);
  background: rgba(247, 241, 230, 0.04);
}

.lead-band__copy h3 {
  font-family: "Fraunces", serif;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  margin: 0 0 8px;
}

.lead-band__copy p {
  margin: 0;
  color: rgba(247, 241, 230, 0.72);
  font-size: 0.95rem;
}

.lead-band__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lead-band__row .sz-field--bare {
  flex: 1 1 200px;
}

.lead-band__row .btn {
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .models {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .cta-panel--form {
    grid-template-columns: 1fr;
  }

  .sz-form__row {
    grid-template-columns: 1fr;
  }

  .lead-band {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   v0.9.73 (Claude) — porządek sekcji: 5 paneli-szuflad (test usunięty,
   modele+oferta razem, atelier+standard = "O nas") + lifting wizualny
   sekcji "Kto za tym stoi" (czytelne okładki, bez ucinania podpisów).
   ============================================================ */

.atelier-copy p {
  max-width: 560px;
}

.atelier-copy p + p {
  margin-top: 14px;
}

.book-stack {
  min-height: clamp(460px, 62vh, 620px);
}

.book-cover {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 22px 22px;
  border-radius: 5px;
  background-clip: padding-box;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(247, 241, 230, 0.14);
}

/* grzbiet książki: pionowa linia przy lewej krawędzi */
.book-cover::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 1px;
  background: linear-gradient(180deg, rgba(208, 167, 90, 0.55), rgba(208, 167, 90, 0.12));
}

.book-cover .cover-line {
  position: static;
  display: block;
  width: 46px;
  height: 2px;
  margin: 0 0 auto 12px;
  background: linear-gradient(90deg, rgba(208, 167, 90, 0.9), rgba(208, 167, 90, 0.2));
}

.book-cover .cover-label {
  position: static;
  inset: auto;
  margin-left: 12px;
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.6vw, 1.3rem);
  font-weight: 500;
  line-height: 1.25;
  color: rgba(247, 241, 230, 0.94);
}

.book-cover.one {
  inset: 0 4% auto auto;
  width: min(270px, 56%);
  aspect-ratio: 0.7;
  transform: rotate(4deg);
}

.book-cover.two {
  inset: 20% auto auto 0;
  width: min(255px, 53%);
  aspect-ratio: 0.7;
  transform: rotate(-7deg);
  background:
    linear-gradient(150deg, rgba(247, 241, 230, 0.16), rgba(17, 22, 20, 0.12)),
    var(--forest-2);
}

.book-cover.three {
  inset: auto 10% 0 auto;
  width: min(285px, 58%);
  aspect-ratio: 0.7;
  transform: rotate(-2deg);
  background:
    linear-gradient(150deg, rgba(208, 167, 90, 0.4), rgba(247, 241, 230, 0.05)),
    var(--ink-2);
}

.book-stack:hover .book-cover.one { transform: rotate(2deg) translateY(-10px); }
.book-stack:hover .book-cover.two { transform: rotate(-9deg) translateY(6px); }
.book-stack:hover .book-cover.three { transform: rotate(0deg) translateY(-6px); }

@media (max-width: 900px) {
  .book-stack {
    min-height: 420px;
  }
}

/* ============================================================
   v0.9.76 (Claude) — podstrony (regulamin, polityka prywatności):
   shell podstrony, typografia dokumentów, stopka z linkami prawnymi.
   ============================================================ */

.subpage-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #111614;
}

.subpage-main {
  flex: 1;
  padding: clamp(110px, 16vh, 170px) 0 clamp(56px, 8vh, 96px);
}

.container-narrow {
  width: min(820px, calc(100% - 48px));
  margin: 0 auto;
}

.legal-head h1 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 500;
  line-height: 1.04;
  color: var(--cream, #f7f1e6);
}

.legal-draft {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 12px;
  border: 1px solid rgba(208, 167, 90, 0.55);
  border-radius: 3px;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d0a75a;
}

.legal-meta {
  margin: 0 0 8px;
  font-size: 0.86rem;
  color: rgba(247, 241, 230, 0.5);
}

.legal-body {
  margin-top: 34px;
  color: rgba(247, 241, 230, 0.8);
  font-size: 1rem;
  line-height: 1.65;
}

.legal-body h2 {
  margin: 40px 0 14px;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 500;
  color: var(--cream, #f7f1e6);
}

.legal-body ol,
.legal-body ul {
  padding-left: 22px;
  margin: 0 0 16px;
}

.legal-body li {
  margin-bottom: 8px;
}

.legal-body li > ol {
  margin-top: 8px;
}

.legal-body a {
  color: #d0a75a;
  text-underline-offset: 3px;
}

.legal-body table {
  width: 100%;
  margin: 18px 0 22px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.legal-body th,
.legal-body td {
  padding: 10px 12px;
  border: 1px solid rgba(247, 241, 230, 0.18);
  text-align: left;
  vertical-align: top;
}

.legal-body th {
  background: rgba(247, 241, 230, 0.07);
  color: var(--cream, #f7f1e6);
  font-weight: 600;
}

.footer-legal {
  display: flex;
  gap: 18px;
}

.footer-legal a {
  color: rgba(247, 241, 230, 0.66);
  text-decoration: none;
}

.footer-legal a:hover {
  color: #d0a75a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 700px) {
  .legal-body table,
  .legal-body thead,
  .legal-body tbody,
  .legal-body tr,
  .legal-body th,
  .legal-body td {
    display: block;
  }

  .legal-body thead {
    display: none;
  }

  .legal-body tr {
    margin-bottom: 14px;
    border: 1px solid rgba(247, 241, 230, 0.18);
  }

  .legal-body td {
    border: 0;
    border-bottom: 1px solid rgba(247, 241, 230, 0.1);
  }
}

/* ============================================================
   v0.9.77 (Claude) — SKLEP-REGAŁ: półka z książkami frontem
   (okładka 5:8 ze zdjęcia wyróżniającego), hover = karta szczegółów.
   Markup gotowy pod przyszły widok grzbietów (.shelf--spines).
   ============================================================ */

.shop-hero {
  padding-bottom: clamp(28px, 5vh, 56px);
}

.shop-hero h1 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 500;
  line-height: 1.02;
  color: var(--cream, #f7f1e6);
}

.shop-lead {
  max-width: 560px;
  margin: 0;
  color: rgba(247, 241, 230, 0.74);
  font-size: 1.05rem;
}

.shelf-section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.shelf-wall {
  position: relative;
  padding: clamp(40px, 7vh, 80px) clamp(22px, 4vw, 56px) 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(208, 167, 90, 0.07), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, rgba(20, 14, 7, 0.5), rgba(13, 9, 5, 0.72));
  border: 1px solid rgba(208, 167, 90, 0.16);
  border-bottom: 0;
}

.shelf-row {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(18px, 3vw, 38px);
  margin: 0;
  padding: 0 0 2px;
  list-style: none;
}

.shelf-book {
  position: relative;
  width: clamp(132px, 14vw, 176px);
}

.book3d {
  position: relative;
  display: block;
  transform: rotate(var(--tilt, 0deg));
  transform-origin: bottom center;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms ease;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.45));
}

.shelf-book:hover .book3d,
.shelf-book:focus-within .book3d {
  transform: rotate(0deg) translateY(-14px) scale(1.03);
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.55));
  z-index: 5;
}

/* blok kartek wystający zza okładki */
.book3d-pages {
  position: absolute;
  inset: 2px -5px 0 auto;
  width: 10px;
  border-radius: 0 2px 2px 0;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0 2px, rgba(0, 0, 0, 0) 2px 4px),
    linear-gradient(90deg, #d8cdb6, #efe6d2);
}

.book3d-face {
  position: relative;
  display: block;
  aspect-ratio: 5 / 8;
  border-radius: 2px 5px 5px 2px;
  overflow: hidden;
  background: var(--wine, #5a2330);
  box-shadow: inset 4px 0 8px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.book-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* okładka zastępcza, gdy produkt nie ma zdjęcia wyróżniającego */
.book-cover-fallback {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: 18px 14px;
  background:
    linear-gradient(160deg, rgba(208, 167, 90, 0.2), rgba(0, 0, 0, 0.12)),
    var(--wine, #5a2330);
}

.bcf-rule {
  width: 30px;
  height: 2px;
  margin-bottom: 12px;
  background: #d0a75a;
}

.bcf-title {
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.22;
  color: #f7f1e6;
}

.bcf-author {
  margin-top: auto;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 241, 230, 0.72);
}

/* karta szczegółów nad książką */
.book-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 16px);
  z-index: 9;
  width: min(320px, 78vw);
  transform: translateX(-50%) translateY(8px);
  padding: 18px;
  background: #16110a;
  border: 1px solid rgba(208, 167, 90, 0.4);
  border-radius: 6px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.shelf-book:hover .book-pop,
.shelf-book:focus-within .book-pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 60ms, 60ms, 0s;
}

.book-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: rgba(208, 167, 90, 0.4);
}

.book-pop__title {
  display: block;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.2;
  color: #f7f1e6;
}

.book-pop__author {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d0a75a;
}

.book-pop__desc {
  margin: 10px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(247, 241, 230, 0.74);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-pop__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(247, 241, 230, 0.12);
}

.book-pop__price {
  font-weight: 600;
  color: #f7f1e6;
}

.book-pop__price del {
  opacity: 0.5;
  margin-right: 6px;
}

.book-pop__cta {
  font-size: 0.84rem;
  color: #d0a75a;
  white-space: nowrap;
}

/* deska półki — drewno jak w komodzie hero */
.shelf-board {
  position: relative;
  z-index: 3;
  height: 26px;
  margin: 0 calc(-1 * clamp(22px, 4vw, 56px));
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 3px, rgba(0, 0, 0, 0) 3px 9px),
    linear-gradient(180deg, #7a5226, #4a2f12 62%, #2e1c0a);
  border-radius: 2px;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.5);
}

.shelf-board__edge {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(180deg, rgba(255, 222, 160, 0.5), rgba(255, 222, 160, 0));
}

.shelf-empty {
  position: relative;
  z-index: 2;
  padding: clamp(36px, 7vh, 72px) 20px;
  text-align: center;
  color: rgba(247, 241, 230, 0.72);
}

.shelf-empty__lead {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color: #f7f1e6;
}

.shelf-empty a {
  color: #d0a75a;
}

.shop-note {
  padding: clamp(26px, 5vh, 48px) 0 clamp(10px, 2vh, 24px);
  color: rgba(247, 241, 230, 0.6);
  font-size: 0.92rem;
}

.shop-note a {
  color: #d0a75a;
}

/* treść Woo poza regałem (produkt, koszyk itd.) — neutralne tło pod domyślne style */
.woo-content {
  color: rgba(247, 241, 230, 0.85);
}

.woo-content a {
  color: #d0a75a;
}

.woo-content .price {
  color: #f7f1e6;
}

@media (max-width: 640px) {
  .shelf-row {
    gap: 16px;
  }

  .shelf-book {
    width: clamp(118px, 38vw, 150px);
  }

  /* na dotyku karta hover nie istnieje — tap prowadzi prosto do produktu */
  .book-pop {
    display: none;
  }
}

/* v0.9.77b (Claude) — Woo: przyciski i akcenty w stylu marki zamiast domyślnego fioletu */
.woo-content .button,
.woo-content button[name="add-to-cart"],
.woo-content .single_add_to_cart_button,
.wp-block-woocommerce-checkout button.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
  background: linear-gradient(135deg, #d8b06a, #b9863c) !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: #1a1208 !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

.woo-content .button:hover,
.woo-content .single_add_to_cart_button:hover,
.wc-block-components-button:not(.is-link):hover {
  filter: brightness(1.07);
}

.woo-content .price,
.woo-content .woocommerce-Price-amount {
  color: #d0a75a;
  font-weight: 600;
}

.woo-content .product_title {
  font-family: var(--serif);
  font-weight: 500;
  color: #f7f1e6;
}

.woo-content .quantity .qty {
  background: rgba(247, 241, 230, 0.08);
  border: 1px solid rgba(247, 241, 230, 0.25);
  color: #f7f1e6;
  border-radius: 4px;
  padding: 8px;
}