/* alpineski — efekty
   Prechody medzi stránkami, paralaxa fotiek, maska nadpisov, náklon kariet a let do košíka.
   Hýbe sa len transform, translate, scale a opacity, takže animácie bežia na GPU a netrhajú sa.
   Načítava sa ako posledný štýl. Pri obmedzení pohybu sa všetko vypína. */

/* ---------- Prechod medzi stránkami (Chrome, Edge, Safari 18.2+) ---------- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

::view-transition-old(root) { animation: e-odchod 0.14s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: e-prichod 0.34s var(--a-ease) both; }
/* lišta ostáva na mieste, mení sa len obsah pod ňou */
.a-nav { view-transition-name: e-lista; }
::view-transition-group(e-lista) { animation-duration: 0.34s; animation-timing-function: var(--a-ease); }

@keyframes e-odchod { to { opacity: 0; } }
@keyframes e-prichod { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Dlaždice: odkrytie ako opona a paralaxa fotiek (len pri scrolle, bez JavaScriptu) ----------
   Opona je viazaná na scroll, nie na čas, takže nikdy neostane zaseknutá v polovici.
   Dlaždice, ktoré sú na obrazovke hneď po načítaní, sú už odkryté. */

@keyframes e-opona {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes e-opona-fotka {
  from { scale: 1.4; }
  to { scale: 1.12; }
}

@keyframes e-paralaxa {
  from { translate: 0 -5%; }
  to { translate: 0 5%; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dl-dlazdica,
    .dl-clanok {
      animation: e-opona linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 85%;
    }

    .dl-dlazdica img,
    .dl-clanok img {
      scale: 1.12;
      animation: e-paralaxa linear both, e-opona-fotka linear both;
      animation-timeline: view(), view();
      animation-range: cover, entry 0% cover 45%;
    }
  }
}

/* ---------- Nadpisy vychádzajú slovo po slove (slová rozdelí efekty.js) ---------- */

.e-slovo {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.e-slovo > span {
  display: inline-block;
  translate: 0 105%;
  transition: translate 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--e-i, 0) * 60ms);
}

.e-nadpis-von .e-slovo > span { translate: 0 0; }

/* ---------- Úvodný karusel sa pri scrolle vzďaľuje ---------- */

@keyframes e-hero-odchod {
  to { scale: 0.9; opacity: 0.3; translate: 0 8%; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .zj-uvod .kr-karusel {
      transform-origin: 50% 0;
      animation: e-hero-odchod linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

/* ---------- Lesk prebehne po oranžových tlačidlách ---------- */

.e-ma-lesk { overflow: hidden; }

.e-lesk {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.e-lesk::before {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 55%), transparent);
  rotate: 20deg;
  animation: e-lesk 4.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  animation-delay: var(--e-lesk-oneskorenie, 1.2s);
}

.e-ma-lesk:hover .e-lesk::before { animation-duration: 1.4s; animation-delay: 0s; }

@keyframes e-lesk {
  0%, 65% { translate: 0 0; }
  100% { translate: 420% 0; }
}

/* ---------- Oranžová žiara za kurzorom v tmavých sekciách ---------- */

.e-ma-svetlo { isolation: isolate; }

.e-svetlo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(640px circle at var(--e-sx, 50%) var(--e-sy, 50%), rgb(254 119 27 / 22%), transparent 62%);
  transition: opacity 0.5s var(--a-ease);
}

.e-ma-svetlo:hover > .e-svetlo { opacity: 1; }

/* ---------- Odlesk na kartách (náklon rieši efekty.js) ---------- */

.e-odlesk {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(520px circle at var(--e-gx, 50%) var(--e-gy, 50%), rgb(255 255 255 / 26%), transparent 45%);
  mix-blend-mode: soft-light;
  transition: opacity 0.4s var(--a-ease);
}

.e-aktivna > .e-odlesk { opacity: 1; }

/* ---------- Let fotky do košíka ---------- */

.e-let {
  position: fixed;
  z-index: 120;
  margin: 0;
  object-fit: contain;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgb(16 33 61 / 28%);
  pointer-events: none;
  will-change: transform, opacity;
}

/* ---------- Stlačenie tlačidla ---------- */

@media (prefers-reduced-motion: no-preference) {
  :is(.a-cta-oranz, .a-cta-obrys, .ws-btn, .ob-tlacidlo, .a-kosik):active { scale: 0.96; }
}