/* SinaU-Ilmu: efek halaman publik (beranda tamu & masuk). Diselaraskan dengan Laskar Digital (dasiguru.com). */
html { scroll-behavior: smooth; }

@keyframes drift {
  50% { translate: 60px 40px; scale: 1.1; }
  100% { translate: -40px 70px; scale: 0.95; }
}
@keyframes grid-move { to { background-position: 44px 44px, 44px 44px; } }
@keyframes gradient-flow { to { background-position: 200% center; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes float-y { 50% { translate: 0 -10px; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes scroll-wheel {
  0% { opacity: 1; translate: 0 0; }
  80%, 100% { opacity: 0; translate: 0 10px; }
}
@keyframes shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
@keyframes rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes pop { from { opacity: 0; scale: 0.92; } to { opacity: 1; scale: 1; } }

.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora-layer { position: absolute; inset: 0; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.aurora-blob {
  position: absolute; border-radius: 9999px; filter: blur(70px); opacity: 0.6;
  animation: drift 18s ease-in-out infinite alternate;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  animation: grid-move 20s linear infinite;
}
.text-gradient-flow {
  background: linear-gradient(90deg, #6ee7b7, #5eead4, #67e8f9, #fcd34d, #6ee7b7);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradient-flow 6s linear infinite;
}
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.float-slow { animation: float-y 5s ease-in-out infinite; }
.caret-blink { animation: blink 1s step-end infinite; }
.scroll-wheel { animation: scroll-wheel 1.6s ease-out infinite; }
.shake { animation: shake 0.4s ease-in-out; }
.rise { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.pop { animation: pop 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Muncul saat digulir (kelas .in ditambahkan oleh app.js) */
.reveal { opacity: 0; translate: 0 24px; transition: opacity 0.6s, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; translate: 0 0; }

/* Kartu dengan cahaya mengikuti kursor dan sedikit miring */
.spotlight { position: relative; isolation: isolate; transition: transform 0.2s ease-out; transform-style: preserve-3d; }
.spotlight::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(20, 184, 166, 0.12), transparent 60%);
}
.spotlight:hover::before { opacity: 1; }

.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%);
  translate: -120% 0; transition: translate 0.7s;
}
.btn-shine:hover::after { translate: 120% 0; }

.bar-fill { transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }

@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; translate: 0 0; }
}

/* Radar contoh rapor: mengembang saat bagiannya muncul */
.radar-shape { transform-box: view-box; transform-origin: 120px 120px; scale: 0.15; opacity: 0; transition: scale 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s, opacity 0.6s 0.2s; }
.reveal.in .radar-shape { scale: 1; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .radar-shape { scale: 1; opacity: 1; } }