/* Motion system.
   Every transition and animation in the app lives here.
   Durations and easings come from tokens.css. */

/* ---------- 1. Entrance of the day ---------- */

@keyframes card-in {
  from { opacity: 0; transform: translate3d(var(--enter-x, 0px), 12px, 0) scale(.986); }
  to   { opacity: 1; transform: none; }
}

.schedule-timeline .timeline-entry {
  animation: card-in var(--dur-base) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

/* The timeline rail grows in behind the cards instead of appearing at once. */
@keyframes rail-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.schedule-timeline::before {
  transform-origin: top center;
  animation: rail-in var(--dur-slow) var(--ease-out) both;
}

/* Section under the lessons follows the cards. */
@keyframes section-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

.clubs-section {
  animation: section-in var(--dur-base) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

.schedule-title,
.empty-day {
  animation: section-in var(--dur-base) var(--ease-out) both;
}

/* ---------- 2. Press feedback ---------- */

.schedule-card,
.club-card,
.round-action,
.action-btn,
.day-tab,
.calendar-day,
.lesson-tool {
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.schedule-card:has(.card-toggle:active) { transform: scale(var(--press-scale)); }
.club-card:active { transform: scale(.968); }
.round-action:active,
.action-btn:active,
.calendar-day:active { transform: scale(.93); }
.day-tab:active { transform: scale(.95); }
.lesson-tool:active { transform: scale(.88); }

/* ---------- 3. Expanding a lesson ---------- */

/* No standing `will-change` here: animateOpen and animateClose set it when a
   panel starts moving and drop it on transitionend. Declared in the stylesheet
   it applied to every panel in the document, which made that clearing a no-op. */
.expanded-panel { overflow: hidden; }

.card-side .lucide {
  transition: transform var(--dur-base) var(--ease-spring);
}

.schedule-card.is-expanded .card-side .lucide { transform: rotate(90deg); }

.schedule-card.is-expanded {
  box-shadow: 0 22px 52px rgba(36, 68, 113, .16), 0 3px 10px rgba(36, 68, 113, .07);
}

/* ---------- 4. Favourite star ---------- */

@keyframes star-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.32) rotate(-8deg); }
  100% { transform: scale(1); }
}

.favorite-star.just-toggled .lucide {
  animation: star-pop var(--dur-slow) var(--ease-spring);
}

.favorite-star .lucide { transition: fill var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }

/* ---------- 5. Day and language swap ---------- */

/* A full re-render is softened by dimming and blurring the content instead of
   fading it out. Fading to zero shows the page background and reads as a flash. */
.app-shell {
  transition:
    opacity var(--dur-fast) var(--ease-in-out),
    filter var(--dur-fast) var(--ease-in-out),
    transform var(--dur-fast) var(--ease-in-out);
}

.app-shell.is-swapping {
  opacity: .58;
  filter: blur(2px) saturate(.92);
  transform: scale(.994);
}

.day-tab { will-change: transform; }

/* Date label under the title changes with a short cross-fade. */
@keyframes label-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.schedule-title span { animation: label-in var(--dur-base) var(--ease-out) both; }

/* ---------- 6. First paint skeleton ---------- */

@keyframes shimmer { from { background-position: -220px 0; } to { background-position: 340px 0; } }

.skeleton-list { display: grid; gap: 14px; padding: 4px 0 0; }

.skeleton-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 88px;
  padding: 16px 18px;
  border-radius: 24px;
  background: var(--sm-card, #fff);
  box-shadow: var(--sm-shadow, 0 18px 44px rgba(36, 68, 113, .10));
}

.skeleton-block,
.skeleton-line {
  background: linear-gradient(90deg, rgba(101, 126, 164, .10) 0%, rgba(101, 126, 164, .18) 50%, rgba(101, 126, 164, .10) 100%);
  background-size: 560px 100%;
  animation: shimmer 1.15s linear infinite;
  border-radius: 8px;
}

.skeleton-block { width: 54px; height: 54px; border-radius: 17px; }
.skeleton-line { height: 12px; }
.skeleton-line + .skeleton-line { margin-top: 9px; }
.skeleton-line.short { width: 42%; }
.skeleton-line.medium { width: 66%; }

.skeleton-list.is-leaving { animation: section-out var(--dur-fast) var(--ease-in-out) both; }
@keyframes section-out { to { opacity: 0; transform: scale(.99); } }

/* ---------- 7. Overlays ---------- */

.settings-scrim,
.calendar-sheet { will-change: opacity, transform; }

dialog::backdrop { animation: scrim-in var(--dur-fast) var(--ease-out) both; }

/* ---------- 8. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 9. Stars and club emphasis ---------- */

.club-star .lucide { transition: fill var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.club-star.just-toggled .lucide { animation: star-pop var(--dur-slow) var(--ease-spring); }

/* Stepping back and coming forward again should read as a change of weight,
   not as a redraw, so size and opacity move together. */
.club-card {
  transition:
    transform var(--dur-fast) var(--ease-out),
    opacity var(--dur-base) var(--ease-out),
    min-height var(--dur-base) var(--ease-out),
    padding var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.club-card .club-icon,
.club-card .club-copy strong {
  transition:
    width var(--dur-base) var(--ease-out),
    height var(--dur-base) var(--ease-out),
    flex-basis var(--dur-base) var(--ease-out),
    border-radius var(--dur-base) var(--ease-out),
    font-size var(--dur-base) var(--ease-out);
}

/* An expanding panel changes the height of a long list, so the browser relays
   out everything under it on every frame. Containing the panel's own layout
   keeps that work off the rest of the day. */
.expanded-panel { contain: layout; }