/* ============================================================
   MyFitAI — Polish layer
   Page-load choreography, hover micro-interactions and an ambient
   animated backdrop. Loaded after tokens.css on every page.
   ============================================================ */

/* ---- Ambient animated backdrop (behind everything, very subtle) ---- */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(200,255,77,0.07), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(63,214,192,0.06), transparent 45%);
  animation:driftGlow 22s ease-in-out infinite alternate;
}
@keyframes driftGlow{
  0%{background-position:0% 0%, 100% 100%;}
  100%{background-position:8% 6%, 92% 94%;}
}

/* ---- Page-load choreography ---- */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
.glass, .feature-card, .widget, .result-card, .option-card, .stat{
  animation:fadeUp 560ms var(--ease) both;
}
/* Staggered entrance for grids/lists */
.feature-grid > *:nth-child(1),.widget-grid > *:nth-child(1),.results-grid > *:nth-child(1),.stats-strip > *:nth-child(1){animation-delay:0ms;}
.feature-grid > *:nth-child(2),.widget-grid > *:nth-child(2),.results-grid > *:nth-child(2),.stats-strip > *:nth-child(2){animation-delay:60ms;}
.feature-grid > *:nth-child(3),.widget-grid > *:nth-child(3),.results-grid > *:nth-child(3),.stats-strip > *:nth-child(3){animation-delay:120ms;}
.feature-grid > *:nth-child(4),.widget-grid > *:nth-child(4),.results-grid > *:nth-child(4){animation-delay:180ms;}
.feature-grid > *:nth-child(5),.results-grid > *:nth-child(5){animation-delay:240ms;}
.feature-grid > *:nth-child(6),.results-grid > *:nth-child(6){animation-delay:300ms;}
.results-grid > *:nth-child(7){animation-delay:360ms;}
.results-grid > *:nth-child(8){animation-delay:420ms;}

/* ---- Sidebar nav: sliding highlight + icon nudge ---- */
.sidebar nav a{position:relative;overflow:hidden;}
.sidebar nav a::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--lime);transform:scaleY(0);transition:transform var(--dur-fast) var(--ease);
  transform-origin:bottom;
}
.sidebar nav a.active::before{transform:scaleY(1);}
.sidebar nav a:hover{transform:translateX(3px);}

/* ---- Glass cards: soft hover lift everywhere it makes sense ---- */
.widget, .result-card, .feature-card{
  transition:transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.widget:hover, .result-card:hover{
  transform:translateY(-3px);
  border-color:var(--glass-hi);
  box-shadow:var(--shadow-lift);
}

/* ---- Option cards (onboarding): tactile selection feedback ---- */
.option-card{transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);}
.option-card:active{transform:scale(0.98);}
.option-card.selected{animation:selectPop 340ms var(--ease);}
@keyframes selectPop{
  0%{transform:scale(1);}
  40%{transform:scale(1.02);}
  100%{transform:scale(1);}
}

/* ---- Buttons: subtle shine sweep on hover ---- */
.btn-primary{position:relative;overflow:hidden;}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg);transition:left 550ms var(--ease);
}
.btn-primary:hover::after{left:130%;}

/* ---- Logo dot: gentle pulse, reads as "live" ---- */
.logo .dot, .auth-logo .dot{
  animation:pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 0 rgba(200,255,77,0.5);}
  50%{box-shadow:0 0 0 5px rgba(200,255,77,0);}
}

/* ---- Progress bar fill: smooth animated width ---- */
.onb-progress .seg span{transition:width 420ms var(--ease);}

/* ---- Toast: gentle bounce-in ---- */
.toast.show{animation:toastIn 380ms var(--ease);}
@keyframes toastIn{
  0%{transform:translateX(-50%) translateY(20px);opacity:0;}
  60%{transform:translateX(-50%) translateY(-4px);opacity:1;}
  100%{transform:translateX(-50%) translateY(0);}
}

/* ---- Macro ring: gentle continuous rotation of the track glow ---- */
.macro-ring .fill{filter:drop-shadow(0 0 6px rgba(200,255,77,0.45));}

/* ---- Chip / tag micro-interaction ---- */
.chip{transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);}
.chip:hover{transform:translateY(-1px);border-color:var(--lime-dim);}
.chip.selected{animation:selectPop 340ms var(--ease);}

@media (prefers-reduced-motion: reduce){
  body::before{animation:none;}
  .glass, .feature-card, .widget, .result-card, .option-card, .stat{animation:none;}
}