: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);
}

html {
  scroll-behavior: smooth;
}

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

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

.screen.active {
  animation: growinRouteFadeIn var(--growin-motion-base) both;
}

@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-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: growinSoftBlockIn 240ms cubic-bezier(.22, 1, .36, 1) both;
}

#notes-recent-block > *,
#notes-content > *,
#analysis-body > *,
#screen-habits .habit-segment-card,
#screen-habits .add-habit-form {
  animation: growinSoftBlockIn 220ms cubic-bezier(.22, 1, .36, 1) both;
}

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

.today-section .today-section-body {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 12px 0;
  transition:
    max-height var(--growin-motion-slow),
    opacity var(--growin-motion-base),
    padding var(--growin-motion-base);
}

.today-section.open .today-section-body {
  max-height: 1500px;
  opacity: 1;
  padding: 0 12px 12px;
}

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

@media (hover: hover) and (pointer: fine) {
  .btn,
  .btn-outline,
  .goal-add-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-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.active {
    animation: growinRouteFadeInMobile 150ms ease-out both;
  }

  .today-section .today-section-body {
    transition:
      max-height 180ms ease,
      opacity 140ms ease,
      padding 140ms ease;
  }

  .btn:active,
  .btn-outline:active,
  .goal-add-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 (max-width: 640px) {
  .today-section .today-section-body {
    padding: 0 8px 0;
  }

  .today-section.open .today-section-body {
    max-height: 1600px;
    padding: 0 8px 10px;
  }
}

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

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

  .today-section .today-section-body,
  .today-section.open .today-section-body {
    max-height: none;
    opacity: 1;
  }
}