@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  color-scheme: light;
  --cube-intro: #1EB5A6;
  --cube-equations: #2F8CFF;
  --cube-onsets: #8B5CF6;
  --cube-onwords: #FF6FA5;
  --cube-presidents: #FFC93C;
  --cube-propaganda: #FF5A5F;
}

html, body {
  font-family: "Nunito", ui-sans-serif, sans-serif;
  background: #F2F6FF;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
  font-family: "Baloo 2", ui-rounded, sans-serif;
}

.font-stat {
  font-family: "Space Grotesk", ui-sans-serif, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ---------- Accessible focus ring (never remove, only restyle) ---------- */
:focus-visible {
  outline: 3px solid #2F8CFF;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- Cube motif: every "cube" surface gets a tactile pressed-block look ---------- */
.cube-face {
  position: relative;
  box-shadow: 0 6px 0 rgba(22,35,63,0.16), 0 14px 22px -10px rgba(22,35,63,0.25);
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease;
}
.cube-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -10px 14px -10px rgba(22,35,63,0.25);
  pointer-events: none;
}
.cube-face:hover {
  transform: translateY(-3px) rotate(-0.5deg);
}
.cube-face:active,
.cube-face.is-pressed {
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(22,35,63,0.16), 0 4px 8px -4px rgba(22,35,63,0.2);
}
.cube-pips {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  grid-template-columns: repeat(2, 5px);
  gap: 4px;
  opacity: 0.35;
}
.cube-pips span {
  width: 5px; height: 5px; border-radius: 999px; background: currentColor;
}

/* ---------- Skeleton loading shimmer ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #E4EBFA;
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  background-size: 400px 100%;
  animation: shimmer 1.6s infinite linear;
}

/* ---------- Confetti particles (spawned by Confetti component) ---------- */
.confetti-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -12px;
  width: 9px; height: 14px;
  opacity: 0.95;
  animation-name: confetti-fall;
  animation-timing-function: cubic-bezier(.4,.1,.6,.9);
  animation-fill-mode: forwards;
  border-radius: 2px;
}
@keyframes confetti-fall {
  0%   { transform: translate3d(0,0,0) rotate(0deg); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(var(--drift,0px), 105vh, 0) rotate(540deg); opacity: 0; }
}

/* ---------- Mascot mood micro-animations ---------- */
@keyframes mascot-idle { 0%,100% { transform: translateY(0) rotate(0deg);} 50% { transform: translateY(-4px) rotate(-1.5deg);} }
@keyframes mascot-happy { 0%,100% { transform: translateY(0) scale(1) rotate(0deg);} 30% { transform: translateY(-10px) scale(1.05) rotate(-4deg);} 60% { transform: translateY(0) scale(1.02) rotate(4deg);} }
@keyframes mascot-sad { 0%,100% { transform: translateY(0) rotate(0deg);} 50% { transform: translateY(2px) rotate(2deg);} }
.mascot-idle  { animation: mascot-idle 3s ease-in-out infinite; }
.mascot-happy { animation: mascot-happy .9s cubic-bezier(.34,1.56,.64,1) 2; }
.mascot-sad   { animation: mascot-sad .6s ease-in-out 2; }

/* ---------- Progress fill shine sweep ---------- */
.progress-fill { position: relative; overflow: hidden; }
.progress-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 45%, transparent 60%);
  background-size: 200% 100%;
  animation: shimmer 2.2s infinite linear;
}

/* ---------- Winding lesson trail connector ---------- */
.trail-line {
  stroke: #D8E2F8;
  stroke-width: 6;
  stroke-linecap: round;
  fill: none;
}
.trail-line-fill {
  stroke: #22C48A;
  stroke-width: 6;
  stroke-linecap: round;
  fill: none;
  transition: stroke-dashoffset .8s cubic-bezier(.22,1,.36,1);
}

/* ---------- Toasts ---------- */
.toast-enter { animation: pop-in .35s cubic-bezier(.22,1,.36,1) both; }

/* ---------- Reduced motion: respect it everywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Scrollbar polish (sidebar) ---------- */
.styled-scroll::-webkit-scrollbar { width: 8px; }
.styled-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 999px; }