/* =========================================================
   WDS LIVE LAYER  ·  wklej na koniec styles.css
   lub podłącz osobno:  <link rel="stylesheet" href="/assets/css/wds-live.css">
   Używa istniejących zmiennych z :root (--gold, --line, --muted...).
   Wszystkie animacje wyłączają się przy prefers-reduced-motion.
   ========================================================= */

/* --- 1. Scroll reveal (sekcje wjeżdżają delikatnie przy scrollu) --- */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .8s cubic-bezier(.22,.61,.36,1),
               transform .8s cubic-bezier(.22,.61,.36,1);
    will-change:opacity,transform;
  }
  [data-reveal].is-in{opacity:1;transform:none}

  /* warianty z opóźnieniem dla siatek kart (efekt "kaskady") */
  [data-reveal-stagger] > *{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .65s ease, transform .65s ease;
    transition-delay:calc(var(--i,0) * 85ms);
  }
  [data-reveal-stagger].is-in > *{opacity:1;transform:none}
}

/* --- 2. Live availability badge (pulsująca kropka "dostępność") --- */
.wds-status{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(211,171,106,.05);
  font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  color:#eccb90;
}
.wds-status .dot{
  width:9px;height:9px;border-radius:50%;
  background:#5fd08a;flex:0 0 auto;position:relative;
}
@media (prefers-reduced-motion: no-preference){
  .wds-status .dot{animation:wds-pulse 2.4s ease-out infinite}
}
@keyframes wds-pulse{
  0%  {box-shadow:0 0 0 0 rgba(95,208,138,.55)}
  70% {box-shadow:0 0 0 11px rgba(95,208,138,0)}
  100%{box-shadow:0 0 0 0 rgba(95,208,138,0)}
}

/* --- 3. Live stats band (liczby liczące się w górę przy scrollu) --- */
.wds-stats-section{padding:26px 0}
.wds-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:0 20px 54px rgba(0,0,0,.20);
}
.wds-stat{padding:30px 22px;text-align:center}
.wds-stat + .wds-stat{border-left:1px solid rgba(211,171,106,.13)}
.wds-stat .num{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(2.7rem,5vw,3.7rem);line-height:1;color:#fff2df;
  font-variant-numeric:tabular-nums;
}
.wds-stat .num .suffix{color:#e2b76c;font-size:.62em;margin-left:2px}
.wds-stat .lbl{margin:10px 0 0;color:#aeb7bf;font-size:.92rem;line-height:1.5}
@media (max-width:860px){
  .wds-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wds-stat:nth-child(3){border-left:0;border-top:1px solid rgba(211,171,106,.13)}
  .wds-stat:nth-child(4){border-top:1px solid rgba(211,171,106,.13)}
}

/* --- 4. Header kondensuje się po przewinięciu --- */
.site-header{transition:background .25s ease, box-shadow .25s ease}
.site-header .nav-wrap{transition:height .25s ease}
.site-header.is-condensed{box-shadow:0 8px 30px rgba(0,0,0,.32)}
.site-header.is-condensed .nav-wrap{height:60px}
.site-header.is-condensed .brand-logo img{width:212px}