/* Knot & Wosk — manufaktura świec sojowych
   Custom layer on top of Tailwind CDN.
   Palette: zieleń #16201b, krem #efe9dd, złoto #c9a66b, dym #2c3630 */

:root{
  --zielen:#16201b;
  --krem:#efe9dd;
  --zloto:#c9a66b;
  --dym:#2c3630;
  --zloto-mute:#9c8456;
}

*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

html{ scroll-behavior:auto; } /* Lenis steruje scrollem */

body{
  background:var(--zielen);
  color:var(--krem);
  font-family:'Jost', ui-sans-serif, system-ui, sans-serif;
  font-weight:300;
  letter-spacing:.01em;
  overflow-x:hidden;
}

.font-serif-display{ font-family:'Cormorant Garamond', Georgia, serif; }

/* ——— Pełna szerokość: brak sztywnego kontenera, płynne marginesy ——— */
.shell{ width:100%; padding-inline:clamp(1.25rem, 5.2vw, 7rem); }
.shell-tight{ width:100%; padding-inline:clamp(1.25rem, 5.2vw, 7rem); }
/* wąski blok tekstu wyśrodkowany na pełnej sekcji (czytelność) */
.measure{ width:100%; max-width:64rem; margin-inline:auto; padding-inline:clamp(1.25rem, 5vw, 3rem); }
.measure-sm{ width:100%; max-width:46rem; margin-inline:auto; padding-inline:clamp(1.25rem, 5vw, 2rem); }

/* ——— Pasek przewijany (marquee) ——— */
.marquee{ overflow:hidden; white-space:nowrap; }
.marquee__track{ display:inline-flex; align-items:center; gap:0; will-change:transform; animation:marquee 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ display:inline-flex; align-items:center; gap:1.4rem; padding:0 2.2rem; font-size:.78rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(239,233,221,.72); }
.marquee__dot{ width:5px; height:5px; border-radius:9999px; background:var(--zloto); flex:none; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ——— Złote, cienkie linie ——— */
.hairline{ height:1px; background:linear-gradient(90deg, transparent, var(--zloto), transparent); opacity:.55; }
.hairline-l{ width:1px; background:linear-gradient(180deg, transparent, var(--zloto), transparent); opacity:.45; }

/* ——— Tracking dla nagłówków serif ——— */
.tracking-luxe{ letter-spacing:.34em; }
.tracking-luxe-sm{ letter-spacing:.22em; }

/* ——— Linki w nawigacji: powolny hover (letter-spacing + opacity) ——— */
.nav-link{
  position:relative;
  transition:letter-spacing .55s cubic-bezier(.22,.61,.36,1), opacity .5s ease, color .5s ease;
  opacity:.78;
}
.nav-link:hover{ opacity:1; letter-spacing:.14em; color:var(--zloto); }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--zloto); transition:width .6s cubic-bezier(.22,.61,.36,1);
}
.nav-link:hover::after{ width:100%; }
.nav-link.is-active{ color:var(--zloto); opacity:1; }
.nav-link.is-active::after{ width:100%; }

/* ——— Przyciski ——— */
.btn-gold{
  display:inline-flex; align-items:center; gap:.7rem;
  border:1px solid var(--zloto);
  color:var(--zloto);
  padding:.95rem 2.1rem;
  font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  background:transparent;
  transition:background .6s ease, color .6s ease, letter-spacing .6s ease;
}
.btn-gold:hover{ background:var(--zloto); color:var(--zielen); letter-spacing:.32em; }

.btn-ghost{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--krem); opacity:.85;
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  transition:opacity .5s ease, letter-spacing .5s ease, color .5s ease;
}
.btn-ghost:hover{ opacity:1; color:var(--zloto); letter-spacing:.3em; }

/* ——— Karta produktu ——— */
.kolekcja-card{ transition:transform .8s cubic-bezier(.22,.61,.36,1); }
.kolekcja-card img{ transition:transform 1.1s cubic-bezier(.22,.61,.36,1), filter .8s ease; filter:saturate(.92) brightness(.96); }
.kolekcja-card:hover img{ transform:scale(1.04); filter:saturate(1) brightness(1); }
.kolekcja-frame{ border:1px solid rgba(201,166,107,.22); overflow:hidden; background:var(--dym); }

/* ——— Reveal (GSAP nadpisuje, ale to fallback bez JS) ——— */
.reveal{ opacity:0; transform:translateY(26px); }
.no-js .reveal, .reveal.is-in{ opacity:1; transform:none; }

/* ——— Nuty zapachowe (parfum-style) ——— */
.nuta-row{ border-bottom:1px solid rgba(201,166,107,.16); }
.nuta-label{ color:var(--zloto); letter-spacing:.28em; text-transform:uppercase; font-size:.66rem; }

/* ——— Formularz ——— */
.field{
  width:100%; background:transparent;
  border:0; border-bottom:1px solid rgba(201,166,107,.32);
  color:var(--krem); padding:.85rem .2rem;
  font-family:'Jost',sans-serif; font-weight:300; font-size:1rem;
  transition:border-color .5s ease;
}
.field::placeholder{ color:rgba(239,233,221,.4); }
.field:focus{ outline:none; border-color:var(--zloto); }
.field-label{ color:var(--zloto); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; }

/* ——— Menu mobilne ——— */
#mobile-menu{ transition:opacity .5s ease, visibility .5s ease; }
#mobile-menu.hidden-menu{ opacity:0; visibility:hidden; pointer-events:none; }

/* ——— Akordeon FAQ ——— */
.faq-item button[aria-expanded="true"] .faq-plus{ transform:rotate(45deg); }
.faq-plus{ transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .6s cubic-bezier(.22,.61,.36,1); }

/* ——— Drobne ——— */
.eyebrow{ color:var(--zloto); font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; }
::selection{ background:var(--zloto); color:var(--zielen); }
img{ display:block; max-width:100%; height:auto; }

/* fokus dostępność */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--zloto); outline-offset:3px;
}

/* ——— Proces: numerowane kroki ——— */
.krok{ position:relative; padding-top:2rem; border-top:1px solid rgba(201,166,107,.22); }
.krok__num{ font-family:'Cormorant Garamond',serif; font-size:3.2rem; line-height:1; color:var(--zloto); opacity:.85; }

/* ——— Zestawy / karta pozioma ——— */
.zestaw-card{ border:1px solid rgba(201,166,107,.2); background:var(--dym); transition:border-color .6s ease; }
.zestaw-card:hover{ border-color:rgba(201,166,107,.5); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .kolekcja-card img{ transition:none; }
  .marquee__track{ animation:none; }
}