/* ==========================================================================
   CNK İSG — Hareket
   Tek bir orkestre edilmiş açılış (hero) + kullanıcı eylemine yanıt veren geçişler.
   "prefers-reduced-motion" tercihine tam uyum.
   ========================================================================== */

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.35); }
  100% { box-shadow: 0 0 0 14px rgba(217, 119, 6, 0); }
}

/* Açılış sekansı: yalnızca hero */
.js .landing [data-rise] { opacity: 0; }
.js .landing.is-ready [data-rise] { animation: rise 720ms var(--ease) forwards; }
.js .landing.is-ready [data-rise="2"] { animation-delay: 90ms; }
.js .landing.is-ready [data-rise="3"] { animation-delay: 180ms; }
.js .landing.is-ready [data-rise="4"] { animation-delay: 270ms; }
.js .landing.is-ready [data-rise="5"] { animation-delay: 380ms; }

/* Katalog filtre değişimi: kartlar sessizce belirir (kullanıcı eylemine yanıt) */
.catalog-grid.is-updating .course { animation: fade-in 260ms var(--ease) both; }

/* Hesaplayıcı çıktısı güncellendiğinde değer hafifçe vurgulanır */
.is-bumped { animation: fade-in 320ms var(--ease); }

/* Birime yönlendirmede vurgulama halkası */
.unit.is-highlight .unit__icon { animation: pulse-ring 1.2s var(--ease) 2; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .landing [data-rise] { opacity: 1; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; row-gap: var(--s-4); }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track [aria-hidden="true"] { display: none; }
}