/* ===========================================================
   Gielinor Dailies — Motion & Animations
   Emil-style: purposeful, fast, physically-grounded
   Apple-style: interruptible, velocity-aware, spatially consistent
   =========================================================== */

:root {
  --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---- Page entrance ---- */
/* `backwards`, NOT `both`. With `both` the final keyframe sticks around, and
   that keyframe's `transform: translateY(0)` is still a transform — which
   makes .main-content a stacking context AND the containing block for every
   position:fixed descendant. That trapped #dayDetail's z-index:200 inside
   .main-content, so the z-index:199 backdrop painted over the panel and ate
   its clicks and wheel events. `backwards` still hides the element before the
   animation starts; it just doesn't persist the end state, which is identical
   to the element's natural styles anyway. */
.main-content {
  animation: page-enter 380ms var(--ease-expo) backwards;
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Flash messages: slide in from above ---- */
.flash-message {
  animation: flash-enter 280ms var(--ease-expo) both;
}

@keyframes flash-enter {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Announcement banners: staggered slide-in ---- */
.announcement-banner {
  animation: ann-enter 320ms var(--ease-expo) both;
}

.announcement-banner:nth-child(1) { animation-delay: 80ms; }
.announcement-banner:nth-child(2) { animation-delay: 150ms; }
.announcement-banner:nth-child(3) { animation-delay: 220ms; }

@keyframes ann-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Mobile menu: smooth slide instead of display toggle ---- */
/* JS only toggles .is-open — safe to override the display:none with max-height */
.mobile-menu {
  display: flex !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    max-height 300ms var(--ease-expo),
    opacity 180ms var(--ease-out);
}

.mobile-menu.is-open {
  max-height: 520px;
  opacity: 1;
  pointer-events: auto;
}

/* ---- Task notes: smooth expand/collapse ---- */
/* JS only toggles .expanded on parent .task-card — safe to override display:none */
.task-notes {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0 !important;
  transition:
    max-height 280ms var(--ease-expo),
    opacity 200ms var(--ease-out),
    margin-top 220ms var(--ease-out);
}

.task-card.expanded .task-notes {
  max-height: 320px;
  opacity: 1;
  margin-top: var(--space-2) !important;
}

/* ---- Progress bars: animate from 0 on first render ---- */
@starting-style {
  .progress-bar {
    width: 0 !important;
  }
}

/* ---- Scroll reveal ---- */
/* Added by animations.js to elements below the fold only */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 420ms var(--ease-expo),
    transform 420ms var(--ease-expo);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside a [data-reveal-list] container */
[data-reveal-list] > .reveal:nth-child(1) { transition-delay: 0ms; }
[data-reveal-list] > .reveal:nth-child(2) { transition-delay: 55ms; }
[data-reveal-list] > .reveal:nth-child(3) { transition-delay: 110ms; }
[data-reveal-list] > .reveal:nth-child(4) { transition-delay: 165ms; }
[data-reveal-list] > .reveal:nth-child(5) { transition-delay: 220ms; }
[data-reveal-list] > .reveal:nth-child(6) { transition-delay: 275ms; }
[data-reveal-list] > .reveal:nth-child(n+7) { transition-delay: 300ms; }

/* ---- Small action button feedback ---- */
.btn-done:active,
.btn-undo:active,
.btn-stop:active {
  transform: scale(0.93);
  transition-duration: 80ms !important;
}

/* ---- Landing page: entrance stagger for hero + steps ---- */
.landing-hero h1 {
  animation: fade-in-up 500ms var(--ease-expo) 50ms both;
}

.landing-hero .subtitle {
  animation: fade-in-up 500ms var(--ease-expo) 150ms both;
}

.landing-hero .landing-cta {
  animation: fade-in-up 500ms var(--ease-expo) 250ms both;
}

.landing-step {
  opacity: 0;
  transform: translateX(-10px);
  animation: step-enter 380ms var(--ease-expo) both;
}

.landing-step:nth-child(1) { animation-delay: 100ms; }
.landing-step:nth-child(2) { animation-delay: 180ms; }
.landing-step:nth-child(3) { animation-delay: 260ms; }
.landing-step:nth-child(4) { animation-delay: 340ms; }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes step-enter {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- Reduced motion: respect system preference ---- */
/* Keep opacity fades but remove all movement */
@media (prefers-reduced-motion: reduce) {
  .main-content,
  .flash-message,
  .announcement-banner,
  .landing-hero h1,
  .landing-hero .subtitle,
  .landing-hero .landing-cta,
  .landing-step {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .mobile-menu,
  .task-notes {
    transition: opacity 120ms ease !important;
  }

  .mobile-menu {
    max-height: none !important;
  }

  .task-notes {
    max-height: none !important;
  }

  .btn-done:active,
  .btn-undo:active,
  .btn-stop:active {
    transform: none !important;
  }
}