:root {
  --growin-motion-fast: 140ms cubic-bezier(.22, 1, .36, 1);
  --growin-motion-base: 220ms cubic-bezier(.22, 1, .36, 1);
  --growin-motion-slow: 300ms cubic-bezier(.22, 1, .36, 1);
  --growin-motion-scene: 360ms cubic-bezier(.20, .92, .28, 1);
  --growin-motion-scene-mobile: 300ms cubic-bezier(.22, .94, .30, 1);
  --growin-motion-boot: 620ms cubic-bezier(.22, 1, .36, 1);
  --growin-motion-scene-fill:
    radial-gradient(circle at top center, rgba(202, 166, 75, 0.10), transparent 30%),
    radial-gradient(circle at 18% 22%, rgba(236, 214, 166, 0.16), transparent 26%),
    linear-gradient(180deg, rgba(250, 244, 232, 0.99) 0%, rgba(241, 230, 204, 0.97) 100%);
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.growin-route-busy .nav-btn {
  pointer-events: none;
}

.screen-stage {
  transition: height var(--growin-motion-scene);
  overflow: visible;
  isolation: isolate;
}

.screen-stage.route-transitioning {
  overflow: clip;
}

.screen {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: none;
  will-change: opacity, transform;
  transition:
    opacity var(--growin-motion-scene),
    transform var(--growin-motion-scene),
    filter var(--growin-motion-scene);
}

.screen.active,
.screen[data-route-state="active"] {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  filter: none;
}

.screen.route-preparing,
.screen[data-route-state="preparing"] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: none;
  isolation: isolate;
}

.screen.route-preparing::before,
.screen[data-route-state="preparing"]::before,
.screen[data-route-state="entering"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--growin-motion-scene-fill);
  pointer-events: none;
  z-index: -1;
}

.screen[data-route-state="entering"] {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  filter: none;
  isolation: isolate;
  z-index: 2;
}

.screen[data-route-state="leaving"] {
  opacity: .08;
  visibility: visible;
  transform: translate3d(0, -4px, 0);
  filter: none;
  z-index: 1;
}

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

@keyframes growinRouteFadeInMobile {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

.btn,
.btn-outline,
.goal-add-btn,
.goal-edit-toggle,
.goal-save-btn,
.goal-icon-btn,
.icon-btn,
.goal-check-btn,
.nav-btn,
.notes-tab,
.notes-range-btn,
.analysis-period-btn,
.chart-btn,
.type-btn,
.today-section-head,
.habit-item,
.goal-item,
.notes-entry,
.notes-recent-card,
.chart-hero-card,
.chart-detail-metric,
.chart-detail-panel,
.analysis-item,
.habit-manage-item,
.wish-banner,
.score-block,
.today-card,
.profile-section,
.analysis-period-card,
.analysis-top-card,
.analysis-counts-card,
.analysis-insight-card,
.analysis-actions-card,
.chart-details-card,
.analysis-ai-card,
.habit-segment-card,
.add-habit-form,
.goal-card,
.prompt-card,
.modal-card {
  transition:
    box-shadow var(--growin-motion-base),
    border-color var(--growin-motion-base),
    background var(--growin-motion-base),
    color var(--growin-motion-fast),
    opacity var(--growin-motion-fast),
    filter var(--growin-motion-fast);
}

.form-group input,
.form-group textarea,
.form-group select,
.goal-add-input,
.goal-inline-input,
.habit-manage-weight,
.profile-big-textarea,
.diary-textarea,
.date-picker-row input[type=date],
.notes-date-row input[type=date] {
  transition:
    border-color var(--growin-motion-base),
    box-shadow var(--growin-motion-base),
    background var(--growin-motion-base),
    color var(--growin-motion-fast);
}

#chart-summary,
#chart-day-details,
#chart-period-details,
#analysis-body,
#notes-recent-block,
#notes-ai-card,
#analysis-ai-card {
  animation: none;
}

#notes-recent-block > *,
#notes-content > *,
#analysis-body > *,
#screen-habits .habit-segment-card,
#screen-habits .add-habit-form {
  animation: none;
}

.today-section .today-section-arrow {
  transition: transform var(--growin-motion-base), color var(--growin-motion-fast);
}

.today-section.open .today-section-arrow {
  transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .btn,
  .btn-outline,
  .goal-add-btn,
  .goal-edit-toggle,
  .goal-save-btn,
  .goal-icon-btn,
  .icon-btn,
  .goal-check-btn,
  .nav-btn,
  .notes-tab,
  .notes-range-btn,
  .analysis-period-btn,
  .chart-btn,
  .type-btn,
  .today-section-head,
  .habit-item,
  .goal-item,
  .notes-entry,
  .notes-recent-card,
  .chart-hero-card,
  .chart-detail-metric,
  .chart-detail-panel,
  .analysis-item,
  .habit-manage-item,
  .wish-banner,
  .score-block,
  .today-card,
  .profile-section,
  .analysis-period-card,
  .analysis-top-card,
  .analysis-counts-card,
  .analysis-insight-card,
  .analysis-actions-card,
  .chart-details-card,
  .analysis-ai-card,
  .habit-segment-card,
  .add-habit-form,
  .goal-card,
  .prompt-card,
  .modal-card {
    transition:
      transform var(--growin-motion-base),
      box-shadow var(--growin-motion-base),
      border-color var(--growin-motion-base),
      background var(--growin-motion-base),
      color var(--growin-motion-fast),
      opacity var(--growin-motion-fast),
      filter var(--growin-motion-fast);
  }

  .btn:active,
  .btn-outline:active,
  .goal-add-btn:active,
  .goal-edit-toggle:active,
  .goal-save-btn:active,
  .goal-icon-btn:active,
  .icon-btn:active,
  .goal-check-btn:active,
  .nav-btn:active,
  .notes-tab:active,
  .notes-range-btn:active,
  .analysis-period-btn:active,
  .chart-btn:active,
  .type-btn:active,
  .habit-item:active,
  .goal-item:active,
  .today-section-head:active {
    transform: translateY(1px) scale(.992);
  }
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .screen-stage {
    transition-duration: var(--growin-motion-scene-mobile);
  }

  .screen {
    transition-duration: var(--growin-motion-scene-mobile);
    transform: translate3d(0, 10px, 0);
  }

  .screen.active,
  .screen[data-route-state="active"],
  .screen[data-route-state="entering"] {
    transform: translate3d(0, 0, 0);
  }

  .screen[data-route-state="leaving"] {
    opacity: .06;
    transform: translate3d(0, -3px, 0);
  }

  .btn:active,
  .btn-outline:active,
  .goal-add-btn:active,
  .goal-edit-toggle:active,
  .goal-save-btn:active,
  .goal-icon-btn:active,
  .icon-btn:active,
  .goal-check-btn:active,
  .nav-btn:active,
  .notes-tab:active,
  .notes-range-btn:active,
  .analysis-period-btn:active,
  .chart-btn:active,
  .type-btn:active,
  .habit-item:active,
  .goal-item:active,
  .today-section-head:active {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}