/* ==========================================================================
   SNACK WHEEL — animations.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   VIEW TRANSITIONS
   -------------------------------------------------------------------------- */
[data-view="landing"].is-active  { animation: fadeUp 0.3s ease both; }
[data-view="wheel"].is-active    { animation: fadeUp 0.25s ease both; }
[data-view="detail"].is-active   { animation: slideInRight 0.3s cubic-bezier(0.16,1,0.3,1) both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   RESULT CARD SLIDE UP
   -------------------------------------------------------------------------- */
[data-view="result"].is-active .result-panel {
  animation: resultSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes resultSlideUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* --------------------------------------------------------------------------
   WHEEL STATE ANIMATIONS
   -------------------------------------------------------------------------- */
/* idlePulse and spinning box-shadow removed:
   those rules used inset box-shadow on #wheel when it had border-radius:50%,
   rendering as a circular ring. #wheel is now a transparent-cornered square
   (the circular silhouette comes from the PNG artwork), so an inset box-shadow
   renders as a square frame instead — the unwanted red box the user saw.    */

/* --------------------------------------------------------------------------
   SPIN BUTTON TEXT TRANSITION
   -------------------------------------------------------------------------- */
.btn-spin-stop {
  transition: background 0.2s, transform 0.1s, box-shadow 0.1s;
}

/* --------------------------------------------------------------------------
   LOGO FLOAT — landing page only
   -------------------------------------------------------------------------- */
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

[data-view="landing"].is-active .landing-logo {
  animation: logoFloat 3.5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-view].is-active,
  [data-view="detail"].is-active,
  [data-view="result"].is-active .result-panel,
  [data-view="landing"].is-active .landing-logo,
  #wheel {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}