/* =====================================================================
   PERFEKTMONT — animations.css
   Reveal on scroll · hero choreografia · page veil · reduced motion
   ===================================================================== */

/* ---------- Reveal (IntersectionObserver pridá .is-visible) ---------- */
.js .reveal { opacity: 0; transition: opacity var(--dur-slow) var(--ease-premium), transform var(--dur-slow) var(--ease-premium), clip-path var(--dur-slow) var(--ease-premium); transition-delay: var(--d, 0s); will-change: opacity, transform; }
.js .reveal-up { transform: translateY(28px); }
.js .reveal-left { transform: translateX(-28px); }
.js .reveal-right { transform: translateX(28px); }
.js .reveal-scale { transform: scale(0.96); }
.js .reveal-mask { opacity: 1; overflow: hidden; }
.js .reveal-mask > span { display: block; transform: translateY(110%); transition: transform 1.2s var(--ease-premium); transition-delay: var(--d, 0s); }
.js .reveal-mask-img { transform: translateY(24px); }
.js .reveal-mask-img img { transform: scale(1.08); transition: transform 1.6s var(--ease-premium); }

.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-mask.is-visible > span { transform: none; }
.js .reveal-mask-img.is-visible img { transform: none; }

/* Stagger – deti dostanú narastajúci delay */
.js .stagger > .reveal:nth-child(1) { --d: 0s; }
.js .stagger > .reveal:nth-child(2) { --d: 0.07s; }
.js .stagger > .reveal:nth-child(3) { --d: 0.14s; }
.js .stagger > .reveal:nth-child(4) { --d: 0.21s; }
.js .stagger > .reveal:nth-child(5) { --d: 0.28s; }
.js .stagger > .reveal:nth-child(6) { --d: 0.35s; }
.js .stagger > .reveal:nth-child(7) { --d: 0.42s; }
.js .stagger > .reveal:nth-child(8) { --d: 0.49s; }
.js .stagger > .reveal:nth-child(n+9) { --d: 0.55s; }

/* ---------- Hero – vstupná choreografia ---------- */
.js .hero-media img { animation: hero-zoom 2.6s var(--ease-premium) forwards; }
@keyframes hero-zoom { from { transform: scale(1.14); } to { transform: scale(1.04); } }

.js .hero-eyebrow, .js .hero-subtitle, .js .hero-lead, .js .hero-actions, .js .hero-rail, .js .hero-fact, .js .hero-scroll {
  opacity: 0; transform: translateY(18px);
  animation: fade-up 1s var(--ease-premium) forwards;
}
.js .hero-eyebrow { animation-delay: 0.35s; }
.js .hero-title .line > span { transform: translateY(110%); animation: line-up 1.25s var(--ease-premium) forwards; animation-delay: calc(0.5s + var(--i, 0) * 0.11s); }
.js .hero-subtitle { animation-delay: 0.95s; }
.js .hero-lead { animation-delay: 1.05s; }
.js .hero-actions { animation-delay: 1.15s; }
.js .hero-rail { animation-delay: 1.3s; }
.js .hero-fact { animation-delay: calc(1.25s + var(--i, 0) * 0.08s); }
.js .hero-scroll { animation-delay: 1.65s; }
.js .hero-rail-line { transform: scaleY(0); transform-origin: top; animation: grow-y 1.4s var(--ease-premium) forwards; animation-delay: 1.4s; }

@keyframes fade-up { to { opacity: 1; transform: none; } }
@keyframes line-up { to { transform: none; } }
@keyframes grow-y { to { transform: scaleY(1); } }

/* ---------- Page veil – jemný prechod medzi stránkami ---------- */
.page-veil { position: fixed; inset: 0; z-index: 2000; background: var(--color-ink); pointer-events: none; opacity: 0; transition: opacity 0.35s var(--ease-soft); }
.js .page-veil { opacity: 1; }
.js.is-ready .page-veil { opacity: 0; }
.js.is-leaving .page-veil { opacity: 1; pointer-events: auto; }

/* ---------- Cursor glow (iba pointer: fine) ---------- */
@media (pointer: fine) {
  .cursor-glow { position: fixed; left: 0; top: 0; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; pointer-events: none; z-index: 800; background: radial-gradient(circle, rgba(105,157,181,0.10), transparent 60%); opacity: 0; transition: opacity 0.6s; mix-blend-mode: screen; will-change: transform; }
  .cursor-glow.is-on { opacity: 1; }
}
@media (pointer: coarse) { .cursor-glow { display: none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; transition-delay: 0s !important; }
  .js .reveal, .js .reveal-mask > span, .js .reveal-mask-img, .js .reveal-mask-img img { opacity: 1; transform: none; clip-path: none; }
  .js .hero-eyebrow, .js .hero-subtitle, .js .hero-lead, .js .hero-actions, .js .hero-rail, .js .hero-fact, .js .hero-scroll { opacity: 1; transform: none; animation: none; }
  .js .hero-title .line > span { transform: none; animation: none; }
  .js .hero-rail-line { transform: none; animation: none; }
  .js .hero-media img { animation: none; transform: none; }
  [data-parallax] { transform: none !important; }
  .cursor-glow { display: none; }
  .page-veil { display: none; }
}