/* premium.css — Motion layer
   Modern Mono+Scarlet design system.
   Loads after all other stylesheets — animation/transition only.
   No colors, no layout, no typography overrides. */

/* ─────────────────────────────────────────────────────────────
   KEYFRAME ANIMATIONS
   ───────────────────────────────────────────────────────────── */

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

@keyframes p-scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes p-scorePop {
  0%   { opacity: 0; transform: scale(0.9); }
  65%  { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

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

@keyframes p-cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Rubber-stamp thunk — scale down + rotation settle.
   Target elements carry their own resting rotation via a CSS var. */
@keyframes p-stampIn {
  0%   { opacity: 0; transform: scale(1.25) rotate(3deg); }
  70%  { opacity: 1; transform: scale(0.97) rotate(var(--stamp-rot, -5deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--stamp-rot, -5deg)); }
}

/* ─────────────────────────────────────────────────────────────
   ENTRANCE CHOREOGRAPHY (motion-safe only)
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {

  /* ── Landing (scarlet poster) ── */
  .landing-shield svg {
    --stamp-rot: -4deg;
    animation: p-stampIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
  }
  .landing-script {
    animation: p-fadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;
  }
  .landing-headline {
    animation: p-fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
  }
  .landing-subtext {
    animation: p-fadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
  }
  .landing-stats {
    animation: p-fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
  }
  .landing-action-card:nth-of-type(1) {
    animation: p-cardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
  }
  .landing-action-card:nth-of-type(2) {
    animation: p-cardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.44s both;
  }
  .landing-auth-note {
    animation: p-fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both;
  }

  /* ── Setup views — elements enter when screen becomes visible ── */
  #home-screen:not(.hidden) .setup-title-block {
    animation: p-fadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.02s both;
  }
  #home-screen:not(.hidden) #start-btn {
    animation: p-cardIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
  }
  #home-screen:not(.hidden) .home-card {
    animation: p-cardIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both;
  }
  #home-screen:not(.hidden) #weekly-challenge-card {
    animation: p-cardIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
  }
  #home-screen:not(.hidden) .home-setup-footer-links {
    animation: p-fadeUp 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
  }

  /* ── Summary screen ── */
  #summary-screen:not(.hidden) .summary-hero {
    animation: p-scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.02s both;
  }
  #summary-screen:not(.hidden) .summary-stamp {
    --stamp-rot: -5deg;
    animation: p-stampIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
  }
  /* Certified Prime — slams in late, harder overshoot */
  #summary-screen:not(.hidden) .summary-cert-stamp:not(.hidden) {
    --stamp-rot: 8deg;
    animation: p-stampIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
  }
  #summary-screen:not(.hidden) .summary-score {
    animation: p-scorePop 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
  }
  #summary-screen:not(.hidden) .summary-actions {
    animation: p-fadeUp 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
  }
  #summary-screen:not(.hidden) .summary-table-wrap {
    animation: p-cardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
  }
  #summary-screen:not(.hidden) .scoring-explainer {
    animation: p-cardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
  }

  /* ── Leaderboard screen ── */
  #leaderboard-screen:not(.hidden) .leaderboard-hero {
    animation: p-fadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.02s both;
  }
  #leaderboard-screen:not(.hidden) .leaderboard-table-wrap {
    animation: p-cardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
  }

  /* ── Drill feedback panel ── */
  .feedback-panel:not(.hidden) {
    animation: p-feedbackSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* ── Modals ── */
  .auth-modal-overlay:not(.hidden) .auth-modal-panel {
    animation: p-scaleIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .settings-overlay:not(.hidden) .settings-box {
    animation: p-scaleIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* ── Grade button press feel ── */
  .grade-btn:active,
  .contribute-grade-btn:active {
    transform: scale(0.97);
  }
}

/* ─────────────────────────────────────────────────────────────
   REDUCED MOTION — kill everything decorative
   ───────────────────────────────────────────────────────────── */

@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;
  }
}