/* ============================================================
   Saintekfest 2026 — Lively Motion Layer
   Diload SETELAH bg-blobs.css & style halaman, jadi override
   animasi lama supaya blob & hover terasa lebih hidup.
   Murni CSS tambahan — tidak mengubah struktur/markup/fitur.
   ============================================================ */

:root{ --lv-ease: cubic-bezier(.22,1,.36,1); }

/* ---------- 1. Blob background lebih hidup ---------- */
/* Override keyframe floatSlow lama (translate saja) jadi drift
   organik: translate + scale + rotate ringan, tidak norak. */
@keyframes floatSlow{
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  22%  { transform: translate(14px,-20px) scale(1.06) rotate(4deg); }
  48%  { transform: translate(-8px,-30px) scale(.96) rotate(-3deg); }
  74%  { transform: translate(-16px,-6px) scale(1.03) rotate(2deg); }
  100% { transform: translate(0,0) scale(1) rotate(0deg); }
}

.bg-blob, .hero::before, .hero::after{
  animation-name: floatSlow;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* Blob ambient tambahan — murni CSS via pseudo-element body,
   tidak nambah elemen baru, tetap aman untuk fitur JS. */
body{ position:relative; }
body::before, body::after{
  content:'';
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter:blur(70px);
  animation:floatSlow ease-in-out infinite;
}
body::before{
  top:38%; right:-90px;
  width:230px; height:230px;
  background:rgba(168,85,247,.07);
  animation-duration:17s;
}
body::after{
  bottom:16%; left:-70px;
  width:200px; height:200px;
  background:rgba(34,197,94,.06);
  animation-duration:13s;
  animation-direction:reverse;
}

/* ---------- 2. Pulse dot lebih hidup ---------- */
@keyframes pulseDot{
  0%  { box-shadow:0 0 0 0 rgba(34,197,94,.55); }
  70% { box-shadow:0 0 0 8px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

/* ---------- 3. Tombol: lift + glow + shine sweep ---------- */
/* Sengaja TIDAK pakai selector "button" polos — supaya tombol ikon kecil
   (back-arrow, close, logout, toggle password, remove-item) tidak ikut
   dapat animasi lift/shine yang harusnya cuma buat tombol CTA utama. */
a.btn, .btn-navy, .btn-amber, .nav-cta,
.lomba-btn-daftar, .lomba-btn-juklak, .lomba-cta-btn,
a[href][class*="bg-slate-900"]:not(.no-lively), a[href][class*="bg-amber-400"]:not(.no-lively),
a[href][class*="bg-emerald"]:not(.no-lively), a[href][class*="bg-red-"]:not(.no-lively),
button.lively-btn:not(.no-lively),
button[type="submit"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]),
button[class*="bg-slate-900"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]),
button[class*="bg-amber-400"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]),
button[class*="bg-emerald"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]),
button[class*="bg-red-"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]){
  transition: transform .28s var(--lv-ease), box-shadow .28s var(--lv-ease), filter .28s var(--lv-ease);
}
a.btn:hover, .btn-navy:hover, .btn-amber:hover, .nav-cta:hover,
.lomba-btn-daftar:hover, .lomba-btn-juklak:hover, .lomba-cta-btn:hover,
a[href][class*="bg-slate-900"]:not(.no-lively):hover, a[href][class*="bg-amber-400"]:not(.no-lively):hover,
a[href][class*="bg-emerald"]:not(.no-lively):hover, a[href][class*="bg-red-"]:not(.no-lively):hover,
button.lively-btn:not(.no-lively):hover,
button[type="submit"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]):hover,
button[class*="bg-slate-900"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]):hover,
button[class*="bg-amber-400"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]):hover,
button[class*="bg-emerald"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]):hover,
button[class*="bg-red-"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]):hover{
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 12px 26px rgba(10,22,40,.20);
  filter: brightness(1.05);
}
a.btn:active, .btn-navy:active, .btn-amber:active,
a[href][class*="bg-slate-900"]:not(.no-lively):active, a[href][class*="bg-amber-400"]:not(.no-lively):active{
  transform: translateY(-1px) scale(.98);
  transition-duration:.12s;
}

/* Shine sweep — hanya tombol utama (navy/amber solid, bukan tombol ikon kecil) */
.btn-navy, .nav-cta, .lomba-cta-btn,
a[href][class*="bg-slate-900"]:not(.no-lively), button[class*="bg-slate-900"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]),
a[href][class*="bg-amber-400"]:not(.no-lively), button[class*="bg-amber-400"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]){
  position: relative;
  overflow: hidden;
}
.btn-navy::after, .nav-cta::after, .lomba-cta-btn::after,
a[href][class*="bg-slate-900"]:not(.no-lively)::after, button[class*="bg-slate-900"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"])::after,
a[href][class*="bg-amber-400"]:not(.no-lively)::after, button[class*="bg-amber-400"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"])::after{
  content:'';
  position:absolute; top:0; left:-60%;
  width:35%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
  transition:left .55s ease;
  pointer-events:none;
}
.btn-navy:hover::after, .nav-cta:hover::after, .lomba-cta-btn:hover::after,
a[href][class*="bg-slate-900"]:not(.no-lively):hover::after, button[class*="bg-slate-900"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]):hover::after,
a[href][class*="bg-amber-400"]:not(.no-lively):hover::after, button[class*="bg-amber-400"]:not(.no-lively):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]):hover::after{
  left:130%;
}

/* ---------- 4. Card: lift + border amber halus ---------- */
.card, .lomba-card, .juklak-card{
  transition: transform .32s var(--lv-ease), box-shadow .32s var(--lv-ease), border-color .32s var(--lv-ease);
}
.lomba-card:hover, .card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(10,22,40,.13);
  border-color: #fde68a;
}
.juklak-item{ transition: transform .2s var(--lv-ease), background-color .2s var(--lv-ease); }
.juklak-item:hover{ transform: translateX(3px); }

/* ---------- 5. Nav link underline tumbuh ---------- */
.nav-link{ position:relative; }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-3px; width:0; height:2px;
  background:#fbbf24; transition:width .25s var(--lv-ease);
}
.nav-link:hover::after{ width:100%; }

/* ---------- 6. Icon wrap sedikit "hidup" saat hover parent ---------- */
.lomba-card:hover .lomba-icon{ transform: scale(1.12) rotate(-4deg); }
.lomba-icon{ transition: transform .3s var(--lv-ease); display:inline-block; }

/* ---------- 7. Hormati preferensi reduced motion ---------- */
/* ---------- 8. Skeleton loading shimmer ---------- */
.skel{ background:linear-gradient(90deg,#eef1f5 25%,#f7f9fb 37%,#eef1f5 63%); background-size:400% 100%; animation:skelShimmer 1.4s ease infinite; border-radius:10px; }
@keyframes skelShimmer{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }
.skel-row{ display:flex; align-items:center; gap:10px; padding:12px; }
.skel-circle{ width:40px; height:40px; border-radius:10px; flex-shrink:0; }
.skel-line{ height:10px; margin-bottom:6px; }
.skel-line.w-60{ width:60%; } .skel-line.w-40{ width:40%; } .skel-line.w-80{ width:80%; }

@media (prefers-reduced-motion: reduce){
  .bg-blob, body::before, body::after, .hero::before, .hero::after{ animation:none !important; }
  *{ transition:none !important; }
}