/* =========================================================================
   IAIN Ternate — animasi bersama (dipakai lewat class, tanpa library).
   Aturan: hanya transform/translate/opacity (+ warna tombol/header),
   150–400ms ease-out, sekali jalan, mati total saat prefers-reduced-motion.
   Pasangan JS: public/js/motion.js (menambah .motion-ready, .is-visible, .is-scrolled).
   ========================================================================= */

:root {
  --m-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out */
  --m-fast: 150ms;
  --m-base: 250ms;
  --m-slow: 400ms;
}

/* 1. Hero beranda: anak langsung muncul berurutan, jeda 100ms (CSS murni,
      tetap berakhir terlihat walau JS tidak jalan). */
@keyframes m-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.hero-stagger > * { animation: m-fade-up var(--m-slow) var(--m-ease) both; }
.hero-stagger > :nth-child(2) { animation-delay: 100ms; }
.hero-stagger > :nth-child(3) { animation-delay: 200ms; }
.hero-stagger > :nth-child(4) { animation-delay: 300ms; }
.hero-stagger > :nth-child(n+5) { animation-delay: 400ms; }

/* 2. Scroll reveal, sekali saja. Disembunyikan hanya bila <html class="js">
      (diset skrip inline di <head>). Jika motion.js gagal dimuat, failsafe
      memunculkan konten setelah 2.5s. Pakai properti `translate` agar tidak
      bentrok dengan `transform` milik .hover-lift. */
.reveal,
.reveal-stagger > * {
  transition: opacity var(--m-slow) var(--m-ease) var(--rd, 0ms),
              translate var(--m-slow) var(--m-ease) var(--rd, 0ms);
}
.js .reveal:not(.is-visible),
.js .reveal-stagger:not(.is-visible) > * {
  opacity: 0;
  translate: 0 16px;
}
.reveal-stagger > :nth-child(2) { --rd: 80ms; }
.reveal-stagger > :nth-child(3) { --rd: 160ms; }
.reveal-stagger > :nth-child(4) { --rd: 240ms; }
.reveal-stagger > :nth-child(5) { --rd: 320ms; }
.reveal-stagger > :nth-child(n+6) { --rd: 400ms; }

@keyframes m-failsafe { to { opacity: 1; translate: none; } }
.js:not(.motion-ready) .reveal,
.js:not(.motion-ready) .reveal-stagger > * {
  animation: m-failsafe 1ms 2.5s forwards;
}

/* 3. Kartu terangkat 4px; bayangan lewat ::after (animasi opacity, bukan box-shadow). */
.hover-lift {
  position: relative;
  isolation: isolate;
  transition: transform var(--m-base) var(--m-ease);
}
.reveal.hover-lift,
.reveal-stagger > .hover-lift {
  transition: opacity var(--m-slow) var(--m-ease) var(--rd, 0ms),
              translate var(--m-slow) var(--m-ease) var(--rd, 0ms),
              transform var(--m-base) var(--m-ease);
}
.hover-lift::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 14px 28px rgba(6, 46, 30, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--m-base) var(--m-ease);
}
@media (hover: hover) {
  .hover-lift:hover { transform: translateY(-4px); }
  .hover-lift:hover::after { opacity: 1; }
}
.hover-lift:focus-within { transform: translateY(-4px); }
.hover-lift:focus-within::after { opacity: 1; }

/* 4. Tombol: warna halus + membesar 2%. */
.btn {
  transition: background-color var(--m-base) var(--m-ease),
              color var(--m-base) var(--m-ease),
              border-color var(--m-base) var(--m-ease),
              transform var(--m-fast) var(--m-ease);
}
@media (hover: hover) {
  .btn:hover { transform: scale(1.02); }
}
.btn:active { transform: scale(0.98); }

/* 5a. Navigasi: garis bawah bergeser dari kiri (desktop). */
@media (min-width: 1280px) {
  .nav-underline { position: relative; }
  .nav-underline::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: rgb(var(--color-gold));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--m-base) var(--m-ease);
  }
  .nav-underline:hover::after,
  .nav-underline.is-active::after,
  .nav-item.is-open > .nav-underline::after { transform: scaleX(1); }

  .dropdown {
    transition: opacity 200ms var(--m-ease), transform 200ms var(--m-ease), visibility 200ms;
  }
}

/* 5b. Header: bayangan tipis muncul setelah halaman di-scroll (via ::after opacity). */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: 0 10px 30px -10px rgba(4, 63, 46, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--m-base) var(--m-ease);
}
.site-header.is-scrolled::after { opacity: 1; }

/* Panel menu mobile */
@media (max-width: 1279.98px) {
  .site-nav {
    transform: translateY(-8px);
    transition: opacity 200ms var(--m-ease), transform 200ms var(--m-ease), visibility 200ms;
  }
  .site-nav.is-open { transform: none; }
}

/* 6. Angka statistik: lebar digit tetap agar tidak menggeser layout saat menghitung. */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* 7. Skeleton loading untuk daftar/tabel yang memuat data. */
.skeleton {
  position: relative;
  overflow: hidden;
  display: inline-block;
  min-width: 3ch;
  border-radius: 6px;
  background: rgb(var(--color-muted));
  color: transparent !important;
}
.on-dark .skeleton { background: rgba(255, 255, 255, 0.12); }
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%);
  animation: m-shimmer 1.4s ease-out infinite;
}
.on-dark .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); }
@keyframes m-shimmer { to { transform: translateX(100%); } }

/* 8. Slider geser: parallax foto (--p diisi motion.js: 0 = slide aktif, ±1 = tetangga),
      zoom halus foto aktif, teks slide muncul bertahap. Semua transform/opacity. */
.slider__media img {
  transform: translate3d(calc(var(--p, 0) * -18%), 0, 0);
  scale: 1.14;
  transition: scale var(--m-slow) var(--m-ease);
  will-change: transform;
}
.slider__slide.is-active .slider__media img { scale: 1.06; }
.slider__dot::after { transition: transform var(--m-base) var(--m-ease); }

.slide-content > * {
  transition: opacity var(--m-slow) var(--m-ease), translate var(--m-slow) var(--m-ease);
}
.js .slider__slide:not(.is-active) .slide-content > * { opacity: 0; translate: 0 18px; transition-duration: var(--m-fast); }
.slider__slide.is-active .slide-content > :nth-child(2) { transition-delay: 80ms; }
.slider__slide.is-active .slide-content > :nth-child(3) { transition-delay: 160ms; }
.slider__slide.is-active .slide-content > :nth-child(n+4) { transition-delay: 240ms; }
.js:not(.motion-ready) .slide-content > * { animation: m-failsafe 1ms 2.5s forwards; }

/* 10. Mode slide beranda (public/js/fullpage.js, GSAP): satu gulir/swipe = pindah slide.
       Aktif hanya di bawah html.fp; tanpa itu beranda adalah halaman scroll biasa. */
html.fp, html.fp body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.fp .fp-slides { position: fixed; left: 0; right: 0; bottom: 0; top: var(--fp-top, 4.5rem); z-index: 1; }
.fp .fp-slide { position: absolute; inset: 0; overflow: hidden; visibility: hidden; background: rgb(var(--color-background)); }
.fp .fp-slide.is-current { visibility: visible; }
.fp .fp-slide__inner { height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.fp .fp-slide:not([data-fp-last]) .fp-slide__inner > section { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.fp .fp-slide__inner > section > .container-site { width: 100%; }
.fp-slide__shade { position: absolute; inset: 0; z-index: 3; background: #021f17; opacity: 0; pointer-events: none; }

.fp-dots {
  position: fixed; z-index: 40; top: 50%; transform: translateY(-50%);
  right: max(12px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 4px; padding: 8px 4px; border-radius: 999px; background: rgba(36, 36, 35, 0.55);
}
.fp-dots button { position: relative; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.fp-dots button::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgba(252, 252, 252, 0.6);
  transition: transform var(--m-base) var(--m-ease), background-color var(--m-base) var(--m-ease);
}
.fp-dots button[aria-current="true"]::before { background: rgb(var(--color-accent)); transform: scale(1.5); }
.fp-dots button span {
  position: absolute; right: 36px; top: 50%; transform: translateY(-50%); padding: 4px 10px; border-radius: 999px;
  background: rgb(var(--color-foreground)); color: #fff; font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--m-fast) var(--m-ease);
}
.fp-dots button:hover span, .fp-dots button:focus-visible span { opacity: 1; }
.fp-hint {
  position: fixed; z-index: 40; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  padding: 8px 16px; border-radius: 999px; background: rgba(36, 36, 35, 0.7); color: #fff; font-size: 14px; pointer-events: none;
}
html:not(.fp) .fp-dots, html:not(.fp) .fp-hint { display: none; }
/* HP: titik navigasi menutupi isi slide; pindah slide cukup dengan swipe. */
@media (max-width: 767.98px) { .fp-dots { display: none; } }
/* Tablet/laptop: sisakan ruang di kanan agar titik navigasi tidak menutupi isi (hilang sendiri di layar sangat lebar). */
@media (min-width: 768px) { .fp .fp-slide .container-site { padding-right: max(2rem, calc(4.75rem - (100vw - 80rem) / 2)); } }

/* Desktop: padatkan tiap slide agar muat satu layar → sekali gulir langsung pindah slide. */
@media (min-width: 1024px) and (min-height: 600px) {
  .fp .section { padding-block: clamp(24px, 4.5vh, 56px); }
  .fp .section-head { margin-bottom: clamp(16px, 3vh, 40px); }
  .fp .heading-lg { font-size: min(3.75rem, 7.4vh); }
  .fp [data-name="Banner"] .container-site { padding-top: 4vh; }
  .fp [data-name="Banner"] .heading-xl { font-size: min(6.5rem, 7.6vw, 10.5vh); }
  .fp [data-name="Banner"] .lead { margin-top: 2.4vh; font-size: min(19px, 2.4vh); }
  .fp [data-name="Banner"] [data-fp-item].mt-9 { margin-top: 3vh; }
  .fp .arch { max-width: min(24rem, 46vh); }
  .fp [data-name="Banner"] dl { margin-top: 3vh; }
  .fp .fp-stat { padding-block: 1.4vh 1.8vh; }
  .fp .fp-stat dd { font-size: min(3.75rem, 6.4vh); }
  .fp .news-feat__img { aspect-ratio: auto; height: min(26rem, 40vh); }
  .fp .news-feat__title { font-size: min(2.2rem, 4.2vh); }
  .fp .news-feat__meta { margin-top: 1.6vh; }
  .fp .news-row { padding-block: min(1.35rem, 2vh); }
  .fp .news-row__title { font-size: min(1.55rem, 3.1vh); }
  .fp [data-name="Tentang"] .lead { margin-top: 2.4vh; font-size: min(19px, 2.3vh); }
  .fp [data-name="Tentang"] [data-fp-item].mt-7, .fp [data-name="Tentang"] [data-fp-item].mt-9 { margin-top: 2.4vh; }
  .fp [data-name="Tentang"] blockquote { font-size: min(1.9rem, 3.6vh); }
  .fp .ann-ticker { margin-bottom: min(2rem, 2.6vh); }
  .fp .ann-ticker__label { padding-block: min(10px, 1.2vh); }
  .fp .ann-cal__band { padding-block: min(1.1rem, 1.8vh) min(1rem, 1.6vh); }
  .fp .ann-cal__day { padding-top: 1.6vh; font-size: min(6rem, 10vh); }
  .fp .ann-cal__body { padding-top: 1.2vh; padding-bottom: min(1.4rem, 2.4vh); }
  .fp .ann-cal__title { margin-top: 1.2vh; }
  .fp .ann-cal__act { padding-top: min(1.25rem, 2vh); }
  .fp .fac-grid { grid-template-rows: repeat(2, min(15rem, 30vh)); gap: min(1rem, 1.8vh); }
  .fp .fac-card { min-height: 0; padding: clamp(16px, 3vh, 28px); }
  .fp .fac-card__go { width: min(46px, 5.6vh); height: min(46px, 5.6vh); }
  .fp .fac-card__abbr { font-size: min(4.75rem, 5.5vw, 9vh); }
  .fp .fac-card--lead .fac-card__abbr { font-size: min(7.5rem, 8vw, 15vh); }
  .fp .fac-card__name { margin-top: 1vh; }
  .fp .gal__stage { aspect-ratio: auto; height: min(34rem, 60vh); }
  .fp .gal__cap { min-height: 0; font-size: min(1.75rem, 3.6vh); }
  .fp .gal__thumbs { gap: min(.75rem, 1.2vh); }
  .fp .gal__thumb { padding-block: min(.5rem, .8vh); }
  .fp .gal__thumb img { height: min(3.4rem, 7vh); }
}

/* Reduced motion: matikan semua gerakan, tampilkan konten langsung. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .hero-stagger > * { animation: none !important; }
  .js .reveal,
  .js .reveal-stagger > * { opacity: 1 !important; translate: none !important; animation: none !important; }
  .hover-lift:hover,
  .hover-lift:focus-within,
  .btn:hover,
  .btn:active,
  .link-arrow:hover .icon,
  a:hover .link-arrow .icon { transform: none !important; }
  .site-nav { transform: none !important; }
  .slider__media img { transform: none !important; scale: 1 !important; }
  .js .slider__slide .slide-content > * { opacity: 1 !important; translate: none !important; }
  .skeleton::after { display: none; }
}