/* ========================================
   TeenFit Squad — Custom Styles
   ======================================== */


/* === Fonts === */

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


/* === CSS Variables === */

:root {
  --hero-from: #667eea;
  --hero-to:   #764ba2;
}


/* === Gradients === */

.bg-gradient-hero {
  background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-to) 100%);
}

.bg-gradient-accent {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.bg-gradient-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
}

.dark .bg-gradient-card {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
}


/* === Typography === */

.text-gradient {
  background: linear-gradient(90deg, #ff0844, #ffb199);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* === Cards === */

/* Enhanced card hover with slight lift */
.card-hover {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-hover:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);
}

.dark .card-hover:hover {
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
}


/* === Animations === */

/* Scroll-triggered fade-in with stagger support */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition:
    opacity   0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* === Navigation === */

/* Frosted-glass navbar */
.nav-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dark .nav-glass {
  background: rgba(15, 23, 42, 0.85);
}


/* === Progress Bar === */

.progress-fill {
  transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* === Checkboxes === */

/* Checked state — gradient fill */
.day-checkbox:checked + .day-label {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-color: transparent;
  transform: scale(1.02);
  box-shadow: 0 10px 15px -3px rgba(102, 126, 234, 0.4);
}

/* Reveal check icon when checked */
.day-checkbox:checked + .day-label .check-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Default label transition */
.day-label {
  transition: all 0.3s ease;
}

/* Check icon springs in when checked */
.check-icon {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: scale(0.5) rotate(-45deg);
}


/* === Decorative Shapes === */

/* Used in hero section for parallax blobs */
.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.5;
  pointer-events: none;
  transition: transform 0.2s ease-out; /* Smooth parallax movement */
}