/* PsychoApp premium motion system — shared by web, PWA and Android WebView.
   Principle: content fades in without changing layout geometry. */
:root {
  --motion-fast: 680ms;
  --motion-base: 680ms;
  --motion-slow: 680ms;
  --motion-exit: 680ms;
  --motion-ease-out: cubic-bezier(.22, 1, .36, 1);
  interpolate-size: allow-keywords;
}

@keyframes premium-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes premium-icon-breathe {
  0%, 100% { transform: scale(1); opacity: .88; }
  50% { transform: scale(1.035); opacity: 1; }
}

@keyframes micro-soft-reveal {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes micro-bookmark-pop {
  0% { transform: scale(1); }
  45% { transform: scale(.82); }
  100% { transform: scale(1); }
}

@keyframes micro-line-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Route/page entry: opacity only. No transform, so sticky/fixed descendants keep native geometry. */
  #root > :not(.boot),
  .workspace-body,
  .chat-layout,
  .chat-experience,
  .profile-settings-page,
  .app-ecosystem-view,
  .diaries-view,
  .supports-view,
  .patterns-view,
  .insights-view,
  .self-map-view,
  .self-knowledge-view {
    animation: premium-fade-in var(--motion-base) ease-out both;
  }

  /* Major content blocks/cards: true fade-in with subtle stagger only by time. */
  .workspace-body > :not([data-motion-presence]),
  .profile-settings-page > :not([data-motion-presence]),
  .profile-settings-card > :not([data-motion-presence]),
  .settings-row,
  .panel-section,
  .conversation-nudge,
  .suggested-chips,
  .chat-welcome,
  .chat-starter-card,
  .chat-pattern-context-card,
  .workspace-body :is(article, [class$="-card"], [class*="-card "]) {
    animation: premium-fade-in var(--motion-base) ease-out both;
  }

  .workspace-body > :nth-child(2),
  .profile-settings-card > :nth-child(2) { animation-delay: 45ms; }
  .workspace-body > :nth-child(3),
  .profile-settings-card > :nth-child(3) { animation-delay: 80ms; }
  .workspace-body > :nth-child(4),
  .profile-settings-card > :nth-child(4) { animation-delay: 115ms; }
  .workspace-body > :nth-child(n+5),
  .profile-settings-card > :nth-child(n+5) { animation-delay: 145ms; }

  /* Chat continuations and new messages fade in; action buttons stagger without moving. */
  .conversation-nudge,
  .suggested-chips,
  .messages > *,
  .chat-messages > *,
  .message-list > * {
    animation: premium-fade-in 680ms ease both;
  }

  .conversation-nudge .tool-actions > :nth-child(1),
  .suggested-chips > :nth-child(1) { animation: premium-fade-in 680ms ease 35ms both; }
  .conversation-nudge .tool-actions > :nth-child(2),
  .suggested-chips > :nth-child(2) { animation: premium-fade-in 680ms ease 80ms both; }
  .conversation-nudge .tool-actions > :nth-child(3),
  .suggested-chips > :nth-child(3) { animation: premium-fade-in 680ms ease 125ms both; }

  /* Entering dialogs/backdrops. Exit is handled by MotionPresence where the node is conditionally unmounted. */
  body [role="dialog"]:not([data-motion-presence]),
  .menu-popover:not(.hidden) {
    animation: premium-fade-in 680ms ease both;
  }

  [class$="-backdrop"]:not([data-motion-presence]),
  [class*="-backdrop "]:not([data-motion-presence]) {
    animation: premium-fade-in 680ms ease both;
  }

  details[open] > :not(summary),
  .sleep-quality-picker[open] .sleep-quality-menu {
    animation: premium-fade-in 680ms ease both;
  }

  details::details-content {
    overflow: hidden;
    block-size: 0;
    opacity: 0;
    transform: scaleY(.985);
    transform-origin: top;
    transition:
      block-size 680ms ease,
      opacity 680ms ease,
      transform 680ms ease,
      content-visibility 680ms allow-discrete;
  }

  details[open]::details-content {
    block-size: auto;
    opacity: 1;
    transform: scaleY(1);
  }

  /* Presence lifecycle: real fade-in and fade-out for conditionally rendered overlays. */
  [data-motion-presence="true"] {
    opacity: 1;
    transition: opacity 680ms ease;
  }
  [data-motion-presence="true"][data-motion-state="entering"] {
    opacity: 0;
  }
  [data-motion-presence="true"][data-motion-state="entered"] {
    opacity: 1;
  }
  [data-motion-presence="true"][data-motion-state="exiting"] {
    opacity: 0;
    pointer-events: none;
    transition-duration: var(--motion-exit);
  }

  /* Progress info is a tooltip, not a generic popover. Keep it hidden until hover/focus/click. */
  html body .user-shell .progress-view .progress-info-popover {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transition: opacity 680ms ease, visibility 0s linear 680ms !important;
  }
  html body .user-shell .progress-view .progress-info-wrap:hover .progress-info-popover,
  html body .user-shell .progress-view .progress-info-wrap:focus-within .progress-info-popover,
  html body .user-shell .progress-view .progress-info-popover.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 680ms ease, visibility 0s linear 0s !important;
  }

  /* The practices right rail uses JS fixed/absolute positioning. Never animate its geometry. */
  html body .user-shell .practices-view .practices-side-column {
    animation: none !important;
    transform: none !important;
  }

  /* Production landing: existing IntersectionObserver reveals sections; cards fade in after section visibility. */
  .topbar.page,
  .hero.page > *,
  .landing-hero.page > *,
  .section.page > h2,
  .section.page > .section-lead,
  .preview,
  .feature,
  .plan,
  .trust-row > * {
    animation: premium-fade-in var(--motion-slow) ease-out both;
  }

  .hero.page > :nth-child(2) { animation-delay: 90ms; }
  .trust-row > :nth-child(1), .feature-grid > :nth-child(1), .plans > :nth-child(1) { animation-delay: 50ms; }
  .trust-row > :nth-child(2), .feature-grid > :nth-child(2), .plans > :nth-child(2) { animation-delay: 100ms; }
  .trust-row > :nth-child(3), .feature-grid > :nth-child(3), .plans > :nth-child(3) { animation-delay: 150ms; }

  .landing-page .landing-reveal.is-visible :is(
    .capabilities-grid,
    .ecosystem-card-grid,
    .memory-grid,
    .difference-grid,
    .landing-continuity-grid,
    .audience-grid,
    .states-grid,
    .how-grid,
    .pricing-grid,
    .landing-pattern-insight-grid
  ) > * {
    animation: premium-fade-in 680ms ease both;
  }

  .landing-page .landing-reveal.is-visible :is(
    .capabilities-grid,
    .ecosystem-card-grid,
    .memory-grid,
    .difference-grid,
    .landing-continuity-grid,
    .audience-grid,
    .states-grid,
    .how-grid,
    .pricing-grid,
    .landing-pattern-insight-grid
  ) > :nth-child(2) { animation-delay: 55ms; }

  .landing-page .landing-reveal.is-visible :is(
    .capabilities-grid,
    .ecosystem-card-grid,
    .memory-grid,
    .difference-grid,
    .landing-continuity-grid,
    .audience-grid,
    .states-grid,
    .how-grid,
    .pricing-grid,
    .landing-pattern-insight-grid
  ) > :nth-child(3) { animation-delay: 100ms; }

  .landing-page .landing-reveal.is-visible :is(
    .capabilities-grid,
    .ecosystem-card-grid,
    .memory-grid,
    .difference-grid,
    .landing-continuity-grid,
    .audience-grid,
    .states-grid,
    .how-grid,
    .pricing-grid,
    .landing-pattern-insight-grid
  ) > :nth-child(n+4) { animation-delay: 140ms; }

  /* Controls change colour/shadow smoothly, but never move. */
  button,
  a,
  [role="button"],
  input,
  textarea,
  select {
    transition:
      box-shadow 680ms ease,
      border-color 680ms ease,
      background-color 680ms ease,
      color 680ms ease,
      opacity 680ms ease;
  }

  /* Only the icon itself may move on hover. */
  button > svg,
  a > svg,
  [role="button"] > svg {
    transition: transform 680ms ease, opacity 680ms ease;
    transform-origin: center;
  }

  button:not(.practice-bookmark):hover > svg,
  a:hover > svg,
  [role="button"]:hover > svg {
    transform: scale(1.06);
  }

  /* Shared expand/collapse surfaces: one timing contract, with a soft top-origin transform. */
  .journal-entry-body,
  .support-preview-text,
  .saved-insight-text,
  .diary-audio-list,
  .quick-journal-entry-card,
  .growth-quote-picker,
  .practice-state-grid--inline {
    transform-origin: top;
    transition-duration: 680ms !important;
    transition-timing-function: ease !important;
  }

  .support-preview-text,
  .saved-insight-text {
    transform: scaleY(.985);
    transition-property: max-height, opacity, transform !important;
  }

  .support-preview-item.is-expanded .support-preview-text,
  .saved-insight-card.is-expanded .saved-insight-text {
    transform: scaleY(1);
  }

  /* Shared micro-interaction primitives. */
  .micro-icon-swap {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--micro-icon-size, 18px);
    height: var(--micro-icon-size, 18px);
    flex: 0 0 auto;
    line-height: 0;
    vertical-align: middle;
  }

  .micro-icon-layer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0);
    transition: opacity 680ms ease, transform 680ms ease, filter 680ms ease;
    transform-origin: center;
  }

  .micro-icon-layer svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: none !important;
    transition: none !important;
  }

  .micro-icon-layer--on {
    opacity: 0;
    transform: scale(.44) rotate(-70deg);
    filter: blur(3px);
  }

  .micro-icon-swap[data-micro-active="true"] .micro-icon-layer--off {
    opacity: 0;
    transform: scale(.44) rotate(70deg);
    filter: blur(3px);
  }

  .micro-icon-swap[data-micro-active="true"] .micro-icon-layer--on {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0);
  }

  .micro-success-button {
    transition: background-color 680ms ease, border-color 680ms ease, color 680ms ease, box-shadow 680ms ease, transform 680ms ease;
  }

  .micro-success-button.is-success {
    background-color: rgba(229, 242, 235, .96) !important;
    border-color: rgba(47, 127, 115, .26) !important;
    color: #1f6257 !important;
  }

  .micro-animated-number {
    display: inline-block;
    min-width: 1ch;
    font-variant-numeric: tabular-nums;
    transform-origin: center bottom;
    transition: transform 680ms ease, opacity 680ms ease;
  }

  .metric-control strong {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    transform: translateY(0) scale(1);
    transition: transform 680ms ease, background-color 680ms ease, box-shadow 680ms ease;
  }

  .metric-control:focus-within strong {
    transform: translateY(-2px) scale(1.04);
    background: rgba(229, 242, 235, .72);
    box-shadow: 0 8px 20px -18px rgba(31, 98, 87, .55);
  }

  .tool-textarea,
  .quick-journal-textarea,
  .journal-entry-edit-textarea {
    field-sizing: content;
    min-height: 74px;
    max-height: 240px;
    transition: min-height 680ms ease, height 680ms ease, border-color 680ms ease, box-shadow 680ms ease, background-color 680ms ease;
  }

  .journal-mood-option,
  .practice-state-grid--inline button,
  .practice-outcome-prompt button {
    position: relative;
  }

  .journal-mood-option::after,
  .practice-state-grid--inline button::after,
  .practice-outcome-prompt button::after {
    content: "";
    width: 5px;
    height: 9px;
    position: absolute;
    top: 8px;
    right: 9px;
    margin-left: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0;
    transform: rotate(45deg) scale(.45);
    transform-origin: center;
    transition: opacity 680ms ease, transform 680ms ease;
  }

  .journal-mood-option.is-selected::after,
  .practice-state-grid--inline button.active::after,
  .practice-outcome-prompt button.active::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }

  .practice-bookmark svg {
    transition: transform 680ms ease, fill 680ms ease, stroke 680ms ease;
  }

  .practice-bookmark.active svg {
    animation: micro-bookmark-pop 680ms ease both;
  }

  .saved-insight-card .saved-insight-text,
  .guided-result-insights > div {
    animation: micro-soft-reveal 680ms ease both;
  }

  [aria-expanded="true"] > svg:not(.spin) {
    transform: rotate(180deg);
  }

  /* Very limited ambient movement for decorative/assistive icons only. */
  .practice-recommendation svg,
  .empty-state [class*="icon"] {
    animation: premium-icon-breathe 4.4s ease-in-out infinite;
  }
}

/* Interactive rounded single-line chart, adapted to the PsychoApp motion language. */
.interactive-rounded-line {
  --rounded-line-color: #1e5f56;
  --rounded-line-surface: rgba(255, 253, 248, 0.97);
  --rounded-line-grid: rgba(120, 92, 55, 0.12);
  --rounded-line-muted: #66766f;
  --rounded-line-area-start: 0.18;
  --rounded-line-area-end: 0.015;
  overflow: visible;
  outline: none;
  cursor: crosshair;
  touch-action: pan-y;
}

.interactive-rounded-line:focus-visible {
  filter: drop-shadow(0 0 7px rgba(30, 95, 86, 0.14));
}

.interactive-rounded-line__grid {
  stroke: var(--rounded-line-grid);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  pointer-events: none;
}

.interactive-rounded-line__area-stop {
  stop-color: var(--rounded-line-color);
}

.interactive-rounded-line__area-stop--start {
  stop-opacity: var(--rounded-line-area-start);
}

.interactive-rounded-line__area-stop--end {
  stop-opacity: var(--rounded-line-area-end);
}

.interactive-rounded-line__area {
  opacity: 1;
  pointer-events: none;
}

.interactive-rounded-line__path {
  fill: none;
  stroke: var(--rounded-line-color);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  pointer-events: none;
}

.interactive-rounded-line__point {
  fill: var(--rounded-line-color);
  opacity: 0.46;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1);
  transition: opacity 680ms ease, transform 680ms ease, fill 680ms ease;
  pointer-events: none;
}

.interactive-rounded-line__point.is-last {
  opacity: 1;
  stroke: var(--rounded-line-surface);
  stroke-width: 3;
}

.interactive-rounded-line__point.is-active {
  opacity: 0;
  transform: scale(1.7);
}

.interactive-rounded-line__guide {
  stroke: var(--rounded-line-color);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0.28;
  pointer-events: none;
}

.interactive-rounded-line__halo {
  fill: none;
  stroke: var(--rounded-line-color);
  stroke-width: 2;
  opacity: 0.2;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

.interactive-rounded-line__active-dot {
  fill: var(--rounded-line-color);
  stroke: var(--rounded-line-surface);
  stroke-width: 3;
  pointer-events: none;
}

.interactive-rounded-line__tooltip {
  pointer-events: none;
}

.interactive-rounded-line__tooltip rect {
  fill: var(--rounded-line-surface);
  stroke: rgba(120, 92, 55, 0.14);
  stroke-width: 1;
  filter: drop-shadow(0 7px 14px rgba(37, 55, 48, 0.10));
}

.interactive-rounded-line__tooltip text {
  font-family: Inter, system-ui, sans-serif;
  text-anchor: start;
}

.interactive-rounded-line__tooltip-label {
  fill: var(--rounded-line-muted);
  font-size: 11px;
  font-weight: 620;
}

.interactive-rounded-line__tooltip-value {
  fill: var(--rounded-line-color);
  font-size: 12px;
  font-weight: 760;
}

.interactive-rounded-line__hit-area {
  fill: transparent;
  pointer-events: all;
}

@media (prefers-reduced-motion: no-preference) {
  .interactive-rounded-line__path {
    stroke-dashoffset: 1;
    animation: interactive-rounded-line-draw 680ms ease forwards;
  }

  .interactive-rounded-line__area {
    animation: interactive-rounded-area-reveal 680ms ease both;
  }

  .interactive-rounded-line__halo {
    animation: interactive-rounded-halo 680ms ease both;
  }

  .interactive-rounded-line__tooltip {
    animation: micro-soft-reveal 680ms ease both;
  }
}

@keyframes interactive-rounded-line-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes interactive-rounded-area-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes interactive-rounded-halo {
  from { opacity: 0; transform: scale(.55); }
  to { opacity: .2; transform: scale(1); }
}

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