/* =========================================================
   ROJOWISKO - sklep

   Zalozenie: retro zostaje w MATERIALE (rastrowe pszczoly,
   rozplywajacy sie wordmark), a nie w interfejsie. Interfejs
   jest wspolczesny i cichy: duza typografia, miekkie kafle,
   powietrze, zero ramek i zero terminalowej faktury.

   Mobile first - 95% ruchu to telefon.
   ========================================================= */

/* Cossette Titre - Google Fonts (SIL OFL), hostowany u nas:
   szybciej i bez przekazywania IP odwiedzajacych do Google.
   Dwa podzbiory - polskie znaki doczytuja sie tylko gdy trzeba. */

@font-face{
  font-family:'Cossette Titre'; font-style:normal; font-weight:700; font-display:swap;
  src:url('cossette-titre-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Cossette Titre'; font-style:normal; font-weight:700; font-display:swap;
  src:url('cossette-titre-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Czern z lekkim cieplem - inaczej niz sterylne #000 */
  --ink:      #0b0a0a;
  --surface:  #171514;
  --surface2: #201d1b;
  --fg:       #ffffff;
  --muted:    #a39c96;
  --muted-2:  #6e6763;

  --red:    #f44936;   /* napisy z plakatu */
  --honey:  #e9b93b;   /* miod - cieply akcent marki */
  --acid:   #c9c530;   /* paski pszczol */
  --cream:  #f3eee4;   /* blok odwrocony */

  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --display: 'Cossette Titre', var(--sans);

  --r:  16px;
  --r-s: 10px;
  --pad: clamp(1.15rem, 5vw, 4rem);
  --maxw: 1240px;
  --spring: cubic-bezier(.16,.84,.28,1);
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }

img,video{ max-width:100%; height:auto; display:block; }
button,input{ font:inherit; }
button{ cursor:pointer; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--red); color:#fff; }
:focus-visible{ outline:2px solid var(--honey); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.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;
}

h1,h2,h3{
  font-family:var(--display); font-weight:700;
  letter-spacing:-.025em; line-height:1.02;
  margin:0;
}

/* ---------- AURY: miekkie plamy swiatla zamiast ziarna ---------- */

/* z-index:-1, nie 0: dzieki temu warstwa jest czescia tla dokumentu,
   a nie osobnego kontekstu. Logo w trybie mix-blend-mode:screen moze
   sie wtedy z nia zlac - przy z-index:0 czarna klatka wideo zostawala
   czarnym prostokatem nad poswiata. */
.aura{ position:fixed; inset:0; pointer-events:none; z-index:-1; overflow:hidden; }
.aura span{
  position:absolute; border-radius:50%;
  filter:blur(90px);
  opacity:.5;
}
.aura span:nth-child(1){
  width:72vw; height:72vw; max-width:760px; max-height:760px;
  top:-22%; left:-14%;
  background:radial-gradient(circle,rgba(244,73,54,.5) 0%,rgba(244,73,54,0) 70%);
  animation:plyn 26s ease-in-out infinite alternate;
}
.aura span:nth-child(2){
  width:60vw; height:60vw; max-width:620px; max-height:620px;
  top:44%; right:-18%;
  background:radial-gradient(circle,rgba(233,185,59,.32) 0%,rgba(233,185,59,0) 70%);
  animation:plyn 34s ease-in-out infinite alternate-reverse;
}
@keyframes plyn{
  from{ transform:translate(0,0) scale(1); }
  to  { transform:translate(6%,9%) scale(1.2); }
}

/* ---------- PSZCZOLY ---------- */

.swarm{
  position:fixed; inset:0;
  pointer-events:none;        /* nigdy nie blokuja klikniec */
  z-index:2; overflow:hidden; contain:strict;
}
.bee{
  position:absolute; top:0; left:0;
  width:var(--w,72px);
  will-change:transform;
  filter:brightness(1.55) drop-shadow(0 0 14px rgba(233,185,59,.25));
}

/* ---------- NAGLOWEK ---------- */

.hdr{
  position:fixed; top:0; left:0; right:0; z-index:40;
  padding:.7rem var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  transition:background .35s var(--spring), backdrop-filter .35s;
}
/* pasek pojawia sie dopiero po zjechaniu z hero */
.hdr.is-stuck{
  background:rgba(11,10,10,.72);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
}

.hdr__logo{
  display:block; width:104px;
  opacity:0; transform:translateY(-6px);
  transition:opacity .35s var(--spring), transform .35s var(--spring);
  pointer-events:none;
}
.hdr.is-stuck .hdr__logo{ opacity:1; transform:none; pointer-events:auto; }

.cartbtn{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:44px; padding:.5rem 1.1rem;
  border:0; border-radius:999px;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--fg); font-size:.88rem; font-weight:600;
  transition:background .2s, transform .2s var(--spring);
}
.cartbtn:hover{ background:rgba(255,255,255,.18); }
.cartbtn:active{ transform:scale(.96); }
.cartbtn__n{
  min-width:1.45em; height:1.45em; display:grid; place-items:center;
  border-radius:999px; background:rgba(255,255,255,.16);
  font-size:.8em; font-variant-numeric:tabular-nums;
  transition:background .25s, color .25s;
}
.cartbtn__n.is-on{ background:var(--red); color:#fff; }

/* ---------- HERO ---------- */

.hero{
  position:relative;
  text-align:center;
  padding-block:clamp(5.8rem,20vw,9rem) clamp(2.5rem,9vw,5rem);
}

.hero__logo{
  display:block;
  width:min(78vw,460px);
  margin:0 auto;
  position:relative;
  cursor:pointer;
}
.hero__logo::before{
  content:''; position:absolute; inset:-16% -8%;
  background:radial-gradient(ellipse at center,
             rgba(244,73,54,.34) 0%, rgba(244,73,54,0) 70%);
  pointer-events:none;
}
.hero__logo video,
.hero__logo img{
  position:relative; width:100%; height:auto;
  mix-blend-mode:screen;   /* czern klatki znika, zostaje sam napis */
}

.hero__h{
  margin:clamp(1.6rem,6vw,2.4rem) auto 0;
  max-width:14ch;
  font-size:clamp(2.4rem,11vw,4.6rem);
  color:var(--fg);
}
.hero__h em{ font-style:normal; color:var(--red); }

.hero__sub{
  max-width:34ch; margin:1.1rem auto 0;
  font-size:1.02rem; line-height:1.6; color:var(--muted);
}

.hero__cta{ margin-top:2rem; display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; }

/* ---------- ODLICZANIE ---------- */

.count{ margin-top:2.6rem; }
.count__label{ margin:0 0 .9rem; font-size:.82rem; color:var(--muted-2); }
.count__grid{ display:flex; justify-content:center; gap:.5rem; }
.count__box{
  min-width:66px; padding:.6rem .3rem;
  background:var(--surface); border-radius:var(--r-s);
}
.count__num{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(1.5rem,6vw,2rem); line-height:1;
  color:var(--honey); font-variant-numeric:tabular-nums;
}
.count__unit{ display:block; margin-top:.3rem; font-size:.68rem; color:var(--muted-2); }

/* ---------- SEKCJE ---------- */

.sec{ position:relative; z-index:3; padding-block:clamp(2.5rem,9vw,5rem); }

.sec__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; margin-bottom:clamp(1.3rem,4vw,2rem);
}
.sec__title{ font-size:clamp(2rem,8vw,3.2rem); }
.sec__aside{ font-size:.85rem; color:var(--muted-2); white-space:nowrap; padding-bottom:.4rem; }

/* ---------- SIATKA PRODUKTOW ---------- */

.grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.7rem,2.6vw,1.5rem);
}
@media (min-width:760px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1080px){ .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.card{
  display:flex; flex-direction:column; gap:.7rem;
  width:100%; min-width:0; padding:0;
  background:none; border:0; color:var(--fg); text-align:left;
  transition:transform .3s var(--spring);
}
.card:active{ transform:scale(.975); }
@media (hover:hover){ .card:hover{ transform:translateY(-4px); } }

.card__media{
  position:relative; aspect-ratio:1/1;
  border-radius:var(--r); overflow:hidden;
  background:var(--surface);
  transition:box-shadow .3s var(--spring);
}
@media (hover:hover){
  .card:hover .card__media{ box-shadow:0 18px 44px -18px rgba(244,73,54,.55); }
}
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .4s var(--spring), transform .7s var(--spring);
}
.card__media .alt{ position:absolute; inset:0; opacity:0; }
@media (hover:hover){
  .card:hover .alt{ opacity:1; }
  .card:hover .card__media img{ transform:scale(1.05); }
}

.pill{
  position:absolute; top:.6rem; left:.6rem;
  padding:.24rem .6rem; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:.01em;
  background:var(--honey); color:#1a1300;
}
.pill--out{ background:rgba(255,255,255,.14); color:var(--fg); backdrop-filter:blur(6px); }

.card__body{ display:flex; flex-direction:column; gap:.1rem; padding-inline:.15rem; }
.card__name{ font-size:.92rem; font-weight:600; line-height:1.3; }
.card__price{ font-size:.92rem; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ---------- SPOTIFY ---------- */

.player{ border-radius:var(--r); overflow:hidden; background:var(--surface); }
.player__cta{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  width:100%; min-height:104px; padding:1.4rem;
  background:none; border:0; color:var(--fg);
  font-size:1rem; font-weight:600;
  transition:background .25s;
}
.player__cta:hover{ background:var(--surface2); }
.player__cta svg{ width:26px; height:26px; fill:#1ed760; flex:none; }
.player iframe{ display:block; width:100%; border:0; }

/* ---------- BLOK ODWROCONY: NEWSLETTER ---------- */

.news{
  background:var(--cream); color:#171310;
  border-radius:clamp(18px,5vw,28px);
  padding:clamp(1.8rem,7vw,3.4rem) clamp(1.2rem,5vw,3rem);
  text-align:center;
}
.news__h{ font-size:clamp(1.9rem,8vw,3rem); color:#171310; }
.news__p{ max-width:34ch; margin:.9rem auto 1.7rem; font-size:.98rem; color:#5a514a; }
.news__form{ display:flex; flex-wrap:wrap; gap:.6rem; max-width:430px; margin:0 auto; }
.news__input{
  flex:1 1 200px; min-height:54px; padding:.9rem 1.2rem;
  border:1.5px solid rgba(23,19,16,.16); border-radius:999px;
  background:#fff; color:#171310; font-size:1rem;
}
.news__input::placeholder{ color:#a09890; }
.news__input:focus{ outline:none; border-color:var(--red); }
.news__form .btn{ flex:1 1 100%; }
@media (min-width:520px){ .news__form .btn{ flex:0 0 auto; } }

.news__msg{ margin:.9rem 0 0; font-size:.86rem; min-height:1.2em; font-weight:600; }
.news__msg.ok{ color:#1f7a3d; }
.news__msg.err{ color:#c02a18; }
.news__fine{ margin:1.1rem 0 0; font-size:.76rem; color:#8c8178; }

/* ---------- PRZYCISKI ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:.9rem 1.8rem;
  border:0; border-radius:999px;
  background:var(--red); color:#fff;
  font-size:1rem; font-weight:700; letter-spacing:-.01em;
  transition:transform .2s var(--spring), filter .2s, background .2s;
}
.btn:hover:not(:disabled){ filter:brightness(1.1); }
.btn:active:not(:disabled){ transform:scale(.97); }
.btn:disabled{ background:var(--surface2); color:var(--muted-2); cursor:not-allowed; }
.btn--full{ width:100%; }
.btn--ghost{ background:rgba(255,255,255,.1); color:var(--fg); }
.btn--ghost:hover{ background:rgba(255,255,255,.18); }

/* ---------- KARTA PRODUKTU ---------- */

.modal{
  position:fixed; inset:0; z-index:60;
  background:var(--ink);
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  /* zadnego backdrop-filter: tworzylby blok zawierajacy dla
     position:fixed i odklejal przycisk od dolu ekranu */
}
.modal__box{ position:relative; width:100%; min-height:100%; }

.modal__bar{
  position:sticky; top:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  min-height:56px; padding-inline:1rem;
  background:rgba(11,10,10,.82);
  font-size:.86rem; font-weight:600; color:var(--muted);
}
.modal__x{
  min-width:44px; min-height:44px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:0; border-radius:999px;
  color:var(--fg); font-size:.95rem;
  transition:background .2s, transform .2s var(--spring);
}
.modal__x:hover{ background:rgba(255,255,255,.2); }
.modal__x:active{ transform:scale(.92); }

.pdp{ display:grid; grid-template-columns:minmax(0,1fr); }
.pdp__media,.pdp__info{ min-width:0; }
.pdp__media{ padding:0 1rem; }

.pdp__img{
  width:100%; max-width:100%; height:auto;
  aspect-ratio:1/1; object-fit:contain;
  background:var(--surface); border-radius:var(--r);
}
.pdp__thumbs{ display:flex; gap:.5rem; flex-wrap:wrap; padding:.75rem 0 0; }
.pdp__thumbs img{
  width:58px; height:58px; object-fit:cover; border-radius:var(--r-s);
  opacity:.5; cursor:pointer; transition:opacity .2s, outline-color .2s;
  outline:2px solid transparent; outline-offset:2px;
}
.pdp__thumbs img.on{ opacity:1; outline-color:var(--red); }

.pdp__info{ padding:1.8rem 1rem 9rem; }

.pdp__badge{
  display:inline-block; margin:0 0 1rem; padding:.26rem .7rem;
  border-radius:999px; background:var(--honey); color:#1a1300;
  font-size:.72rem; font-weight:700;
}
.pdp__title{ font-size:clamp(1.9rem,8vw,2.8rem); margin-bottom:.5rem; }
.pdp__price{ margin:0 0 2rem; font-size:1.3rem; font-weight:600; color:var(--muted); }

.pdp__block{ margin-bottom:1.7rem; }
.pdp__label{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:0 0 .7rem; font-size:.84rem; font-weight:600; color:var(--muted);
}
.pdp__label span:last-child{ font-weight:400; font-size:.78rem; color:var(--muted-2); }

.sizes{ display:flex; flex-wrap:wrap; gap:.5rem; }
.size{
  min-width:66px; min-height:54px; padding:.5rem .9rem;
  border:0; border-radius:999px;
  background:var(--surface); color:var(--fg);
  font-size:.95rem; font-weight:600;
  transition:background .2s, color .2s, transform .2s var(--spring);
}
.size:hover:not(:disabled){ background:var(--surface2); }
.size:active:not(:disabled){ transform:scale(.95); }
.size.on{ background:var(--fg); color:#111; }
.size:disabled{ color:var(--muted-2); text-decoration:line-through; cursor:not-allowed; opacity:.55; }

.qty{ display:inline-flex; align-items:center; gap:.2rem;
      background:var(--surface); border-radius:999px; padding:.25rem; }
.qty button{
  width:46px; height:46px; border:0; border-radius:999px;
  background:none; color:var(--fg); font-size:1.2rem;
  transition:background .2s;
}
.qty button:hover{ background:var(--surface2); }
.qty span{ min-width:44px; text-align:center; font-weight:600;
           font-variant-numeric:tabular-nums; }

.pdp__cta{
  position:fixed; left:0; right:0; bottom:0; z-index:4;
  padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--ink) 62%,rgba(11,10,10,0));
}
.pdp__hint{ margin:.6rem 0 0; font-size:.82rem; color:var(--muted-2); text-align:center; min-height:1.1em; }

.pdp__desc{
  margin-top:2rem; padding-top:1.7rem;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:1rem; line-height:1.7; color:var(--muted);
}
.pdp__desc p{ margin:0 0 1rem; }
.pdp__desc ul{ margin:0 0 1rem; padding-left:1.15rem; }
.pdp__desc li{ margin-bottom:.4rem; }
.pdp__desc strong{ color:var(--fg); font-weight:600; }
.pdp__desc h4{
  font-family:var(--display); font-weight:700; font-size:1.15rem;
  color:var(--fg); margin:1.7rem 0 .6rem; letter-spacing:-.02em;
}
.pdp__desc table{ width:100%; border-collapse:collapse; margin:1rem 0; font-size:.9rem; }
.pdp__desc th,.pdp__desc td{
  border-bottom:1px solid rgba(255,255,255,.08); padding:.6rem .5rem; text-align:left;
}
.pdp__desc th{ color:var(--fg); font-weight:600; }
.pdp__scroll{ overflow-x:auto; }

@media (min-width:920px){
  .modal__box{ max-width:1120px; min-height:auto; margin:2.5rem auto 4rem; }
  .pdp{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.4rem; align-items:start; }
  .pdp__media{ padding:0 0 0 1.5rem; position:sticky; top:5rem; }
  .pdp__info{ padding:0 1.5rem 2rem 0; }
  .pdp__cta{ position:static; padding:0; background:none; }
}

/* ---------- KOSZYK ---------- */

.drawer{ position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.6); overflow:hidden; }
.drawer__panel{
  position:absolute; inset:0 0 0 auto; width:min(100%,430px);
  display:flex; flex-direction:column;
  background:var(--ink);
  animation:wjedz .3s var(--spring);
}
@media (min-width:520px){
  .drawer__panel{ inset:.6rem .6rem .6rem auto; border-radius:var(--r); overflow:hidden; }
}
@keyframes wjedz{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }

.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  min-height:60px; padding-inline:1.3rem;
  font-family:var(--display); font-weight:700; font-size:1.3rem;
}
.drawer__body{ flex:1; overflow-y:auto; padding-inline:1.3rem; }
.drawer__empty{ padding:3.5rem 0; text-align:center; color:var(--muted-2); }

.line{
  display:grid; grid-template-columns:72px minmax(0,1fr) auto;
  gap:.9rem; align-items:start; padding-block:1rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.line img{ width:72px; height:72px; object-fit:cover;
           border-radius:var(--r-s); background:var(--surface); }
.line__name{ margin:0 0 .15rem; font-size:.92rem; font-weight:600; line-height:1.3; }
.line__meta{ margin:0 0 .5rem; font-size:.82rem; color:var(--muted-2); }
.line__price{ font-size:.92rem; font-weight:600; white-space:nowrap;
              font-variant-numeric:tabular-nums; }
.line__ctrl{ display:inline-flex; align-items:center;
             background:var(--surface); border-radius:999px; padding:.15rem; }
.line__ctrl button{ width:30px; height:30px; border:0; border-radius:999px;
                    background:none; color:var(--muted); transition:color .2s,background .2s; }
.line__ctrl button:hover{ color:var(--fg); background:var(--surface2); }
.line__ctrl span{ min-width:32px; text-align:center; font-size:.85rem;
                  font-variant-numeric:tabular-nums; }
.line__rm{ margin-top:.45rem; padding:.25rem 0; background:none; border:0;
           color:var(--muted-2); font-size:.78rem; text-decoration:underline; }
.line__rm:hover{ color:var(--red); }

.drawer__foot{ padding:1.2rem 1.3rem calc(1.2rem + env(safe-area-inset-bottom));
               border-top:1px solid rgba(255,255,255,.07); }
.drawer__row{ display:flex; justify-content:space-between; align-items:baseline;
              margin-bottom:.3rem; font-size:1.05rem; font-weight:600; }
.drawer__row b{ font-family:var(--display); font-size:1.4rem;
                font-variant-numeric:tabular-nums; }
.drawer__note{ margin:0 0 1.1rem; font-size:.82rem; color:var(--muted-2); }

/* ---------- STOPKA ---------- */

.ftr{ position:relative; z-index:3; padding-block:clamp(2.5rem,8vw,4rem); }
.ftr__in{
  background:var(--surface); border-radius:clamp(18px,5vw,28px);
  padding:clamp(1.8rem,6vw,3rem) clamp(1.2rem,5vw,2.5rem); text-align:center;
}
.ftr__logo{ width:150px; margin:0 auto 1.6rem; opacity:.92; }
.ftr__social{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:1.8rem; }
.ftr__social a{
  display:grid; place-items:center; width:48px; height:48px;
  border-radius:999px; background:rgba(255,255,255,.07);
  transition:background .2s, transform .2s var(--spring);
}
.ftr__social a:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }
.ftr__social svg{ width:19px; height:19px; fill:var(--muted); transition:fill .2s; }
.ftr__social a:hover svg{ fill:var(--fg); }

.ftr__links{ display:flex; flex-wrap:wrap; justify-content:center;
             gap:.4rem 1.2rem; margin-bottom:1.6rem; font-size:.85rem; }
.ftr__links a{ color:var(--muted); padding-block:.3rem; transition:color .2s; }
.ftr__links a:hover{ color:var(--fg); }

.ftr__legal{ max-width:52ch; margin:0 auto; font-size:.82rem;
             line-height:1.65; color:var(--muted-2); }
.ftr__legal a{ color:var(--muted); text-decoration:underline; }
.ftr__copy{ margin-top:1.4rem; font-size:.78rem; color:var(--muted-2); }

/* ---------- STANY ---------- */

.state{ padding:2.2rem 0; text-align:center; color:var(--muted); }
.state a{ color:var(--red); text-decoration:underline; }

.toast{
  position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%);
  z-index:90; padding:.9rem 1.5rem; border-radius:999px;
  background:var(--fg); color:#111;
  font-size:.9rem; font-weight:700;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.7);
  max-width:calc(100vw - 2rem); text-align:center;
  animation:pop .28s var(--spring);
}
@keyframes pop{ from{ opacity:0; transform:translate(-50%,14px) scale(.94); }
                to{ opacity:1; transform:translate(-50%,0) scale(1); } }

/* ---------- POJAWIANIE SIE ---------- */

.js [data-reveal]{
  opacity:0; transform:translateY(22px) scale(.99);
  transition:opacity .7s var(--spring), transform .7s var(--spring);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- OGRANICZONE ANIMACJE ---------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html{ scroll-behavior:auto; }
  .js [data-reveal]{ opacity:1; transform:none; }
  .swarm,.aura{ display:none; }
  .hdr__logo{ opacity:1; transform:none; }
}