:root { --brand:#1f7a8c; --accent:#ffb703; }

.gradient-bg{ background: radial-gradient(60% 60% at 60% 0%, rgba(31,122,140,.12), transparent 60%), radial-gradient(50% 40% at 20% 0%, rgba(255,183,3,.15), transparent 60%); }

html{ scroll-behavior:smooth }



/* TYLKO NAVBAR: ukryj tel: na mobile, pokaż na desktopie */
@media (max-width: 767.98px) {
  header a[href^="tel:"] {
    display: none !important;
  }
}
@media (min-width: 768px) {
  header a[href^="tel:"] {
    display: inline-flex !important;
    white-space: nowrap;
  }
}


/* ===== Scroll reveal ===== */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  /* warianty (opcjonalnie używaj data-reveal="left|right|zoom|up|in") */
  [data-reveal="left"]    { transform: translateX(-24px); }
  [data-reveal="right"]   { transform: translateX(24px); }
  [data-reveal="zoom"]    { transform: scale(.96); }
  [data-reveal="in"]      { transform: none; } /* tylko fade */

  /* ładne „stagger” dla dzieci */
  [data-reveal-children] > * {
    opacity: 0; transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
  }
  [data-reveal-children].is-visible > * {
    opacity: 1; transform: none;
  }
  /* opóźnienia 1..6 */
  [data-reveal-children].is-visible > *:nth-child(1) { transition-delay: .05s; }
  [data-reveal-children].is-visible > *:nth-child(2) { transition-delay: .10s; }
  [data-reveal-children].is-visible > *:nth-child(3) { transition-delay: .15s; }
  [data-reveal-children].is-visible > *:nth-child(4) { transition-delay: .20s; }
  [data-reveal-children].is-visible > *:nth-child(5) { transition-delay: .25s; }
  [data-reveal-children].is-visible > *:nth-child(6) { transition-delay: .30s; }
}

/* ===== Mascot (postać z lancą) ===== */
.mascot{
  position: fixed;          /* klucz: fixed do viewportu */
  bottom: 0;                /* zakotwiczenie */
  left: 0;                  /* jeśli po lewej */
  width: 28vw;
  max-width: 320px;
  transform: translateX(-18%);   /* odrobina „wychylenia” z krawędzi */
  pointer-events: none;
  z-index: 0;               /* pod treścią; zwiększ jeśli ma być nad */
}
.mascot__img{
  width: 100%;
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.2));
}
.mascot__spray{
  position: absolute;
  left: calc(100% - 60px);   /* pozycja dyszy względem obrazka */
  bottom: 130px;
  width: 42vw;
  max-width: 540px;
  opacity: .85;
}
.mascot__spray .droplets circle{
  fill: #3ebdf8;
  opacity: 0;
  animation: droplet 1.6s linear infinite;
}
.mascot__spray .droplets circle:nth-child(1){ animation-delay: .0s; }
.mascot__spray .droplets circle:nth-child(2){ animation-delay: .18s; }
.mascot__spray .droplets circle:nth-child(3){ animation-delay: .36s; }
.mascot__spray .droplets circle:nth-child(4){ animation-delay: .54s; }
.mascot__spray .droplets circle:nth-child(5){ animation-delay: .72s; }

@keyframes droplet{
  0%   { opacity: 0; transform: translateX(-24px) translateY(0); }
  10%  { opacity: .95; }
  100% { opacity: 0; transform: translateX(180px) translateY(14px); }
}

/* schowaj na małych ekranach, żeby nie zasłaniać treści */
@media (max-width: 768px){
  .mascot{ display: none; }
}

/* Wersja „po prawej” (opcjonalnie) */
.mascot--right{
  left: auto;
  right: 0;
  transform: translateX(18%);
}
.mascot--right .mascot__spray{
  right: calc(100% - 60px);
  left: auto;
  transform: scaleX(-1); /* odbicie sprayu */
}