/* ==========================================================================
   Wsugar Motion Designer & Ultra-Smooth UI Physics
   ========================================================================== */

:root {
  --spring-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-duration: 0.45s;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

.font-display {
  font-family: 'Outfit', sans-serif;
}

/* 1. Hardware Accelerated Floating Header (60 FPS, No Lag) */
#navbar {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, padding;
  transition: padding 0.35s ease-out;
}

.nav-container {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: max-width, padding, background-color, box-shadow;
  transition: max-width 0.4s var(--spring-easing),
              padding 0.35s ease-out,
              background-color 0.25s ease,
              box-shadow 0.35s ease,
              border-color 0.25s ease;
  contain: layout;
}

.nav-logo,
.nav-brand,
.nav-btn {
  transform: translateZ(0);
  transition: transform 0.35s var(--spring-easing),
              width 0.35s ease-out,
              height 0.35s ease-out,
              font-size 0.35s ease-out,
              padding 0.35s ease-out;
}

/* Scrolled state: smooth, lightweight capsule */
.navbar-scrolled {
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}

.navbar-scrolled .nav-container {
  max-width: 980px !important;
  background-color: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 16px 30px -10px rgba(15, 23, 42, 0.12) !important;
  border-color: rgba(226, 232, 240, 0.95) !important;
  padding: 0.5rem 1.75rem !important;
}

.navbar-scrolled .nav-logo {
  height: 2.25rem !important; /* 36px */
  width: 2.25rem !important;
  border-radius: 0.75rem !important;
}

.navbar-scrolled .nav-brand {
  font-size: 1.25rem !important; /* 20px */
}

.navbar-scrolled nav {
  gap: 1.5rem !important;
  font-size: 0.875rem !important;
}

.navbar-scrolled .nav-btn {
  padding: 0.6rem 1.25rem !important;
  font-size: 0.8125rem !important;
}

/* Nav Link Hover Underline */
.nav-link {
  position: relative;
  transition: color 0.25s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #0EA5E9;
  border-radius: 9999px;
  transition: width 0.3s var(--spring-easing);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link:hover {
  color: #0F172A;
}

/* 2. Kinetic Spring Micro-Interactions */
.btn-spring {
  transition: transform 0.3s var(--spring-easing),
              box-shadow 0.3s var(--spring-easing),
              background-color 0.2s ease;
  will-change: transform;
}

.btn-spring:hover {
  transform: scale(1.02);
}

.btn-spring:active {
  transform: scale(0.97);
}

.card-interactive {
  transition: transform 0.35s var(--spring-easing),
              box-shadow 0.35s var(--spring-easing),
              border-color 0.25s ease;
  will-change: transform;
}

.card-interactive:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 20px 35px -15px rgba(15, 23, 42, 0.1);
  border-color: rgba(14, 165, 233, 0.35);
}

/* 3. Mouse Radial Spotlight Glow Effect */
.spotlight-card {
  position: relative;
  background-clip: padding-box;
}

.spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
    rgba(14, 165, 233, 0.08),
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.spotlight-card:hover::before {
  opacity: 1;
}

/* 4. Floating Pill Badges Animation */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.floating-slow {
  animation: floatSlow 5s ease-in-out infinite;
}

.floating-delay {
  animation: floatSlow 6s ease-in-out 1.5s infinite;
}

/* 5. Calendar Day Buttons & Meal Cards */
.day-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 10px 14px;
  border-radius: 18px;
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #64748B;
  cursor: pointer;
  transition: transform 0.3s var(--spring-easing),
              background-color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.3s var(--spring-easing);
  user-select: none;
}

.day-btn .day-name {
  font-size: 15px;
  font-weight: 800;
}

.day-btn .day-status {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.8;
  margin-top: 2px;
}

.day-btn:hover {
  border-color: #0EA5E9;
  color: #0EA5E9;
  transform: translateY(-1.5px);
}

.day-btn:active {
  transform: scale(0.97);
}

.day-btn.active {
  background-color: #0EA5E9;
  border-color: #0EA5E9;
  color: #FFFFFF;
  box-shadow: 0 6px 14px -4px rgba(14, 165, 233, 0.28);
  transform: translateY(-1.5px) scale(1.015);
}

.meal-card {
  transition: opacity 0.35s var(--spring-easing),
              transform 0.35s var(--spring-easing);
  opacity: 1;
  transform: translateY(0);
}

.meal-card.fade-out {
  opacity: 0;
  transform: translateY(12px) scale(0.97);
}

/* 6. Interactive Filter Tabs */
.filter-tab {
  background: #F1F5F9;
  color: #475569;
  border: 1px solid transparent;
}

.filter-tab:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.filter-tab.active {
  background: #0F172A;
  color: #FFFFFF;
  box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.3);
}

.goal-btn {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #94A3B8;
}

.goal-btn.active {
  background: #0EA5E9;
  border-color: #0EA5E9;
  color: #FFFFFF;
}

/* Stagger transition classes */
.dish-card {
  transition: opacity 0.4s var(--spring-easing),
              transform 0.4s var(--spring-easing);
  opacity: 1;
  transform: translateY(0);
}

.dish-card.card-hidden {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

/* 7. Novelty 3D Porthole Stage */
#plate-base {
  transform: translateZ(0);
  will-change: transform;
}

#falling-steak {
  transform: translateZ(0);
  will-change: transform, filter, opacity;
}

#impact-shockwave {
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* 8. Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transform: none !important;
    filter: none !important;
  }
}