/* Custom CSS & Print Stylesheet untuk Pembelajaran Kebugaran Jasmani */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@500;600;700;800;900&display=swap');

:root {
  --primary-emerald: #10b981;
  --primary-emerald-dark: #059669;
  --accent-cyan: #06b6d4;
  --accent-amber: #f59e0b;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: #0b0f19;
  color: #f1f5f9;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Outfit', sans-serif;
}

/* Glassmorphism surfaces */
.glass-card {
  background: rgba(18, 24, 38, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 12px 30px -10px rgba(16, 185, 129, 0.2);
}

/* Subtle glow badges */
.glow-emerald {
  box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.4);
}

.glow-cyan {
  box-shadow: 0 0 25px -5px rgba(6, 182, 212, 0.4);
}

/* Push-up / Squat SVG Animation Styles */
#strength-figure-svg {
  transition: transform 0.4s ease-in-out;
}

#strength-figure-svg.phase-down {
  transform: scaleY(0.68) translateY(24px);
}

/* Cone styling for Agility */
.cone-item {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.cone-active {
  animation: conePulse 0.8s infinite alternate;
  filter: drop-shadow(0 0 15px #f59e0b);
}

@keyframes conePulse {
  0% { transform: scale(1.05); }
  100% { transform: scale(1.22); }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0b0f19;
}

::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #10b981;
}

/* Confetti animation for celebration */
.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0.9;
  animation: confettiFall 2.5s ease-out forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(350px) rotate(720deg);
    opacity: 0;
  }
}

/* Print Styling untuk Sertifikat / Portofolio Hasil Belajar Murid */
@media print {
  body {
    background-color: #ffffff !important;
    color: #0f172a !important;
  }

  /* Sembunyikan elemen navigasi dan tombol saat print */
  header, nav, #mobile-bottom-nav, .no-print, button, #btn-cadence-toggle, #btn-agility-start {
    display: none !important;
  }

  /* Buka semua tab atau fokuskan hanya area cetak */
  .page-view {
    display: none !important;
  }

  #print-portfolio-area {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    color: #0f172a !important;
  }

  .glass-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    color: #0f172a !important;
  }

  .text-white {
    color: #0f172a !important;
  }

  .text-slate-300, .text-slate-400 {
    color: #475569 !important;
  }
}