/* ============================================
   animations.css — Keyframes & reveal system
   ============================================ */

@keyframes km-fade-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes km-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes km-slide-left { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes km-slide-right { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes km-scale-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes km-bounce-in { 0% { opacity: 0; transform: translateY(60px) scale(.9); } 60% { opacity: 1; transform: translateY(-8px) scale(1.02); } 100% { transform: none; opacity: 1; } }
@keyframes km-spin { to { transform: rotate(360deg); } }
@keyframes km-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes km-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(255,107,0,.45); } 70% { box-shadow: 0 0 0 16px rgba(255,107,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,107,0,0); } }
@keyframes km-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes km-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } }
@keyframes km-toast-in { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes km-toast-out { to { opacity: 0; transform: translateX(60px); } }
@keyframes km-pin-drop { 0% { opacity: 0; transform: translateY(-26px); } 60% { opacity: 1; transform: translateY(4px); } 100% { transform: none; opacity: 1; } }
@keyframes km-dash { to { stroke-dashoffset: 0; } }
@keyframes km-shine { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(240%) skewX(-18deg); } }
@keyframes km-route { to { stroke-dashoffset: -240; } }

/* ---------- Scroll reveal system ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-56px); }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal="zoom"]  { transform: scale(.88); }
[data-reveal="flip"]  { transform: perspective(900px) rotateX(14deg) translateY(40px); transform-origin: top center; }
[data-reveal].is-inview { opacity: 1; transform: none; }

/* ---------- Page loader ---------- */
.page-loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  background: var(--km-dark-bg);
  display: grid; place-items: center;
  transition: opacity .6s var(--ease-out), visibility .6s;
}
.page-loader.is-done { opacity: 0; visibility: hidden; }
.page-loader__box { text-align: center; width: min(320px, 78vw); }
.page-loader__logo { width: 220px; margin: 0 auto 26px; }
.page-loader__logo .km-path { stroke-dasharray: 320; stroke-dashoffset: 320; animation: km-dash 1.4s var(--ease-out) forwards; }
.page-loader__bar {
  height: 4px; border-radius: 4px;
  background: rgba(255,255,255,.12); overflow: hidden;
}
.page-loader__bar span {
  display: block; height: 100%; width: 0;
  background: var(--km-gradient); border-radius: 4px;
  transition: width .25s var(--ease-out);
}
.page-loader__pct { margin-top: 12px; font-size: .8rem; letter-spacing: .25em; color: rgba(255,255,255,.55); font-weight: 600; }

/* ---------- Hero intro ---------- */
.hero .km-line { display: block; overflow: hidden; }
.hero .km-line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-out);
}
.hero.is-ready .km-line > span { transform: none; }
.hero [data-hero] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--hero-delay, 0s); }
.hero.is-ready [data-hero] { opacity: 1; transform: none; }
.hero .track-widget { opacity: 0; }
.hero.is-ready .track-widget { animation: km-bounce-in .9s var(--ease-back) 1.05s forwards; }

/* Animated gradient shine on banner */
.shine-band { position: relative; overflow: hidden; }
.shine-band::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: km-shine 3.6s ease-in-out infinite;
}