/* ==========================================================================
   NOVA BALO & DAVET — Hareket katmanı
   İlke: yalnızca transform + opacity animasyonlanır (compositor'da çalışır,
   yeniden yerleşim/CLS üretmez). Her efekt prefers-reduced-motion ile kapanır.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kaydırmayla ortaya çıkma (IntersectionObserver ile .is-visible eklenir)
   -------------------------------------------------------------------------- */

/* İlerlemeli geliştirme: gizleme YALNIZCA JS çalışıyorsa uygulanır.
   JS engellenmiş/hatalıysa .js sınıfı hiç eklenmez ve içerik tam görünür kalır.
   Böylece animasyon sistemi hiçbir koşulda içeriği gizli bırakamaz. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Animasyon bittiğinde will-change'i bırak — bellek/katman israfını önler */
[data-reveal].is-settled { will-change: auto; }

/* Yön çeşitleri */
.js [data-reveal="left"]  { transform: translate3d(-34px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(34px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal="fade"]  { transform: none; }

.js [data-reveal="left"].is-visible,
.js [data-reveal="right"].is-visible { transform: translate3d(0, 0, 0); }
.js [data-reveal="scale"].is-visible { transform: scale(1); }

/* Görsel maskesi: fotoğraf alttan yukarı "açılır" (kırpma ile, yerleşim sabit) */
.js [data-reveal="mask"] {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: none;
  transition: clip-path 1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal="mask"].is-visible { clip-path: inset(0 0 0 0); }

/* --------------------------------------------------------------------------
   2. Sıralı gecikme (stagger) — liste/ızgara öğeleri 60ms arayla girer
   -------------------------------------------------------------------------- */

[data-stagger] > * { --reveal-delay: 0ms; }
[data-stagger] > *:nth-child(1) { --reveal-delay: 0ms; }
[data-stagger] > *:nth-child(2) { --reveal-delay: 70ms; }
[data-stagger] > *:nth-child(3) { --reveal-delay: 140ms; }
[data-stagger] > *:nth-child(4) { --reveal-delay: 210ms; }
[data-stagger] > *:nth-child(5) { --reveal-delay: 280ms; }
[data-stagger] > *:nth-child(6) { --reveal-delay: 350ms; }

/* --------------------------------------------------------------------------
   3. Hero girişi — sayfa açılışında tek seferlik koreografi
   -------------------------------------------------------------------------- */

@keyframes nova-rise {
  from { opacity: 0; transform: translate3d(0, 40px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

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

@keyframes nova-veil {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

@keyframes nova-line {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Hero arka planı yavaşça "nefes alır" gibi yaklaşır.
   Poster ve video AYNI anda, aynı süreyle ölçeklenir: ikisi de sayfa
   başında render edildiği için animasyon saatleri ortaktır. Video sonradan
   görünür hâle gelse bile posterle birebir aynı ölçekte olur, geçişte
   sıçrama görülmez. */
.hero__media img,
.hero__media video {
  animation: nova-veil 2.4s var(--ease-out) both;
}

/* Harfler tek tek, kısa arayla yükselir — kompozisyon "kurulurken" izlenir */
@keyframes nova-letter {
  from { opacity: 0; transform: translate3d(0, 0.38em, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.hero__l       { animation: nova-letter 0.95s var(--ease-luxe) both; }
.hero__l--n    { animation-delay: 0.12s; }
.hero__l--o    { animation-delay: 0.24s; }
.hero__l--v    { animation-delay: 0.34s; }
.hero__l--a    { animation-delay: 0.44s; }

.hero__word--2 { animation: nova-rise 1.15s var(--ease-out) 0.58s both; }
.hero__crest   { animation: nova-fade 1.1s var(--ease-out) 0.86s both; }
.hero__caption { animation: nova-rise 1s   var(--ease-out) 1.02s both; }
.hero__scroll  { animation: nova-fade 1s   var(--ease-out) 1.3s both; }

/* Kaydırma göstergesinin ince çizgisi sürekli akar */
@keyframes nova-scroll-hint {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.hero__scroll-line::after {
  animation: nova-scroll-hint 2.6s var(--ease-soft) infinite;
}

/* --------------------------------------------------------------------------
   4. Sonsuz kayan şerit (marquee) — basında/etiket şeridi
   -------------------------------------------------------------------------- */

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

.marquee__track {
  animation: nova-marquee var(--marquee-duration, 42s) linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;   /* okumak isteyen kullanıcı için durur */
}

/* --------------------------------------------------------------------------
   5. Mikro etkileşimler
   -------------------------------------------------------------------------- */

/* Görsel kartlarda yumuşak yakınlaşma — sadece transform */
.zoom-frame { overflow: hidden; }

.zoom-frame img {
  transition: transform 900ms var(--ease-out);
}

.zoom-frame:hover img,
.zoom-frame:focus-within img { transform: scale(1.055); }

/* Basıldığında hafif küçülme geri bildirimi */
.btn:active,
.venue-card:active { transform: scale(0.985); }

/* Lightbox girişi */
@keyframes nova-lightbox-in {
  from { opacity: 0; transform: scale(0.965); }
  to   { opacity: 1; transform: scale(1); }
}

.lightbox[open] .lightbox__figure {
  animation: nova-lightbox-in var(--dur-slow) var(--ease-out) both;
}

.lightbox[open] { animation: nova-fade var(--dur-base) var(--ease-out) both; }

/* SSS açılır panel — yükseklik yerine grid-template-rows animasyonu (reflow yok) */
/* Panelin yuksekligini <details> ogesinin KENDISI uzerinden JS animasyonlar
   (js/motion.js). Buraya bir gecis (transition) KOYULMAZ: <details> kapaliyken
   icerigini hic render etmez, dolayisiyla acilista gecisin baslayacagi bir
   durum yoktur ve animasyon calismaz — kutu aninda acilir. Kapanista ise
   tarayici icerigi 'open' kalkar kalkmaz kaldirir; gecise hic firsat kalmaz.
   Asagidaki 0fr/1fr yalnizca JS'siz durum icindir (aninda ama calisir). */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
}

.faq__item[open] .faq__panel { grid-template-rows: 1fr; }

.faq__panel > div { overflow: hidden; }

.faq__icon { transition: transform var(--dur-slow) var(--ease-out); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }

/* Form gönderim göstergesi */
@keyframes nova-spin { to { transform: rotate(360deg); } }

.btn__spinner { animation: nova-spin 720ms linear infinite; }

/* Başarı bildirimi girişi */
@keyframes nova-toast-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.form__status[data-state="success"],
.form__status[data-state="error"] {
  animation: nova-toast-in var(--dur-slow) var(--ease-out) both;
}

/* --------------------------------------------------------------------------
   6. Hareket azaltma tercihi — TÜM hareket burada geri alınır
   Kullanıcı sistem ayarında "hareketi azalt" seçtiyse içerik anında,
   tam görünür ve tamamen kullanılabilir hâlde gelir.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  /* Ortaya çıkma efektleri: gizli kalma riski olmadan tamamen görünür */
  .js [data-reveal],
  .js [data-reveal].is-visible,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* Sürekli dönen/kayan hareketler tamamen dursun */
  .marquee__track { animation: none !important; transform: none !important; }
  .hero__scroll-line::after { animation: none !important; transform: scaleY(1) !important; }
  /* Video zaten hiç yüklenmez (js/hero-video.js erkenden çıkar); bu kural
     posteri ve olası bir artık <video> öğesini sabitler. */
  .hero__media img,
  .hero__media video { animation: none !important; transform: none !important; }

  .zoom-frame:hover img,
  .zoom-frame:focus-within img { transform: none !important; }

  /* Paralaks tamamen kapanır (JS de bunu okur) */
  [data-parallax] { transform: none !important; }
}