/* src/styles/scroll-fx.css */
/* ===========================================================
   İSM Haşere — "Çalışma yöntemimiz" scrollytelling
   ---------------------------------------------------------
   Solda 4 adım, sağda tek sahne kutusu. Sahnede aynı mekânda
   çekilmiş 4 kare üst üste durur, scroll ile geçiş yaparlar.

   KURAL 1: Fotoğrafın önüne dekor konmaz. Sahne kutusu sabit
   oranlı (4:3, karelerle birebir aynı); fotoğraflar mutlak
   konumlu ve object-fit:cover. Geçişlerde layout shift olmaz.

   KURAL 2: Pin edilen eleman (.spray-stage) düz bir blok kabın
   (.wrap) tek çocuğudur. Grid PANELİN İÇİNDE kalır; pin edilen
   elemanın kendisi asla grid/flex hücresi değildir.

   KURAL 3 (frontend-design): hareket tek yerde toplanır.
   Bölüm reveal'ları, kart hover'ları ve ilerleme çubuğu yok.
   =========================================================== */

.spray-stage {
  position: relative;
}

.method {
  position: relative;
}

.pm-head {
  margin-bottom: 28px;
}

/* --- İki sütun: solda adımlar, sağda sahne --------------- */
.pm-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  column-gap: 44px;
  row-gap: 28px;
  align-items: center;
}

.pm-steps {
  min-width: 0;
}

/* --- Adım listesi ---------------------------------------- */
/* Sönükleşme yalnızca sekans çalışırken (.is-scrubbing) geçerli;
   dışında adımlar her zaman tam okunur. */
.step {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.method.is-scrubbing .step {
  opacity: 0.4;
}

.method.is-scrubbing .step.is-done {
  opacity: 0.62;
}

.method.is-scrubbing .step.is-active {
  opacity: 1;
  transform: translateX(5px);
}

.step-n {
  transition: background-color 0.4s ease, color 0.4s ease,
              box-shadow 0.4s ease, border-color 0.4s ease;
}

.method.is-scrubbing .step.is-active .step-n {
  background-color: hsl(0, 0%, 100%);
  border-color: hsl(0, 0%, 100%);
  color: var(--brand-dark, hsl(159, 93%, 23%));
  box-shadow: 0 0 0 7px hsla(0, 0%, 100%, 0.15);
}

/* --- Sahne kutusu ---------------------------------------- */
/* Fotoğrafın üstünde perde YOK. Kutuyu panele bağlayan tek şey
   ince bir kenar çizgisi. */
.pm-scene {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: hsla(160, 60%, 10%, 0.4);
  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.18);
}

.pm-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity, transform;
}

/* JS çalışmazsa ilk kare görünür kalır */
.pm-shot:first-child {
  opacity: 1;
}

/* Masaüstünde geçişi scroll sürer (her kare JS yazar), bu yüzden
   CSS geçişi YOK. Mobilde adım adım ilerlediği için açılır. */
.pm-scene.is-stepped .pm-shot {
  transition: opacity 0.55s ease, transform 0.55s ease;
}

/* --- Erişilebilirlik: hareket azaltma --------------------- */
/* Sekans kurulmaz; ilk kare durur, adımların hepsi tam okunur. */
@media (prefers-reduced-motion: reduce) {
  .method.is-scrubbing .step,
  .method.is-scrubbing .step.is-done,
  .method.is-scrubbing .step.is-active {
    opacity: 1;
    transform: none;
  }

  .pm-scene.is-stepped .pm-shot,
  .step,
  .step-n {
    transition: none !important;
  }
}

/* --- Mobil: pin yok, doğal dikey akış -------------------- */
/* Sahne üstte, adımlar altında. Sahne, ekranın ortasına gelen
   adımın karesine geçer. Yapay scroll alanı yok. */
@media (max-width: 900px) {
  .pm-grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .pm-scene {
    order: -1;
  }
}

@media (max-width: 640px) {
  .pm-head {
    margin-bottom: 20px;
  }

  .pm-scene {
    border-radius: 14px;
  }
}