/* ==========================================================================
   Motion layer — animasi editorial (terinspirasi gaya "script menulis sendiri",
   garis rute yang menggambar diri, angka slot, kartu hover, objek jatuh masuk).
   Semua state awal tersembunyi hanya aktif jika JS siap (html.motion-ready)
   dan pengguna tidak meminta reduced motion.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* 1. Kata script: "ditulis" dari kiri ke kanan dengan tepi lembut */
  .motion-ready .design-script,
  .motion-ready .hero-script {
    -webkit-mask-image: linear-gradient(90deg, #000 42%, rgba(0,0,0,.35) 50%, transparent 58%);
            mask-image: linear-gradient(90deg, #000 42%, rgba(0,0,0,.35) 50%, transparent 58%);
    -webkit-mask-size: 260% 100%;
            mask-size: 260% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
    opacity: 0;
    /* Ruang untuk tinta huruf Caveat yang menjorok keluar kotak (mask memotong di tepi kotak) */
    padding: .06em .45em .15em .04em;
  }
  .motion-ready .design-script.ink-in,
  .motion-ready .hero-script.ink-in {
    opacity: 1;
    animation: ink-write 1s cubic-bezier(.4,0,.2,1) forwards;
  }
  @keyframes ink-write {
    from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
  }
  /* Script di hero sedikit lebih lambat dan menunggu judul */
  .motion-ready .hero-script.ink-in { animation-duration: 1.2s; animation-delay: .35s; opacity: 1; }

  /* 2. Rute hero: label muncul berurutan, garis menggambar diri, titik oranye tiba di ujung */
  .motion-ready .hero-route > span { opacity: 0; transform: translateY(6px); }
  .motion-ready .hero-route > i { transform: scaleX(0); transform-origin: left center; }
  .motion-ready .hero-route > i::after { opacity: 0; transform: scale(.3); }
  .motion-ready .hero-route.is-drawn > span { animation: route-label .45s ease-out forwards; }
  .motion-ready .hero-route.is-drawn > i { animation: route-line .7s cubic-bezier(.4,0,.2,1) forwards; }
  .motion-ready .hero-route.is-drawn > i::after { animation: route-dot .35s ease-out forwards; }
  .motion-ready .hero-route.is-drawn > span:nth-of-type(1) { animation-delay: .1s; }
  .motion-ready .hero-route.is-drawn > i:nth-of-type(1) { animation-delay: .4s; }
  .motion-ready .hero-route.is-drawn > i:nth-of-type(1)::after { animation-delay: 1s; }
  .motion-ready .hero-route.is-drawn > span:nth-of-type(2) { animation-delay: 1.05s; }
  .motion-ready .hero-route.is-drawn > i:nth-of-type(2) { animation-delay: 1.35s; }
  .motion-ready .hero-route.is-drawn > i:nth-of-type(2)::after { animation-delay: 1.95s; }
  .motion-ready .hero-route.is-drawn > span:nth-of-type(3) { animation-delay: 2s; }
  @keyframes route-label { to { opacity: 1; transform: none; } }
  @keyframes route-line  { to { transform: scaleX(1); } }
  @keyframes route-dot   { to { opacity: 1; transform: scale(1); } }

  /* 3. Angka statistik: efek slot — blur vertikal lalu mengunci */
  .motion-ready #stats-row [data-counter] { display: inline-block; }
  .motion-ready #stats-row [data-counter].is-counting { animation: slot-lock 1.9s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes slot-lock {
    0%   { filter: blur(7px); transform: translateY(14px); opacity: .25; }
    45%  { filter: blur(3px); transform: translateY(5px); opacity: .8; }
    85%  { filter: blur(.6px); transform: translateY(0); opacity: 1; }
    100% { filter: blur(0); transform: none; opacity: 1; }
  }

  /* 4. Kartu hover: naik sedikit, garis tepi gelap, bayangan halus */
  .performance-site .design-framework-grid article,
  .performance-site .bio-gallery figure {
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, outline-color .35s ease;
    outline: 1px solid transparent;
    outline-offset: -1px;
  }
  .performance-site .design-framework-grid article:hover,
  .performance-site .bio-gallery figure:hover {
    transform: translateY(-5px);
    outline-color: #111210;
    box-shadow: 0 18px 32px -16px rgba(17,18,16,.35);
    position: relative; z-index: 1;
  }

  /* 5. Objek jatuh masuk: foto galeri dan kata BUILD. turun dengan rotasi kecil */
  .motion-ready .bio-gallery figure { opacity: 0; transform: translateY(-26px) rotate(-3deg); }
  .motion-ready .bio-gallery figure.drop-in { animation: drop-in .8s cubic-bezier(.34,1.4,.64,1) forwards; animation-delay: calc(var(--i, 0) * .12s); }
  .motion-ready .bio-gallery figure:nth-child(even) { transform: translateY(-26px) rotate(3deg); }
  .motion-ready .bio-photo-word { opacity: 0; transform: translateY(-40px) rotate(-4deg); }
  .motion-ready .bio-photo-word.drop-in { animation: drop-in .9s cubic-bezier(.34,1.4,.64,1) forwards; }
  @keyframes drop-in { to { opacity: 1; transform: none; } }
}

/* ==========================================================================
   Lanjutan motion layer — section yang sebelumnya statis.
   Elemen diberi kelas .is-in oleh motion.js; --d = jeda bertahap per batch.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* 7. Insight: garis tiap baris menggambar diri, lalu nomor–judul–teks menyusul */
  .motion-ready .insight-item { position: relative; border-top-color: transparent; }
  .motion-ready .insight-item::before {
    content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: #deded8;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .9s cubic-bezier(.4,0,.2,1) var(--d,0s), background-color .35s ease;
  }
  .motion-ready .insight-item.is-in::before { transform: scaleX(1); }
  .motion-ready .insight-item.is-in:hover::before { background: #111210; }
  .motion-ready .insight-item > * { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .motion-ready .insight-item.is-in > * { opacity: 1; transform: none; }
  .motion-ready .insight-item.is-in > :nth-child(1) { transition-delay: calc(var(--d,0s) + .2s); }
  .motion-ready .insight-item.is-in > :nth-child(2) { transition-delay: calc(var(--d,0s) + .32s); }
  .motion-ready .insight-item.is-in > :nth-child(3) { transition-delay: calc(var(--d,0s) + .44s); }

  /* Panel gelap insight: dibuka dari kiri seperti tirai, isi menyusul */
  /* clip-path hanya dipakai di dalam animation: clip-path statis pada elemen yang diamati
     membuat IntersectionObserver menganggapnya tak terlihat, sehingga .is-in tak pernah ditambahkan. */
  .motion-ready .insight-bridge:not(.is-in) { opacity: 0; }
  .motion-ready .insight-bridge.is-in { animation: bridge-wipe 1s cubic-bezier(.65,0,.35,1) var(--d,0s) backwards; }
  @keyframes bridge-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
  .motion-ready .insight-bridge > * { opacity: 0; transform: translateX(-12px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .motion-ready .insight-bridge.is-in > * { opacity: 1; transform: none; transition-delay: calc(var(--d,0s) + .6s); }

  /* 8. Foto gallery & workshop: tirai naik dari bawah, gambar "mengendap" dari zoom.
     Pakai animation (tanpa fill forwards) agar efek hover zoom tetap berfungsi setelahnya. */
  .motion-ready :is(.proof-grid,.workshop-grid) figure:not(.is-in) > :is(button,a) { clip-path: inset(100% 0 0 0); }
  .motion-ready :is(.proof-grid,.workshop-grid) figure:not(.is-in) figcaption { opacity: 0; }
  .motion-ready :is(.proof-grid,.workshop-grid) figure.is-in > :is(button,a) { animation: photo-wipe 1s cubic-bezier(.65,0,.35,1) var(--d,0s) backwards; }
  .motion-ready :is(.proof-grid,.workshop-grid) figure.is-in img { animation: photo-settle 1.4s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards; }
  .motion-ready :is(.proof-grid,.workshop-grid) figure.is-in figcaption { animation: caption-in .6s ease calc(var(--d,0s) + .55s) backwards; }
  @keyframes photo-wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
  @keyframes photo-settle { from { transform: scale(1.14); } to { transform: none; } }
  @keyframes caption-in { from { opacity: 0; transform: translateY(6px); } }

  /* 9. Kolom audience & blok signup: naik bertahap */
  .motion-ready :is(.audience-profile,.signup-presenter,.signup-panel):not(.is-in) { opacity: 0; }
  .motion-ready :is(.audience-profile,.signup-presenter,.signup-panel).is-in { animation: rise-in .8s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards; }
  @keyframes rise-in { from { opacity: 0; transform: translateY(24px); } }

  /* 10. FAQ: ikon plus berputar, jawaban turun halus saat dibuka */
  .signup-plus::after { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .signup-questions details[open] > p { animation: faq-open .45s cubic-bezier(.2,.7,.2,1); }
  @keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }

  /* 11. Panah ↗ di tombol CTA bergeser ke arah tujuannya saat hover/fokus */
  :is(.insight-cta,.audience-cta,.journey-cta,.system-cta,.footer-cta-btn,.signup-submit,.signup-faq-cta,.modal-submit-btn,.bio-action a) > span:last-child {
    display: inline-block; transition: transform .25s cubic-bezier(.2,.7,.2,1);
  }
  :is(.insight-cta,.audience-cta,.journey-cta,.system-cta,.footer-cta-btn,.signup-submit,.signup-faq-cta,.modal-submit-btn,.bio-action a):is(:hover,:focus-visible) > span:last-child {
    transform: translate(3px,-3px);
  }
}