/* ============================================================
   ZAFARA SKIN SPA — rituální preloader + tekuté přechody
   ============================================================
   Samostatný stylesheet (v1) — style.css se nemění.
   Načítá se v index.html a clenska-sekce.php.
   ============================================================ */

/* ------------------------------------------------------------
   PART 1 — rituální preloader (celoobrazovkový)
   ------------------------------------------------------------ */
#preloader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#0B291B;              /* tmavá zelená jako hlavička webu */
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  transition:opacity .8s ease;
}
#preloader.je-skryty{
  opacity:0;
  pointer-events:none;
}
/* POJISTKA: i kdyby JavaScript selhal, preloader se po 4,5 s
   sám schová čistým CSS — web nesmí nikdy zůstat zamčený. */
#preloader{
  animation:zaf-pojistka .8s ease 4.5s forwards;
}
@keyframes zaf-pojistka{
  to{opacity:0;visibility:hidden}
}

.preloader-znak{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.1rem;
}
.preloader-zafara{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:clamp(2.3rem, 9vw, 3.4rem);
  color:#F7F5F0;                   /* světlý nápis */
  letter-spacing:.32em;
  text-indent:.32em;
  display:flex;
  animation:zaf-prostrk 1.9s ease forwards;
}
.preloader-zafara span{
  opacity:0;
  transform:translateY(14px);
  animation:zaf-pismeno .7s ease forwards;
}
.preloader-zafara span:nth-child(1){animation-delay:.15s}
.preloader-zafara span:nth-child(2){animation-delay:.27s}
.preloader-zafara span:nth-child(3){animation-delay:.39s}
.preloader-zafara span:nth-child(4){animation-delay:.51s}
.preloader-zafara span:nth-child(5){animation-delay:.63s}
.preloader-zafara span:nth-child(6){animation-delay:.75s}
@keyframes zaf-pismeno{
  to{opacity:1;transform:translateY(0)}
}
@keyframes zaf-prostrk{
  from{letter-spacing:.18em;text-indent:.18em}
  to{letter-spacing:.32em;text-indent:.32em}
}
.preloader-linka{
  display:block;
  height:1px;
  width:0;
  background:#C6B79A;
  animation:zaf-linka 1s ease .9s forwards;
}
@keyframes zaf-linka{
  to{width:min(46vw, 210px)}
}
.preloader-podtitul{
  font-family:'Inter', sans-serif;
  font-weight:300;
  font-size:.68rem;
  letter-spacing:.55em;
  text-indent:.55em;
  color:#C6B79A;
  opacity:0;
  animation:zaf-podtitul .8s ease 1.45s forwards;
}
@keyframes zaf-podtitul{
  to{opacity:1}
}

/* ------------------------------------------------------------
   PART 2 — tekuté mikro-přechody mezi záložkami
   (třídy přidává js/script.js; funguje v členské zóně i správě)
   ------------------------------------------------------------ */
.panel.p-mizi{
  opacity:0;
  transition:opacity .15s ease;   /* fade-out 0,15 s */
}
.panel.p-tich{
  opacity:0;                      /* výchozí stav nového panelu (bez přechodu) */
}
.panel.p-nadech{
  transition:opacity .2s ease;    /* fade-in 0,2 s */
}

/* ------------------------------------------------------------
   Ohleduplnost k uživatelům s omezením pohybu
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  #preloader{transition:none;animation:none;opacity:0;visibility:hidden}
  .preloader-zafara,.preloader-zafara span,.preloader-linka,.preloader-podtitul{animation:none;opacity:1;transform:none}
  .preloader-linka{width:min(46vw,210px)}
  .panel.p-mizi,.panel.p-nadech{transition:none}
}

/* ------------------------------------------------------------
   Oprava: na mobilu plovoucí Rádkyně nesmí krýt odkazy patičky
   (patička dostane spodní rezervu ve výšce bubliny + odstup)
   ------------------------------------------------------------ */
@media (max-width: 700px){
  .site-footer{
    padding-bottom: 96px;
  }
}

/* ------------------------------------------------------------
   Mobilní navigace — jemné odsazení od záhlaví a o kousek
   menší nadpisové písmo než originál (pouze mobil; desktop beze změny).
   Přebíjí .mobile-menu a ze style.css shodnou specificitou, ale později.
   ------------------------------------------------------------ */
@media (max-width: 768px){
  .mobile-menu{
    padding-top: calc(var(--space-inner) + 1.4rem);
  }
  .mobile-menu a, .mobile-menu nav button{
    font-size: clamp(31px, 8.2vw, 47px);
  }
}

/* ------------------------------------------------------------
   Moje polička — nákupní tlačítko přímo na dlaždici
   (tlačítko sdílí vzhled .btn .btn--tichy z webu)
   ------------------------------------------------------------ */
.produkt-akce{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem;
  margin-top:.2rem;
}
.produkt-akce .produkt-objednat{
  width:100%;
}
.produkt-akce .produkt-objednat:disabled{
  opacity:.55;
  cursor:default;
}
.produkt-stav{
  margin:.35rem 0 0;
  font-size:.76rem;
  color:#6E6A5F;
  min-height:1em;
}