/* =========================================================
   POKRET
   Pravilo: animacija sme da naglasi sadržaj, nikad da ga odloži.
   Ništa ne traje duže od 700 ms, ništa se ne pomera više od 16 px,
   i sve se gasi na `prefers-reduced-motion`.
   ========================================================= */

/* ---------- ulazak hero sekcije ---------- */
/* Redom: nadnaslov, naslov, tekst, dugmad, traka, psi.
   Ne čeka se skrol — ovo je prvo što se vidi. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseDogs {
  from { opacity: 0; transform: translateY(28px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.hero__in > *,
.hero__dogs {
  animation: rise .62s cubic-bezier(.22, .61, .36, 1) both;
}
.hero__in > .hero__logo   { animation-delay: 0s; }
.hero__in > .eyebrow      { animation-delay: .09s; }
.hero__in > .hero__lead   { animation-delay: .17s; }
.hero__in > .hero__social { animation-delay: .25s; }
.hero__in > .hero__actions{ animation-delay: .32s; }
.hero__in > .hero__trust  { animation-delay: .4s; }
.hero__dogs {
  animation-name: riseDogs;
  animation-duration: .8s;
  animation-delay: .3s;
}

/* ---------- podvlaka koja se "iscrta" ---------- */
/* Mint traka iza reči raste s leva, kao potez markerom. */
@keyframes drawMark {
  from { transform: skewY(-1.2deg) scaleX(0); }
  to   { transform: skewY(-1.2deg) scaleX(1); }
}
.mark::after {
  transform-origin: left center;
  animation: drawMark .6s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: .45s;
}
/* naslovi niže na stranici crtaju podvlaku tek kad dođu u vidno polje */
.reveal .mark::after,
.head-row .mark::after { animation-play-state: paused; }
.is-in .mark::after,
.head-row.is-in .mark::after { animation-play-state: running; }

/* ---------- pojavljivanje pri skrolu ---------- */
/* .reveal / .is-in postavlja site.js */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- navigacija ---------- */
.nav { transition: box-shadow .3s, border-color .3s, padding .3s; }
.nav.is-stuck .nav__in { padding-block: .65rem; }
.nav__in { transition: padding .3s cubic-bezier(.22,.61,.36,1); }
.nav.is-stuck .logo img { height: clamp(26px, 2.8vw, 33px); }

/* ---------- brojke koje se broje ---------- */
.stat b { font-variant-numeric: tabular-nums; }

/* ---------- sitni potezi ---------- */
.btn, .dog-card, .news-card, .chip {
  transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}
.titlegroup { transition: border-color .25s, transform .25s cubic-bezier(.22,.61,.36,1); }
.titlegroup:hover { border-color: rgba(201, 162, 39, .45); transform: translateY(-2px); }
.ptree__cell { transition: background .2s; }
.ptree__cell:hover { background: var(--cream); }
.idcard__item { transition: background .2s; }
.idcard__item:hover { background: var(--cream); }

/* ---------- ko ne želi pokret, ne dobija ga ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__in > *, .hero__dogs, .mark::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .mark::after { transform: skewY(-1.2deg) !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { scroll-behavior: auto !important; }
}