/* ===== Study Tracker — custom styles & animations ===== */

:root {
  --bg-1: #0f0c29;
  --bg-2: #302b63;
  --bg-3: #24243e;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  color: #e6e8f0;
  background: linear-gradient(-45deg, var(--bg-1), var(--bg-2), var(--bg-3), #1a1a2e);
  background-size: 400% 400%;
  animation: gradientShift 18s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Glass cards */
.glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.glass-hover {
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.glass-hover:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
}

/* Floating 3D emoji */
.emoji-3d {
  display: inline-block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
  animation: floaty 4s ease-in-out infinite;
}
@keyframes floaty {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-8px) rotate(4deg); }
}

/* Stat card big icon at card end */
.stat-card { overflow: hidden; position: relative; }
.stat-icon {
  line-height: 1;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.4));
  transition: transform .4s cubic-bezier(.2,1.4,.4,1);
}
.stat-card:hover .stat-icon {
  transform: scale(1.25) rotate(-8deg);
  animation-play-state: paused;
}

/* Entrance animations */
.fade-up { animation: fadeUp .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pop-in { animation: popIn .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* Stagger helper */
.stagger > * { opacity: 0; animation: fadeUp .6s cubic-bezier(.2,.8,.2,1) forwards; }
.stagger > *:nth-child(1){ animation-delay: .05s; }
.stagger > *:nth-child(2){ animation-delay: .12s; }
.stagger > *:nth-child(3){ animation-delay: .19s; }
.stagger > *:nth-child(4){ animation-delay: .26s; }
.stagger > *:nth-child(5){ animation-delay: .33s; }
.stagger > *:nth-child(6){ animation-delay: .40s; }

/* Sidebar link */
.nav-link {
  position: relative;
  transition: background .25s, color .25s, transform .2s;
}
.nav-link:hover { transform: translateX(4px); }
.nav-link.active {
  background: linear-gradient(90deg, rgba(139,92,246,.35), rgba(59,130,246,.15));
  box-shadow: inset 3px 0 0 #a855f7;
}

/* Progress ring */
.ring-bg { stroke: rgba(255,255,255,.12); }
.ring-fg { stroke-linecap: round; transition: stroke-dashoffset 1s ease; }

/* Custom checkbox */
.tick {
  width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid rgba(255,255,255,.3);
  display: grid; place-items: center;
  cursor: pointer; flex: none;
  transition: all .25s cubic-bezier(.2,1.4,.4,1);
}
.tick.checked {
  background: linear-gradient(135deg,#22c55e,#16a34a);
  border-color: #22c55e;
  transform: scale(1.05);
}
.tick svg { opacity: 0; transform: scale(.4); transition: all .25s; }
.tick.checked svg { opacity: 1; transform: scale(1); }

/* Celebration modal */
.celebrate-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(5,3,20,.6);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.celebrate-backdrop.show { opacity: 1; pointer-events: auto; }
.celebrate-card { animation: none; }
.celebrate-backdrop.show .celebrate-card { animation: popIn .5s cubic-bezier(.2,1.5,.4,1) both; }

.bounce-emoji { animation: bounceEmoji 1s ease infinite; }
@keyframes bounceEmoji {
  0%,100% { transform: translateY(0) scale(1); }
  30%     { transform: translateY(-18px) scale(1.15); }
  60%     { transform: translateY(0) scale(.95); }
}

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: 70; transition: transform .4s cubic-bezier(.2,1.4,.4,1);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139,92,246,.4); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,.7); }

/* Shimmer for progress bar */
.progress-fill {
  background-size: 200% 100%;
  animation: shimmer 2.5s linear infinite;
  transition: width 1s cubic-bezier(.2,.8,.2,1);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Calendar cell */
.cal-cell { transition: transform .2s, box-shadow .2s; }
.cal-cell:hover { transform: scale(1.08); z-index: 2; box-shadow: 0 6px 18px rgba(0,0,0,.4); }

@media (max-width: 1023px) {
  #sidebar { transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); }
}

/* Dark dropdown options (readable on dark theme) */
select option {
  background-color: #1e1b3a;
  color: #e6e8f0;
}

/* Remove number input spinner buttons */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}