/* ============ STICKY TEXT GALLERY ============
   Nilai di berkas ini hasil ukur, disalin apa adanya dari sumber.
   Yang berubah hanya nama kelas, jadi blok
   .section-sticky-text-gallery.

   PERINGATAN pemasangan, ini yang paling gampang bikin section
   terlihat hilang. Section ini memakai z-index -1 supaya menyelip di
   bawah section di atasnya. Background sebuah elemen block dilukis
   SESUDAH anak ber-z-index negatif, jadi background halaman WAJIB
   duduk di body, bukan di pembungkus yang memuat section ini. Kalau
   <main> atau pembungkus lain punya background sendiri, dia menutupi
   section ini sepenuhnya: terlihat seperti section hilang padahal
   animasinya jalan.

   Jumlah slot media disetel dari markup lewat --count di elemen
   section, karena tinggi section dihitung dari angka itu. */

/* --- StickyTextGallery ----------------------------------------
   Tinggi dari rumus, bukan angka tetap:
     screen*(count+1) + gap*count,  gap = screen*0.25
   Terukur @720 count 2: 720*3 + 180*2 = 2520. */
.section-sticky-text-gallery {
  --screen: 100svh;
  --gap: calc(var(--screen) * 0.25);
  position: relative;
  /* margin-top negatif plus z-index -1: section ini sengaja MENIMPA
     section di atasnya. Terukur -180px @720. */
  margin-top: calc(var(--screen) * -0.25);
  z-index: -1;
  height: calc(var(--screen) * (var(--count) + 1) + var(--gap) * var(--count));
}
@media (max-width: 1023.98px) {
  .section-sticky-text-gallery {
    height: calc(var(--screen) * (var(--count) + 1) + var(--gap) * (var(--count) - 1));
    /* Terukur: tumpangannya di mobile cuma screen*-0.1, bukan -0.25. */
    margin-top: calc(var(--screen) * -0.1);
  }
}

.section-sticky-text-gallery__sticky {
  position: sticky;
  top: 0;
  height: var(--screen);
  display: grid;
  place-items: center;
}
/* Terukur: text-wrap juga grid place-items center, sama seperti
   pembungkus sticky-nya, bukan blok biasa. */
.section-sticky-text-gallery__text-wrap {
  display: grid;
  place-items: center;
  text-align: center;
}
.section-sticky-text-gallery__heading {
  margin: 0 0 4.8rem;
  /* 20 kolom + 19 gutter = 1004.57px @1280 */
  max-width: calc(20 * var(--col) + 19 * var(--gutter));
}
.section-sticky-text-gallery__desc {
  margin: 0 auto;
  /* Warna #141414, BUKAN #515151. Deskripsi section ini satu-satunya
     paragraf pendukung di homepage yang memakai warna teks penuh. */
  color: var(--black);
  /* 10 kolom + 9 gutter = 493.72px @1280 */
  max-width: calc(10 * var(--col) + 9 * var(--gutter));
}
@media (max-width: 1023.98px) {
  .section-sticky-text-gallery__heading,
  .section-sticky-text-gallery__desc { max-width: calc(10 * var(--col) + 9 * var(--gutter)); }
  /* Terukur: 2.4rem di mobile, 4.8rem baru mulai 1024. */
  .section-sticky-text-gallery__heading { margin-bottom: 2.4rem; }
}

.section-sticky-text-gallery__gallery-wrap {
  position: absolute;
  top: var(--screen);
  left: 0;
  width: 100%;
  padding: calc(var(--screen) * 0.2) 0 5%;
  /* clip, BUKAN hidden. `hidden` membuat scroll container, dan timeline
     view() mengukur visibilitas terhadap scroller TERDEKAT. Dengan
     hidden, item tidak pernah bergerak relatif ke container itu, jadi
     progres animasinya konstan dan rotasinya beku. `clip` memotong
     sama persis tapi tidak membuat scroll container. */
  overflow: clip;
}
.section-sticky-text-gallery__gallery-inner {
  width: calc(20 * var(--col) + 19 * var(--gutter));
  margin: 0 auto;
}
.section-sticky-text-gallery__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Ukuran item murni rem, bukan kelipatan kolom. Terukur 42.6 x 55.8rem.
   TANPA border-radius dan TANPA overflow. Terukur 0px di item, di
   pembungkus gambar, dan di img-nya. Sudutnya memang tajam. */
.section-sticky-text-gallery__item {
  position: relative;
  width: 42.6rem;
  height: 55.8rem;
  /* Rotasi scroll-driven. ponytail: pakai animation-timeline: view()
     bawaan CSS, bukan listener scroll di JS. Kalau browser belum
     mendukung, item tampil statis tanpa rotasi, tidak rusak.

     JANGAN pakai shorthand `animation` di sini. Shorthand menyetel
     animation-duration ke 0s, dan dengan timeline scroll itu bikin
     animasinya BEKU di satu nilai: terdaftar, playState running, tapi
     transform tidak pernah berubah sepanjang scroll. Terlihat persis
     seperti animasi yang tidak ada. Duration wajib `auto`. */
  animation-name: section-sticky-text-gallery-rotate;
  animation-duration: auto;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}
/* Terukur: item genap rapat ke kanan, item ganjil mulai dari item ke-3
   ke tengah, item genap mulai dari ke-4 balik ke kiri. */
.section-sticky-text-gallery__item:nth-of-type(2n) { margin-left: auto; }
.section-sticky-text-gallery__item:nth-of-type(2n + 3) { margin: 0 auto; }
.section-sticky-text-gallery__item:nth-of-type(2n + 4) { margin-left: 0; }

/* Terukur di scroll berbeda: rotasinya TIDAK melewati nol dari negatif
   ke positif, dan tidak ada geser vertikal (matrix e dan f keduanya 0).
   Item masuk miring lalu menegak:
     item ganjil  12.52deg -> -1.38deg
     item genap   19.03deg ->  2.35deg
   Sudutnya lewat custom property supaya cukup satu set keyframe. */
.section-sticky-text-gallery__item { --rot-from: 12.5deg; --rot-to: -1.4deg; }
.section-sticky-text-gallery__item:nth-of-type(2n) { --rot-from: 19deg; --rot-to: 2.4deg; }
@keyframes section-sticky-text-gallery-rotate {
  from { transform: rotate(var(--rot-from)); }
  to   { transform: rotate(var(--rot-to)); }
}
.section-sticky-text-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1023.98px) {
  /* Terukur: di mobile gallery-inner selebar grid, bukan 10 kolom. */
  .section-sticky-text-gallery__gallery-inner { width: var(--grid-width); }
  .section-sticky-text-gallery__item { width: 21.6rem; height: 28.3rem; }
}