/* =========================================================
   Jaguar Season 6 — Efek scroll halus + 3D
   Hanya aktif jika js/effects.js berjalan (class .fx pada <html>).
   Dimatikan otomatis untuk pengguna "reduce motion".
   ========================================================= */

html.fx{ scroll-behavior: auto; }

/* ---- Progress bar scroll ---- */
.fx-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  transform-origin: 0 50%; transform: scaleX(0);
  z-index: 9999; pointer-events: none;
}

/* ---- Navbar: kaca buram saat halaman di-scroll ---- */
.fx .navbar{ transition: background .3s, box-shadow .3s, backdrop-filter .3s; }
.fx .navbar.fx-scrolled{
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(15,43,91,.10);
}

/* ---- Hero 3D ---- */
.fx .hero{ position: relative; overflow: clip; }
.fx .hero .container{ position: relative; z-index: 1; }
.fx .hero-visual{
  transform-style: preserve-3d;
  transition: transform .25s ease-out;
  will-change: transform, translate;
}
.fx-shape{
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 22%;
  background: linear-gradient(135deg, rgba(23,105,224,.22), rgba(245,165,36,.16));
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 20px 50px rgba(23,105,224,.15);
  animation: fxSpin 18s linear infinite;
  will-change: transform, translate;
}
.fx-shape.s1{ width: 120px; height: 120px; top: 12%; right: 6%; }
.fx-shape.s2{ width: 70px;  height: 70px;  top: 60%; right: 38%; animation-duration: 24s; animation-direction: reverse; }
.fx-shape.s3{ width: 160px; height: 160px; bottom: -40px; left: -30px; animation-duration: 30s; }
@keyframes fxSpin{
  from{ transform: perspective(700px) rotateX(20deg) rotateY(0deg) rotateZ(0deg); }
  to{   transform: perspective(700px) rotateX(20deg) rotateY(360deg) rotateZ(90deg); }
}

/* ---- Reveal 3D saat masuk layar ---- */
.fx .fx-reveal:not(.fx-in){ opacity: 0; }
.fx .fx-reveal.fx-in{
  animation: fxReveal .95s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay: var(--fx-d, 0ms);
}
@keyframes fxReveal{
  from{ opacity: 0; transform: perspective(900px) translate3d(0,46px,-80px) rotateX(16deg); }
  to{   opacity: 1; transform: perspective(900px) translate3d(0,0,0) rotateX(0); }
}

/* ---- Kartu miring 3D mengikuti kursor ---- */
.fx .school-card, .fx .pkg-card, .fx .region-card, .fx .step-card, .fx .podium-item{
  position: relative;
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .3s;
}
.fx .school-card::after, .fx .pkg-card::after, .fx .region-card::after, .fx .step-card::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.38), transparent 55%);
  opacity: 0; transition: opacity .3s;
}
.fx .fx-tilting::after{ opacity: 1; }
.fx .fx-tilting{ box-shadow: var(--shadow-hover); }

@media (prefers-reduced-motion: reduce){
  .fx-shape{ animation: none; }
  .fx .fx-reveal:not(.fx-in){ opacity: 1; }
  .fx .fx-reveal.fx-in{ animation: none; }
}