/**
 * Grounded motion system — calm, premium, restrained.
 *
 * Tokens + first-pass overrides for abrupt UI state changes.
 * Do not animate Scripture / prayer / Guidance reading text.
 * Do not delay navigation or save actions.
 */

:root {
  --motion-duration-xs: 150ms;
  --motion-duration-sm: 180ms;
  --motion-duration-md: 220ms;
  --motion-duration-lg: 250ms;
  --motion-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --motion-ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-distance-sm: 6px;
  --motion-distance-md: 10px;
  --motion-press-scale: 0.98;
}

@keyframes groundedEnterSoft {
  from {
    opacity: 0;
    transform: translateY(var(--motion-distance-sm));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes groundedScreenEnter {
  from {
    opacity: 0;
    transform: translateY(var(--motion-distance-sm));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Opt-in section / card entrance on initial render */
.grounded-enter {
  animation: groundedEnterSoft var(--motion-duration-md) var(--motion-ease-out) both;
}

/* ── Tab content ── */
.screen {
  animation: groundedScreenEnter var(--motion-duration-md) var(--motion-ease-out);
}

/* ── Bottom sheets: shorter, no spring overshoot; ease-out in / ease-in out ── */
.theme-education-sheet,
.weekly-journey-sheet,
.grounded-auth-sheet,
.grounded-premium-sheet,
.theme-picker-overlay,
.gg-saved-modal,
.gg-announcement {
  transition:
    opacity var(--motion-duration-md) var(--motion-ease-in),
    visibility 0s linear var(--motion-duration-md);
}

.theme-education-sheet.theme-education-sheet--open,
.weekly-journey-sheet.weekly-journey-sheet--open,
.grounded-auth-sheet.grounded-auth-sheet--open,
.grounded-premium-sheet.grounded-premium-sheet--open,
.theme-picker-overlay.theme-picker-overlay--open,
.gg-saved-modal.gg-saved-modal--open,
.gg-announcement.gg-announcement--open {
  transition:
    opacity var(--motion-duration-md) var(--motion-ease-out),
    visibility 0s linear 0s;
}

.theme-education-sheet__panel,
.weekly-journey-sheet__panel,
.grounded-auth-sheet__panel,
.grounded-premium-sheet__panel,
.theme-picker-sheet-wrap,
.gg-saved-modal__card {
  transition: transform var(--motion-duration-lg) var(--motion-ease-in);
}

.theme-education-sheet.theme-education-sheet--open .theme-education-sheet__panel,
.weekly-journey-sheet.weekly-journey-sheet--open .weekly-journey-sheet__panel,
.grounded-auth-sheet.grounded-auth-sheet--open .grounded-auth-sheet__panel,
.grounded-premium-sheet.grounded-premium-sheet--open .grounded-premium-sheet__panel,
.theme-picker-overlay.theme-picker-overlay--open .theme-picker-sheet-wrap,
.gg-saved-modal.gg-saved-modal--open .gg-saved-modal__card {
  transition: transform var(--motion-duration-lg) var(--motion-ease-out);
}

/* Soften premium paywall stagger (was ~90ms steps / 12px travel) */
.grounded-premium-sheet__reveal {
  transform: translateY(var(--motion-distance-md));
  transition:
    opacity var(--motion-duration-md) var(--motion-ease-out),
    transform var(--motion-duration-md) var(--motion-ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 35ms);
}

/* ── Accordion: chevron + profile expand only (no scripture body motion) ── */
.word-details summary::after {
  transition: transform var(--motion-duration-sm) var(--motion-ease-out);
}

.profile-about-details[open] > *:not(summary) {
  animation: groundedEnterSoft var(--motion-duration-md) var(--motion-ease-out) both;
}

/* ── Pressed states ──
   Local transform transitions (no longer inherited from body *).
   Only components that already use :active scale / were motion first-pass CTAs. */
.theme-education-sheet__btn {
  transition:
    transform var(--motion-duration-xs) var(--motion-ease-out),
    opacity var(--motion-duration-xs) var(--motion-ease);
}

.header-btn,
.home-core-retry-btn,
.weekly-journey-sheet__continue,
.cr-chapter-pill,
.cr-back {
  transition: transform var(--motion-duration-xs) var(--motion-ease-out);
}

.weekly-journey-sheet__close {
  transition:
    opacity var(--motion-duration-sm) var(--motion-ease),
    background var(--motion-duration-sm) var(--motion-ease),
    transform var(--motion-duration-xs) var(--motion-ease-out);
}

.theme-education-sheet__btn:active,
.home-start-moment-btn:active,
.home-weekly-explore-btn:active,
.settings-save-btn:active,
.grounded-today-premium-card .gtpc-cta:active,
.journey-card[role='button']:active,
.header-btn:active,
.home-core-retry-btn:active,
.weekly-journey-sheet__continue:active,
.weekly-journey-sheet__close:active,
.cr-chapter-pill:active,
.cr-back:active {
  transform: scale(var(--motion-press-scale));
}

.nav-item:active {
  transform: scale(0.97);
}

/* ── Save / completion confirmations ── */
.verse-fs-toast {
  transition:
    opacity var(--motion-duration-sm) var(--motion-ease-out),
    transform var(--motion-duration-sm) var(--motion-ease-out);
}

.vb-toast,
.gr-session-toast {
  transition: opacity var(--motion-duration-sm) var(--motion-ease-out);
}

.settings-save-bar {
  transition:
    opacity var(--motion-duration-md) var(--motion-ease-out),
    transform var(--motion-duration-md) var(--motion-ease-out);
}

.wj-deeper__reflection-save-hint {
  transition:
    color var(--motion-duration-sm) var(--motion-ease),
    opacity var(--motion-duration-sm) var(--motion-ease);
}

.settings-save-btn.saved .ssb-check {
  animation: groundedEnterSoft var(--motion-duration-sm) var(--motion-ease-out) both;
}

/* ── Progress ── */
.home-weekly-pdot {
  transition:
    background var(--motion-duration-sm) var(--motion-ease-out),
    border-color var(--motion-duration-sm) var(--motion-ease-out),
    box-shadow var(--motion-duration-sm) var(--motion-ease-out);
}

.wj-flow-progress__pip {
  transition:
    background var(--motion-duration-sm) var(--motion-ease-out),
    width var(--motion-duration-sm) var(--motion-ease-out);
}

.spx-progress-fill,
#screen-scriptureplus .spx-progress-fill,
#screen-scriptureplus .spx-continue-progress .spx-progress-fill,
.study-app-root--reading .study-reading-progress-fill,
.jny-mvrow-progress__fill {
  transition: width var(--motion-duration-md) var(--motion-ease-out);
}

.study-app-root--reading .study-reading-progress-dot,
.study-app-root--reading .study-reading-progress-dot--active {
  transition:
    background var(--motion-duration-sm) var(--motion-ease-out),
    width var(--motion-duration-sm) var(--motion-ease-out),
    height var(--motion-duration-sm) var(--motion-ease-out),
    box-shadow var(--motion-duration-sm) var(--motion-ease-out);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-xs: 1ms;
    --motion-duration-sm: 1ms;
    --motion-duration-md: 1ms;
    --motion-duration-lg: 1ms;
    --motion-distance-sm: 0px;
    --motion-distance-md: 0px;
    --motion-press-scale: 1;
  }

  .screen,
  .grounded-enter,
  .profile-about-details[open] > *:not(summary),
  .settings-save-btn.saved .ssb-check {
    animation: none !important;
  }

  .theme-education-sheet__panel,
  .weekly-journey-sheet__panel,
  .grounded-auth-sheet__panel,
  .grounded-premium-sheet__panel,
  .theme-picker-sheet-wrap,
  .gg-saved-modal__card,
  .grounded-premium-sheet__reveal {
    transition-duration: 1ms !important;
    transform: none !important;
  }

  .theme-education-sheet.theme-education-sheet--open .theme-education-sheet__panel,
  .weekly-journey-sheet.weekly-journey-sheet--open .weekly-journey-sheet__panel,
  .grounded-auth-sheet.grounded-auth-sheet--open .grounded-auth-sheet__panel,
  .grounded-premium-sheet.grounded-premium-sheet--open .grounded-premium-sheet__panel,
  .theme-picker-overlay.theme-picker-overlay--open .theme-picker-sheet-wrap,
  .gg-saved-modal.gg-saved-modal--open .gg-saved-modal__card {
    transform: none !important;
  }
}