/* FRACTION EXPLORER - STYLESHEET (FULL BACKGROUND & UI/UX ENHANCED) */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  --primary: #7c3aed;
  --primary-dark: #6d28d9;
  --navy: #1e1b4b;
  --secondary: #facc15;
  --accent: #10b981;
  --font-main: 'Poppins', 'Nunito', sans-serif;
}

body {
  font-family: var(--font-main);
  background-color: #f5f7fb;
  color: #1e1b4b;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Full Background Container */
.hero-full-bg {
  background-image: url('../assets/hero-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* 3D Title Typography */
.title-3d-fraction {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 
    -2px -2px 0 #1e3a8a,  
     2px -2px 0 #1e3a8a,
    -2px  2px 0 #1e3a8a,
     2px  2px 0 #1e3a8a,
     0px  4px 0 #172554,
     0px  7px 0 #0f172a,
     0px 10px 18px rgba(0, 0, 0, 0.35);
}

.title-3d-explorer {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 30%, #facc15 60%, #eab308 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 #1e3a8a) drop-shadow(0 6px 0 #0f172a) drop-shadow(0 9px 12px rgba(0,0,0,0.35));
}

/* Ribbon Banner */
.ribbon-purple-badge {
  position: relative;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(109, 40, 217, 0.4);
}
.ribbon-purple-badge::before, .ribbon-purple-badge::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 10px solid transparent;
}
.ribbon-purple-badge::before {
  left: -14px;
  border-right-color: #5b21b6;
  border-left-width: 0;
}
.ribbon-purple-badge::after {
  right: -14px;
  border-left-color: #5b21b6;
  border-right-width: 0;
}

/* Dashed Badge */
.badge-dashed-purple {
  border: 2px dashed #a855f7;
  background: #ffffff;
  color: #6b21a8;
  font-weight: 800;
  border-radius: 9999px;
}

/* 3D Bouncy Buttons & Micro-interactions */
button {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}
button:active {
  transform: translateY(2px) scale(0.98);
}

/* Animations */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.animate-shake {
  animation: shake 0.4s ease-in-out;
}

@keyframes scaleUp {
  0% { transform: scale(0.94); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-scale-up {
  animation: scaleUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(1deg); }
}

.animate-float {
  animation: floatSlow 4s ease-in-out infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Slider Custom Styling */
input[type=range] {
  -webkit-appearance: none;
  background: #e2e8f0;
  border-radius: 9999px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(124, 58, 237, 0.4);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Printable Certificate Settings */
@media print {
  body * {
    visibility: hidden;
  }
  #printable-certificate, #printable-certificate * {
    visibility: visible;
  }
  #printable-certificate {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 30px;
    box-shadow: none !important;
    border: 8px solid #d97706 !important;
    background: #ffffff !important;
  }
}