/* ==========================================================================
   Alfamedia — animations.css
   Koreografi intro, scroll reveal, dan gerak halus.

   Prinsip:
   - Hanya transform, opacity, dan clip-path yang dianimasikan.
   - Semua state awal hanya berlaku ketika JavaScript aktif (kelas .js).
   - Ada jaring pengaman .is-motion-timeout supaya konten tidak pernah
     tersembunyi permanen bila motion.js gagal dimuat.
   - prefers-reduced-motion mematikan seluruh gerak.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Intro halaman — murni CSS.

   Koreografi pembuka sengaja TIDAK bergantung pada JavaScript: elemen hero
   mulai bergerak begitu CSS selesai diproses, bukan setelah seluruh berkas JS
   diunduh. Ini menjaga waktu tampil teks hero (LCP) tetap cepat dan tetap
   bekerja walau JavaScript gagal dimuat.

   Nilai data-intro pada HTML = jeda mulai dalam milidetik.
   -------------------------------------------------------------------------- */
@keyframes alfa-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

@keyframes alfa-in-mask {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes alfa-in-word {
  from {
    transform: translate3d(0, 108%, 0);
  }
  to {
    transform: none;
  }
}

[data-intro] {
  animation: alfa-in-up var(--duration-reveal) var(--ease-emphasis) both;
}

[data-intro][data-intro-type="fade"] {
  animation-name: alfa-in-fade;
  animation-duration: var(--duration-slow);
}

[data-intro][data-intro-type="mask"] {
  animation-name: alfa-in-mask;
  animation-duration: 900ms;
}

[data-intro="0"] { animation-delay: 0ms; }
[data-intro="90"] { animation-delay: 90ms; }
[data-intro="140"] { animation-delay: 140ms; }
[data-intro="200"] { animation-delay: 200ms; }
[data-intro="240"] { animation-delay: 240ms; }
[data-intro="280"] { animation-delay: 280ms; }
[data-intro="330"] { animation-delay: 330ms; }
[data-intro="400"] { animation-delay: 400ms; }
[data-intro="420"] { animation-delay: 420ms; }
[data-intro="470"] { animation-delay: 470ms; }
[data-intro="560"] { animation-delay: 560ms; }

/* --------------------------------------------------------------------------
   State awal reveal (hanya saat JS aktif)
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

.js [data-reveal="fade-up"] {
  transform: translate3d(0, 18px, 0);
}

.js [data-reveal="fade"] {
  transform: none;
}

.js [data-reveal="line"] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
}

.js [data-reveal="mask"] {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
}

/* Penting: jangan memasang clip-path pada semua elemen yang sudah tampil.
   clip-path memotong apa pun yang menonjol keluar kotak elemen — misalnya
   garis emas navigasi dan garis atas item media. Hanya reveal bertipe "mask"
   yang perlu dikembalikan, dan cukup ke none. */
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.js [data-reveal="mask"].is-revealed {
  clip-path: none;
}

/* Jaring pengaman: bila motion.js tidak sempat berjalan, tampilkan semuanya. */
.js.is-motion-timeout [data-reveal],
.js.is-motion-off [data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: none;
}

/* --------------------------------------------------------------------------
   Headline hero: reveal per kata dengan mask (CSS, tanpa JavaScript)
   -------------------------------------------------------------------------- */
.c-hero__word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  vertical-align: bottom;
}

.c-hero__word > span {
  display: inline-block;
  animation: alfa-in-word 760ms var(--ease-emphasis) both;
}

.c-hero__word:nth-child(1) > span { animation-delay: 90ms; }
.c-hero__word:nth-child(2) > span { animation-delay: 145ms; }
.c-hero__word:nth-child(3) > span { animation-delay: 200ms; }
.c-hero__word:nth-child(4) > span { animation-delay: 255ms; }
.c-hero__word:nth-child(5) > span { animation-delay: 310ms; }
.c-hero__word:nth-child(6) > span { animation-delay: 365ms; }

/* --------------------------------------------------------------------------
   Ambient — hanya dua, keduanya sangat lambat dan tidak mengganggu bacaan.
   1. Anyaman garis diagonal di hero bergeser perlahan.
   2. Dua simpul emas pada jaringan berdenyut halus.
   -------------------------------------------------------------------------- */
@keyframes alfa-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-34px, 22px, 0);
  }
}

.c-hero__weave {
  animation: alfa-drift 42s var(--ease-in-out) infinite alternate;
}

/* Bidang cahaya melayang pelan. Hanya transform, jadi seluruhnya ditangani
   compositor dan tidak memicu layout maupun repaint. */
@keyframes alfa-orb-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-5%, 6%, 0) scale(1.12);
  }
  100% {
    transform: translate3d(3%, -4%, 0) scale(1.04);
  }
}

@keyframes alfa-orb-b {
  0% {
    transform: translate3d(0, 0, 0) scale(1.06);
  }
  50% {
    transform: translate3d(7%, -5%, 0) scale(1);
  }
  100% {
    transform: translate3d(-4%, 3%, 0) scale(1.1);
  }
}

.c-hero__orb--a {
  animation: alfa-orb-a 34s var(--ease-in-out) infinite alternate;
}

.c-hero__orb--b {
  animation: alfa-orb-b 44s var(--ease-in-out) infinite alternate;
}

/* Kisi presisi ikut bergeser sangat pelan, berlawanan arah dengan anyaman,
   sehingga muncul kedalaman berlapis tanpa terasa bergerak-gerak. */
@keyframes alfa-grid-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(19px, -19px, 0);
  }
}

.c-hero::before {
  animation: alfa-grid-drift 76s linear infinite alternate;
}

/* Segitiga low-poly melayang pelan dengan durasi, arah, dan jeda berbeda-beda,
   sehingga polanya tidak pernah terlihat berdenyut serempak. Nilai per
   segitiga diisi js/backdrop.js lewat custom property. */
@keyframes alfa-poly-float {
  from {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.7;
  }
  to {
    transform: translate(var(--poly-x, 2%), var(--poly-y, -2%))
      rotate(var(--poly-rot, 4deg)) scale(var(--poly-scale, 1.06));
    opacity: 1;
  }
}

/* Dijeda secara bawaan; hanya section yang sedang terlihat yang bergerak.
   js/backdrop.js memasang .is-backdrop-active lewat IntersectionObserver. */
.c-backdrop__poly polygon {
  animation: alfa-poly-float var(--poly-dur, 32s) var(--ease-in-out)
    var(--poly-delay, 0s) infinite alternate;
  animation-play-state: paused;
}

.is-backdrop-active .c-backdrop__poly polygon {
  animation-play-state: running;
}

/* Bidang navy dan footer ikut bernapas pelan. */
@keyframes alfa-deep-glow {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(14%, 8%, 0) scale(1.16);
  }
}

.l-section--deep::after,
.c-footer__glow {
  animation: alfa-deep-glow 52s var(--ease-in-out) infinite alternate;
}

.c-footer__glow {
  animation-duration: 62s;
  animation-direction: alternate-reverse;
}

/* --------------------------------------------------------------------------
   Gerak hover halus
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .c-portrait__frame {
    transition: transform var(--duration-slow) var(--ease-emphasis);
  }

  .c-portrait:hover .c-portrait__frame {
    transform: rotate(-0.9deg);
  }

  .c-hero__portraits .c-portrait:nth-child(2):hover .c-portrait__frame {
    transform: rotate(0.9deg);
  }

  .c-portrait:hover .c-portrait__frame img {
    transform: scale(1.025);
  }
}

/* --------------------------------------------------------------------------
   Drawer: stagger tautan saat dibuka
   -------------------------------------------------------------------------- */
@keyframes alfa-drawer-item {
  from {
    opacity: 0;
    transform: translate3d(14px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.c-drawer.is-open .c-drawer__list li {
  animation: alfa-drawer-item var(--duration-slow) var(--ease-emphasis) both;
}

.c-drawer.is-open .c-drawer__list li:nth-child(1) { animation-delay: 90ms; }
.c-drawer.is-open .c-drawer__list li:nth-child(2) { animation-delay: 140ms; }
.c-drawer.is-open .c-drawer__list li:nth-child(3) { animation-delay: 190ms; }
.c-drawer.is-open .c-drawer__list li:nth-child(4) { animation-delay: 240ms; }
.c-drawer.is-open .c-drawer__list li:nth-child(5) { animation-delay: 290ms; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  [data-intro],
  .c-hero__word > span {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .c-hero__weave,
  .c-hero__orb--a,
  .c-hero__orb--b,
  .c-hero::before,
  .c-backdrop__poly polygon,
  .l-section--deep::after,
  .c-footer__glow {
    animation: none;
  }

  /* Pola tetap ada, hanya gerakannya yang dihentikan. */
  .c-backdrop__poly polygon {
    opacity: 0.85;
  }

  .c-portrait:hover .c-portrait__frame,
  .c-portrait:hover .c-portrait__frame img {
    transform: none;
  }

  /* Lightbox tetap berfungsi penuh, hanya muncul tanpa gerak. */
  .c-lightbox__panel {
    transform: none;
  }

  .c-classroom__slot--action:hover img,
  .c-classroom__slot--action:focus-visible img {
    transform: none;
  }
}