/* =============================================================================
   Sahabat Anoa — Landing page fluid layer
   Scope: HANYA body[data-landing] (14-public-landing.html). Tidak menyentuh layar lain.
   Tujuan: menghidupkan interaksi (motion) dan memberi kedalaman (depth) tanpa
   mengubah struktur/alur. Semua efek dimatikan oleh prefers-reduced-motion.
   ========================================================================== */

body[data-landing] {
  --fluid-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fluid-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fluid-ink: #08090a;
  --fluid-mint: #0a774f;
  --fluid-mint-soft: rgba(12, 140, 94, 0.16);
  --fluid-hairline: rgba(8, 9, 10, 0.07);
  --fluid-shadow-1: 0 1px 2px rgba(8, 9, 10, 0.06), 0 6px 16px -6px rgba(8, 9, 10, 0.12);
  --fluid-shadow-2: 0 2px 6px rgba(8, 9, 10, 0.06), 0 24px 52px -20px rgba(8, 9, 10, 0.28);
  --fluid-shadow-3: 0 6px 16px rgba(8, 9, 10, 0.08), 0 44px 90px -34px rgba(8, 9, 10, 0.38);
  --fluid-ring: 0 0 0 4px rgba(12, 140, 94, 0.18);
}

/* ---------------------------------------------------------------------------
   1. Scroll progress + sticky header states
   ------------------------------------------------------------------------ */
#anoa-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--fluid-mint);
  z-index: 80;
  transition: transform 90ms linear;
  pointer-events: none;
}

body[data-landing] header.fixed {
  transition: box-shadow 320ms var(--fluid-ease), background-color 320ms var(--fluid-ease);
  background-image: none;
}
body[data-landing] header.fixed:not(.is-over-hero) .font-label-bold,
body[data-landing] header.fixed:not(.is-over-hero) nav[data-active-classes] a,
body[data-landing] header.fixed:not(.is-over-hero) nav[data-active-classes] a:hover {
  color: #08090a;
}
body[data-landing] header.fixed.is-scrolled {
  box-shadow: 0 1px 0 var(--fluid-hairline), 0 10px 30px -20px rgba(8, 9, 10, 0.45);
}
body[data-landing] #hero > div:first-of-type {
  padding-top: 96px;
}

/* Header transparan TOTAL selama masih menempel pada ilustrasi hero (kelas is-over-hero
   dipasang landing-fluid.js). Ilustrasi hero bertema teal gelap: teks putih terukur
   5.6–5.9:1 tanpa scrim. Begitu hero lewat, kelas dilepas dan header kembali putih. */
/* Saat header masih menempel pada hero, SELURUH tautan navigasi wajib putih —
   termasuk tautan yang sedang aktif/aria-current atau terkena hover/focus. Tanpa
   aturan ini, kelas aktif dari layar (mis. text-primary) bisa menang dan teks hijau
   tenggelam di atas ilustrasi teal. */
body[data-landing] header.fixed.is-over-hero nav[data-active-classes] a,
body[data-landing] header.fixed.is-over-hero nav[data-active-classes] a:hover,
body[data-landing] header.fixed.is-over-hero nav[data-active-classes] a:focus,
body[data-landing] header.fixed.is-over-hero nav[data-active-classes] a[aria-current] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}
body[data-landing] .is-over-hero {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}
body[data-landing] header.fixed.is-over-hero a[data-path="akses-sekolah"] {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.85);
  background-color: transparent;
}
body[data-landing] header.fixed.is-over-hero a[data-path="akses-sekolah"]:hover {
  background-color: rgba(255, 255, 255, 0.16);
}
body[data-landing] header.fixed.is-over-hero details summary {
  background-color: #f0f8f5;
  color: #0a774f;
}
body[data-landing] header.fixed.is-over-hero div.bg-primary {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
body[data-landing] header.fixed.is-over-hero img {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
}
body[data-landing] header.fixed > div {
  transition: height 320ms var(--fluid-ease);
}
body[data-landing] header.fixed.is-scrolled > div {
  height: 56px;
}
body[data-landing] header.fixed a,
body[data-landing] header.fixed img {
  transition: color 220ms var(--fluid-ease), transform 320ms var(--fluid-spring), opacity 220ms;
}
body[data-landing] header.fixed img:hover {
  transform: scale(1.06) rotate(-2deg);
}

/* Nav underline grows from the left; current section keeps it visible. */
body[data-landing] header nav a {
  position: relative;
  padding-bottom: 2px;
}
body[data-landing] header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--fluid-mint);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms var(--fluid-ease);
}
body[data-landing] header nav a:hover::after,
body[data-landing] header nav a:focus-visible::after,
body[data-landing] header nav a.is-current::after {
  transform: scaleX(1);
}
body[data-landing] header nav a.is-current {
  color: var(--fluid-mint);
}

/* ---------------------------------------------------------------------------
   2. Hero — entrance, light bloom, slow drift, depth
   ------------------------------------------------------------------------ */
body[data-landing] #hero {
  isolation: isolate;
}
/* Bloom sangat halus: memberi dimensi pada bidang teal, bukan gradien dekoratif. */
body[data-landing] #hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 80%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
  z-index: 0;
}
body[data-landing] #hero > img {
  will-change: transform;
  transform: scale(1.04);
  transition: transform 120ms linear;
  /* Ujung bawah ilustrasi melebur ke kanvas putih, sehingga karakter tidak terpotong keras.
     Fade hanya di 5% terakhir agar karakter tidak terlihat transparan. */
  -webkit-mask-image: linear-gradient(to bottom, #000 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 95%, transparent 100%);
}
body[data-landing] #hero > .relative {
  z-index: 1;
}

@keyframes anoa-hero-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
body[data-landing] #hero > .relative > * {
  animation: anoa-hero-in 760ms var(--fluid-ease) both;
}
body[data-landing] #hero > .relative > *:nth-child(1) { animation-delay: 40ms; }
body[data-landing] #hero > .relative > *:nth-child(2) { animation-delay: 110ms; }
body[data-landing] #hero > .relative > *:nth-child(3) { animation-delay: 180ms; }
body[data-landing] #hero > .relative > *:nth-child(4) { animation-delay: 250ms; }
body[data-landing] #hero > .relative > *:nth-child(5) { animation-delay: 310ms; }
body[data-landing] #hero > .relative > *:nth-child(6) { animation-delay: 370ms; }
body[data-landing] #hero > .relative > *:nth-child(7) { animation-delay: 430ms; }

/* CTA: kontainer putih terangkat, tombol punya sheen + arrow slide. */
body[data-landing] #hero-cta > div {
  box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 255, 255, 0.35) inset;
  transition: box-shadow 320ms var(--fluid-ease), transform 320ms var(--fluid-ease);
}
body[data-landing] #hero-cta:focus-within > div {
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 20px 44px -16px rgba(0, 0, 0, 0.5);
}
body[data-landing] #hero-cta input {
  transition: background-color 220ms var(--fluid-ease), box-shadow 220ms var(--fluid-ease);
}
body[data-landing] #hero-cta input:focus {
  background: #f7fbf9;
  box-shadow: inset 0 0 0 2px rgba(12, 140, 94, 0.35);
}
body[data-landing] #hero-etika {
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.55);
  transition: transform 320ms var(--fluid-ease), box-shadow 320ms var(--fluid-ease);
}
body[data-landing] #hero-etika:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -18px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------------------
   3. Primary buttons & links — lift, press, sheen, arrow
   ------------------------------------------------------------------------ */
body[data-landing] button,
body[data-landing] a.bg-primary-container,
body[data-landing] #kode-sesi button,
body[data-landing] #kode-sesi a.bg-primary-container {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 200ms var(--fluid-ease), box-shadow 280ms var(--fluid-ease),
    background-color 220ms var(--fluid-ease), color 220ms var(--fluid-ease);
}
body[data-landing] button::after,
body[data-landing] a.bg-primary-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.18) 48%, transparent 66%);
  transform: translateX(-130%);
  transition: transform 620ms var(--fluid-ease);
  pointer-events: none;
  z-index: -1;
}
body[data-landing] .material-symbols-outlined {
  transition: transform 280ms var(--fluid-spring);
}
body[data-landing] button:hover,
body[data-landing] a.bg-primary-container:hover {
  transform: translateY(-2px);
  box-shadow: var(--fluid-shadow-2);
}
body[data-landing] button:hover::after,
body[data-landing] a.bg-primary-container:hover::after {
  transform: translateX(130%);
}
body[data-landing] button:hover .material-symbols-outlined,
body[data-landing] a.bg-primary-container:hover .material-symbols-outlined {
  transform: translateX(3px);
}
body[data-landing] #emosi .grid > div:hover .material-symbols-outlined {
  transform: translateY(-1px) scale(1.08);
}
body[data-landing] button:active,
body[data-landing] a.bg-primary-container:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 90ms;
}

/* Ghost / underlined links get a sliding underline instead of a hard color flip. */
body[data-landing] #hero a.underline,
body[data-landing] footer a {
  position: relative;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: transform 240ms var(--fluid-ease), opacity 240ms var(--fluid-ease);
}
body[data-landing] footer a:hover {
  transform: translateX(3px);
}
body[data-landing] #hero a.underline:hover {
  transform: translateY(-1px);
}

/* Universal, visible keyboard focus (never removed). */
body[data-landing] a:focus-visible,
body[data-landing] button:focus-visible,
body[data-landing] input:focus-visible {
  outline: 2px solid var(--fluid-mint);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   4. Mockup — float, tilt, layered depth
   ------------------------------------------------------------------------ */
@keyframes anoa-mockup-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}
body[data-landing] #hero-mockup {
  animation: anoa-mockup-float 8s ease-in-out 1.1s infinite;
}
body[data-landing] #hero-mockup > div {
  border: 1px solid var(--fluid-hairline);
  box-shadow: 0 1px 2px rgba(8, 9, 10, 0.06), 0 18px 36px -18px rgba(8, 9, 10, 0.30),
    0 44px 90px -34px rgba(8, 9, 10, 0.38);
  transform-style: preserve-3d;
  transition: box-shadow 420ms var(--fluid-ease), transform 260ms var(--fluid-ease);
  will-change: transform;
}
body[data-landing] #hero-mockup:hover > div {
  box-shadow: 0 6px 14px rgba(8, 9, 10, 0.07), 0 48px 90px -32px rgba(8, 9, 10, 0.38);
}
body[data-landing] #hero-mockup .h-1\.5 > div {
  transition: width 900ms var(--fluid-ease) 500ms;
}

/* ---------------------------------------------------------------------------
   5. Section bands + cards — depth, hover lift, reveal
   ------------------------------------------------------------------------ */
body[data-landing] #kode-sesi > div,
body[data-landing] #emosi .grid > div,
body[data-landing] #peran .grid > div,
body[data-landing] #etika .grid > div,
body[data-landing] #emosi + section > div {
  border: 1px solid var(--fluid-hairline);
  box-shadow: var(--fluid-shadow-1);
  transition: transform 380ms var(--fluid-ease), box-shadow 380ms var(--fluid-ease),
    border-color 380ms var(--fluid-ease);
}
body[data-landing] #kode-sesi > div,
body[data-landing] #emosi + section > div {
  box-shadow: var(--fluid-shadow-2);
  background-color: #fbfdfc;
}
body[data-landing] #emosi .grid > div,
body[data-landing] #peran .grid > div,
body[data-landing] #etika .grid > div {
  height: 100%;
}
/* Teks isi tumbuh, sehingga footer kartu selalu sejajar di dasar kartu. */
body[data-landing] #emosi .grid > div > div:nth-child(2) {
  flex: 1 1 auto;
}
body[data-landing] #emosi .grid > div:hover,
body[data-landing] #peran .grid > div:hover,
body[data-landing] #etika .grid > div:hover {
  transform: translateY(-6px);
  box-shadow: var(--fluid-shadow-2);
  border-color: rgba(12, 140, 94, 0.30);
}
body[data-landing] #emosi .grid > div:hover img {
  transform: scale(1.045) rotate(-0.6deg);
}
body[data-landing] #emosi .grid img {
  transition: transform 620ms var(--fluid-ease);
}

/* Role cards: accent line sweeps across the top on hover. */
body[data-landing] #peran .grid > div {
  position: relative;
}
body[data-landing] #peran .grid > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--fluid-mint);
  border-radius: 0 3px 3px 0;
  transition: width 520ms var(--fluid-ease);
}
body[data-landing] #peran .grid > div:hover::before {
  width: 100%;
}

/* Process step badges: gentle pulse ring on hover. */
body[data-landing] #etika .grid > div > div:first-child > span:first-child {
  transition: transform 380ms var(--fluid-spring), box-shadow 320ms var(--fluid-ease);
}
body[data-landing] #etika .grid > div:hover > div:first-child > span:first-child {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px var(--fluid-mint-soft);
}

/* Section eyebrow rule stretches subtly as its section arrives. */
body[data-landing] #emosi span.h-0\.5,
body[data-landing] #peran span.h-0\.5,
body[data-landing] #etika span.h-0\.5 {
  transition: width 520ms var(--fluid-ease);
}
body[data-landing] #emosi.is-visible span.h-0\.5,
body[data-landing] #peran.is-visible span.h-0\.5,
body[data-landing] #etika.is-visible span.h-0\.5 {
  width: 40px;
}

/* ---------------------------------------------------------------------------
   6. Scroll reveal (progressive enhancement: tanpa JS elemen tetap terlihat)
   ------------------------------------------------------------------------ */
body[data-landing] [data-fluid-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.988);
  transition: opacity 720ms var(--fluid-ease) var(--fluid-delay, 0ms),
    transform 720ms var(--fluid-ease) var(--fluid-delay, 0ms);
  will-change: opacity, transform;
}
body[data-landing] [data-fluid-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------------
   7. Header + mobile polish (fluid, bukan sekadar mengecil)
   ------------------------------------------------------------------------ */
body[data-landing] header a[data-path="masuk-sekolah"],
body[data-landing] header details > summary {
  border-radius: 4px;
}
body[data-landing] header details > summary {
  transition: background-color 220ms var(--fluid-ease), color 220ms var(--fluid-ease),
    transform 220ms var(--fluid-ease);
}
body[data-landing] header details > summary:hover {
  transform: translateY(-1px);
}
body[data-landing] header > div > div:last-child > div:last-child {
  transition: transform 320ms var(--fluid-spring), background-color 220ms var(--fluid-ease);
}
body[data-landing] header > div > div:last-child > div:last-child:hover {
  transform: scale(1.06);
}

@media (max-width: 640px) {
  body[data-landing] > div.bg-primary-container {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  body[data-landing] > div.bg-primary-container .font-caption {
    font-size: 11px;
    line-height: 1.35;
  }
  body[data-landing] header > div {
    height: 64px;
    gap: 8px;
    padding-left: 16px;
    padding-right: 16px;
  }
  body[data-landing] header > div > div:first-child {
    gap: 8px;
    min-width: 0;
  }
  body[data-landing] header > div > div:first-child img {
    height: 28px;
  }
  /* Subjudul dua baris + ikon profil dekoratif dihapus di layar sempit agar
     logo & CTA bernapas; keduanya bukan aksi. */
  body[data-landing] header > div > div:first-child > div > span:last-child,
  body[data-landing] header > div > div:last-child > div:last-child {
    display: none;
  }
  body[data-landing] header a[data-path="masuk-sekolah"] {
    padding: 8px 12px;
    white-space: nowrap;
  }
  body[data-landing] #hero > .relative {
    padding-top: 40px;
    padding-bottom: 104px;
    gap: 16px;
  }
  body[data-landing] #hero h1 {
    font-size: clamp(30px, 8.4vw, 36px);
    line-height: 1.14;
    letter-spacing: -0.7px;
  }
  body[data-landing] #hero-sub {
    font-size: 15px;
    line-height: 1.45;
  }
  body[data-landing] #hero-etika {
    padding: 10px 12px;
  }
  body[data-landing] #hero-etika p {
    font-size: 12px;
    line-height: 1.45;
  }
  body[data-landing] #hero .font-caption {
    font-size: 12px;
  }
  body[data-landing] #hero-cta > div {
    padding: 6px;
  }
}

/* ---------------------------------------------------------------------------
   8. Reduced motion: everything becomes instant and static.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body[data-landing] *,
  body[data-landing] *::before,
  body[data-landing] *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  body[data-landing] [data-fluid-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  body[data-landing] #hero-mockup {
    animation: none !important;
  }
  body[data-landing] #hero > img {
    transform: none !important;
  }
  #anoa-progress {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:has(body[data-landing]) {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
  }
}