body {
  animation: pageFadeIn 0.5s ease both;
}
:root[style*="--vt-active"] body {
  animation: none;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.page-exit {
  animation: pageFadeOut 0.25s ease forwards;
  pointer-events: none;
}
@keyframes pageFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

.header-logo {
  animation: logoPulse 3s ease-in-out infinite;
  transform-origin: center;
  filter: drop-shadow(0 0 6px #d308fa55);
}
@keyframes logoPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}

/* ── TITLE GLOW ── */
.header h1 {
  animation: titleGlow 2.5s ease-in-out infinite alternate;
  text-shadow: 0 0 20px #d308fa88, 0 0 40px #d308fa44;
}
@keyframes titleGlow {
  from { filter: brightness(1)   drop-shadow(0 0  8px #d308fa66); }
  to   { filter: brightness(1.1) drop-shadow(0 0 18px #d308facc); }
}

/* ── FLOATING PARTICLES ── */
.particle {
  position: absolute;
  border-radius: 50%;
  background: #d308fa;
  pointer-events: none;
  opacity: 0;
  contain: strict;
  animation: floatParticle linear infinite;
}
@keyframes floatParticle {
  0%   { opacity: 0;   transform: translateY(0)      scale(0.5); }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { opacity: 0;   transform: translateY(-120px) scale(1.2); }
}
@media (max-width: 768px) {
  .particle { display: none; }
}

/* ── SHIMMER HEADER SWEEP ──
   FIX: ganti animasi `left` → `transform: translateX`
   `left` trigger layout tiap frame → patah2 saat scroll
   `transform` hanya composite → mulus
── */
.header::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, #ffffff0a, transparent);
  animation: headerSweep 4s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
@keyframes headerSweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(370%); }
}

/* ── SCROLL-TRIGGERED TUING BOUNCE IN ── */
.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.75) rotate(-3deg);
  transition: opacity 0.5s cubic-bezier(.22,.68,0,1.2),
              transform 0.6s cubic-bezier(.22,.68,0,1.2);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
}
/* overshoot bounce saat masuk */
@keyframes tuingIn {
  0%   { opacity: 0; transform: translateY(40px) scale(0.75) rotate(-3deg); }
  55%  { transform: translateY(-10px) scale(1.07) rotate(1.5deg); }
  75%  { transform: translateY(4px) scale(0.97) rotate(-0.5deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
.reveal.visible {
  animation: tuingIn 0.65s cubic-bezier(.22,.68,0,1.2) both;
}
.reveal-group .reveal:nth-child(1)    { animation-delay: 0.00s; }
.reveal-group .reveal:nth-child(2)    { animation-delay: 0.10s; }
.reveal-group .reveal:nth-child(3)    { animation-delay: 0.20s; }
.reveal-group .reveal:nth-child(4)    { animation-delay: 0.30s; }
.reveal-group .reveal:nth-child(5)    { animation-delay: 0.40s; }
.reveal-group .reveal:nth-child(6)    { animation-delay: 0.50s; }
.reveal-group .reveal:nth-child(7)    { animation-delay: 0.60s; }
.reveal-group .reveal:nth-child(8)    { animation-delay: 0.70s; }
.reveal-group .reveal:nth-child(9)    { animation-delay: 0.80s; }
.reveal-group .reveal:nth-child(10)   { animation-delay: 0.90s; }
.reveal-group .reveal:nth-child(n+11) { animation-delay: 1.00s; }
/* variasi rotate tiap elemen supaya lebih playful */
.reveal-group .reveal:nth-child(odd)  { --tuing-rotate: -3deg; }
.reveal-group .reveal:nth-child(even) { --tuing-rotate: 3deg; }

/* ── NAVBAR LINK UNDERLINE SLIDE ── */
.nav-links a { position: relative; }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: #d308fa;
  border-radius: 2px;
  transition: width 0.3s ease, left 0.3s ease;
}
.nav-links a:hover::after,
.nav-links a.aktif::after { width: 80%; left: 10%; }

/* ── HAMBURGER → X ── */
.hamburger.terbuka span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.terbuka span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.terbuka span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE NAV SLIDE DOWN ── */
.nav-links {
  transition: max-height 0.35s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
}
@media (max-width: 600px) {
  .nav-links {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    display: flex !important;
  }
  .nav-links.aktif { max-height: 400px; opacity: 1; }
}

/* ── RIPPLE EFFECT ── */
.tombol, .tombol-more, .filter-btn {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: rippleAnim 0.55s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── KARTU HOVER LIFT ──
   FIX: transition: none by default, aktif hanya saat :hover
   contain: layout style → isolasi reflow per kartu
── */
.kartu, .kartu-mgmt,
.kartu-spotlight, .polaroid, .stat-box,
.founder-card, .info-item {
  transition: none;
  contain: layout style;
}
.kartu:hover, .kartu-mgmt:hover,
.kartu-spotlight:hover, .polaroid:hover, .stat-box:hover,
.founder-card:hover, .info-item:hover {
  transition: transform 0.25s cubic-bezier(.22,.68,0,1.4),
              box-shadow 0.25s ease;
  will-change: transform;
}

/* ── KARTU PENGUMUMAN ──
   Dipisah karena perlu border-color transition juga
── */
.kartu-pengumuman {
  transition: none;
  contain: layout style;
}
.kartu-pengumuman:hover {
  transition: transform 0.25s cubic-bezier(.22,.68,0,1.4),
              box-shadow 0.25s ease,
              border-color 0.25s ease;
  will-change: transform;
  border-color: #d308fa88 !important;
}

/* ── STATS COUNTER NUMBER ── */
.stat-num { transition: color 0.3s ease; }

/* ── PROFIL BOX ENTRANCE ── */
.profil-box {
  animation: profilEntrance 0.5s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes profilEntrance {
  from { opacity: 0; transform: scale(0.94) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── FOTO PROFIL HOVER ── */
.foto-placeholder img, .foto-placeholder {
  transition: transform 0.4s cubic-bezier(.22,.68,0,1.4);
}
.foto-placeholder:hover img,
.foto-placeholder:hover { transform: scale(1.07); }

/* ── BADGE SHIMMER ── */
.badge {
  background: linear-gradient(90deg, #4a0080, #7b30c8, #4a0080);
  background-size: 200% auto;
  animation: badgeShimmer 2.5s linear infinite;
}
@keyframes badgeShimmer {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/* ── POLAROID WIGGLE ON HOVER ── */
.polaroid:hover {
  animation: polaroidWiggle 0.3s ease;
}
@keyframes polaroidWiggle {
  0%   { transform: rotate(0deg)    scale(1.05); }
  25%  { transform: rotate(-1.5deg) scale(1.05); }
  75%  { transform: rotate(1.5deg)  scale(1.05); }
  100% { transform: rotate(0deg)    scale(1.05); }
}

/* ── TOMBOL MORE PULSE ── */
.tombol-more {
  box-shadow: 0 4px 15px #d308fa33;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tombol-more:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px #d308fa66;
}

/* ── GARIS HIERARKI MANAGEMENT ── */
.garis {
  animation: garisGrow 0.6s ease both;
  transform-origin: top;
}
@keyframes garisGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ── SEARCH INPUT FOCUS GLOW ── */
.search-input:focus {
  box-shadow: 0 0 0 3px #d308fa33, 0 0 15px #d308fa22 !important;
  transform: scaleX(1.01);
}

/* ── FILTER BTN BOUNCE ── */
.filter-btn.aktif {
  animation: filterPop 0.3s cubic-bezier(.22,.68,0,1.4);
}
@keyframes filterPop {
  from { transform: scale(0.9); }
  to   { transform: scale(1); }
}

/* ── REDUCE MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── HEADER BANNER FOTO ── */
.header {
  background-image:
    linear-gradient(135deg, #2d005799 0%, #4a008099 40%, #7b2fa899 100%),
    url('header-mobile.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 601px) {
  .header {
    background-image:
      linear-gradient(135deg, #2d005799 0%, #4a008099 40%, #7b2fa899 100%),
      url('header-dekstop.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* ── LOADING SKELETON ── */
.skeleton {
  background: #e8d5f5;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  animation: skeletonPulse 1.4s ease-in-out infinite;
}
.skeleton.circle       { border-radius: 50%; }
.skeleton.teks-panjang { height: 14px; width: 70%; border-radius: 8px; }
.skeleton.teks-pendek  { height: 12px; width: 40%; border-radius: 8px; }
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
.skeleton:nth-child(2) { animation-delay: 0.15s; }
.skeleton:nth-child(3) { animation-delay: 0.30s; }
.skeleton:nth-child(4) { animation-delay: 0.45s; }
.skeleton:nth-child(5) { animation-delay: 0.60s; }
.skeleton:nth-child(6) { animation-delay: 0.75s; }

/* ── FOOTER ── */
.footer {
  background: linear-gradient(135deg, #2d0057 0%, #4a0080 40%, #7b2fa8 100%);
  text-align: center;
  padding: 40px 20px;
  margin-top: 60px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #d308fa44;
}
.footer::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, #d308fa11 0%, transparent 60%);
  pointer-events: none;
}
.footer-logo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; border: 2px solid #d308fa66; }
.footer-nama { color: #d308fa; font-size: 20px; font-weight: 700; letter-spacing: 4px; margin-bottom: 4px; }
.footer-sub  { color: #e8b4ff; font-size: 10px; letter-spacing: 6px; margin-bottom: 20px; }
.footer-sosmed { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; }
.footer-sosmed a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #d308fa66; color: #e8b4ff;
  text-decoration: none; font-size: 18px; transition: all 0.3s;
}
.footer-sosmed a:hover {
  background: #d308fa33; border-color: #d308fa;
  color: #fff; transform: translateY(-3px);
}
.footer-copy { color: #9b30d966; font-size: 11px; letter-spacing: 1px; }