/* Hoshana motion layer v1 — additive polish on top of style.css.
   Every animation lives inside prefers-reduced-motion: no-preference, so
   reduced-motion users get the exact pre-existing UI. Only transform/opacity
   (plus a few colour/shadow transitions) are animated to stay on the GPU. */

:root {
  --mo-out: cubic-bezier(.22, 1, .36, 1);
  --mo-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mo-fast: 160ms;
  --mo-med: 280ms;
  --mo-slow: 560ms;
  --mo-glow-a: color-mix(in srgb, var(--color-primary, #2563eb) 20%, transparent);
  --mo-glow-b: color-mix(in srgb, #8b5cf6 15%, transparent);
}

/* Static (non-motion) polish: safe for everyone */
#starterChips .brand-avatar { box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--color-primary, #2563eb) 55%, transparent); }
.chat-head.is-scrolled { box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .45); }
.nav.is-scrolled { box-shadow: 0 8px 22px -18px rgba(0, 0, 0, .5); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes moRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes moPop { 0% { opacity: 0; transform: scale(.82); } 100% { opacity: 1; transform: none; } }
  @keyframes moSendPop { 0% { transform: scale(.86); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
  @keyframes moAurora {
    0% { transform: translate3d(-4%, -2%, 0) scale(1); }
    50% { transform: translate3d(3%, 3%, 0) scale(1.08); }
    100% { transform: translate3d(-2%, 4%, 0) scale(.96); }
  }
  @keyframes moShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  @keyframes moGradientText { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
  @keyframes moCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
  @keyframes moDialogIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes moBackdropIn { from { opacity: 0; } to { opacity: 1; } }

  /* ---- app: starter hero ------------------------------------------ */
  #starterChips { position: relative; isolation: isolate; }
  #starterChips::before {
    content: "";
    position: absolute;
    inset: -12% 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(38% 46% at 32% 42%, var(--mo-glow-a), transparent 70%),
      radial-gradient(34% 42% at 68% 58%, var(--mo-glow-b), transparent 70%);
    filter: blur(28px);
    animation: moAurora 16s ease-in-out infinite alternate;
  }
  #starterChips > .brand-avatar {
    animation: moPop .62s var(--mo-spring) both, mfBreathe 4.5s var(--mf-ease, ease) .7s infinite;
  }
  #starterChips > h2 { animation: moRise var(--mo-slow) var(--mo-out) .08s both; }
  #starterChips > p { animation: moRise var(--mo-slow) var(--mo-out) .16s both; }
  #starterChips .starter-chips > .chip { animation: moRise var(--mo-slow) var(--mo-out) both; }
  #starterChips .starter-chips > .chip:nth-child(1) { animation-delay: .24s; }
  #starterChips .starter-chips > .chip:nth-child(2) { animation-delay: .29s; }
  #starterChips .starter-chips > .chip:nth-child(3) { animation-delay: .34s; }
  #starterChips .starter-chips > .chip:nth-child(4) { animation-delay: .39s; }
  #starterChips .starter-chips > .chip:nth-child(n+5) { animation-delay: .44s; }
  #starterChips .chip[data-starter] {
    transition: translate var(--mo-med) var(--mo-spring), scale var(--mo-fast) var(--mo-out), box-shadow var(--mo-med) var(--mo-out),
      border-color var(--mo-fast) var(--mo-out), background var(--mo-fast) var(--mo-out);
  }
  #starterChips .chip[data-starter]:hover {
    translate: 0 -2px;
    border-color: color-mix(in srgb, var(--color-primary, #2563eb) 45%, var(--color-border, #ccc));
    box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--color-primary, #2563eb) 70%, transparent);
  }
  #starterChips .chip[data-starter]:active { translate: 0 0; scale: .96; }

  /* ---- app: tactile press feedback --------------------------------- */
  .btn, .icon-btn, .side-link, .msg-action-btn, .composer-btn, .chip, .hist-item, .prompt-card .btn {
    transition-property: transform, scale, translate, background-color, border-color, color, box-shadow, opacity;
    transition-duration: var(--mo-fast);
    transition-timing-function: var(--mo-out);
  }
  .btn:active:not(:disabled), .icon-btn:active:not(:disabled), .msg-action-btn:active,
  .composer-btn:active:not(:disabled), .side-link:active {
    scale: .96;
    transition-duration: 80ms;
  }
  .msg-action-btn.is-copied { animation: moPop .34s var(--mo-spring); }

  /* primary "new chat" + landing hero CTA: light sweep on hover */
  #newChatBtn, .hero-cta .btn-primary { position: relative; overflow: hidden; }
  #newChatBtn::after, .hero-cta .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
  }
  #newChatBtn:hover::after, .hero-cta .btn-primary:hover::after {
    transform: translateX(120%);
    transition: transform .75s var(--mo-out);
  }

  /* ---- app: composer --------------------------------------------- */
  .composer-card { transition: border-color var(--mo-med) var(--mo-out), box-shadow var(--mo-med) var(--mo-out); }
  .composer-card:focus-within {
    box-shadow: 0 0 0 3px var(--accent-dim, rgba(37, 99, 235, .15)),
      0 14px 34px -22px color-mix(in srgb, var(--color-primary, #2563eb) 70%, transparent);
  }
  .send-btn.is-sendable { animation: moSendPop .34s var(--mo-spring); }

  /* ---- app: thinking + search activity text shimmer --------------- */
  .thinking .t-label,
  .search-activity.is-active .search-activity-label {
    background: linear-gradient(90deg, var(--color-text-muted, #888) 0%, var(--color-text-muted, #888) 35%,
      var(--color-text, #111) 50%, var(--color-text-muted, #888) 65%, var(--color-text-muted, #888) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: moShimmer 1.8s linear infinite;
  }
  .view-state.is-loading .state-message {
    background: linear-gradient(90deg, var(--color-text-muted, #888) 0%, var(--color-text-muted, #888) 35%,
      var(--color-text, #111) 50%, var(--color-text-muted, #888) 65%, var(--color-text-muted, #888) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: moShimmer 1.8s linear infinite;
  }

  /* ---- app: secondary pages — staggered sections and lists -------- */
  .app-view.secondary-page:not(.hidden) > .view-section,
  .app-view.secondary-page:not(.hidden) > .view-toolbar {
    animation: moRise var(--mo-med) var(--mo-out) both;
  }
  .app-view.secondary-page:not(.hidden) > :nth-child(2) { animation-delay: 30ms; }
  .app-view.secondary-page:not(.hidden) > :nth-child(3) { animation-delay: 60ms; }
  .app-view.secondary-page:not(.hidden) > :nth-child(4) { animation-delay: 90ms; }
  .app-view.secondary-page:not(.hidden) > :nth-child(5) { animation-delay: 120ms; }
  .app-view.secondary-page:not(.hidden) > :nth-child(n+6) { animation-delay: 150ms; }

  .prompt-list > *, #kbResults > *, .shares-list > *, .msg-search-results > *, #chatList .hist-item {
    animation: moRise var(--mo-med) var(--mo-out) both;
  }
  :is(.prompt-list, #kbResults, .shares-list, .msg-search-results) > :nth-child(2) { animation-delay: 25ms; }
  :is(.prompt-list, #kbResults, .shares-list, .msg-search-results) > :nth-child(3) { animation-delay: 50ms; }
  :is(.prompt-list, #kbResults, .shares-list, .msg-search-results) > :nth-child(4) { animation-delay: 75ms; }
  :is(.prompt-list, #kbResults, .shares-list, .msg-search-results) > :nth-child(5) { animation-delay: 100ms; }
  :is(.prompt-list, #kbResults, .shares-list, .msg-search-results) > :nth-child(n+6) { animation-delay: 125ms; }
  .prompt-card, .share-row, .msg-search-item {
    transition: translate var(--mo-med) var(--mo-out), box-shadow var(--mo-med) var(--mo-out), background-color var(--mo-fast) var(--mo-out);
  }
  .prompt-card:hover, .share-row:hover { translate: 0 -1px; }

  /* ---- app: header, toast, dialogs, theme switch ------------------ */
  .chat-head { transition: box-shadow var(--mo-med) var(--mo-out); }
  /* WS4: #toast transition now lives on .toast in style.css (single toast component) */
  dialog[open] { animation: moDialogIn var(--mo-med) var(--mo-out) both; }
  dialog[open]::backdrop { animation: moBackdropIn var(--mo-med) var(--mo-out) both; }
  html.mo-theme-switching, html.mo-theme-switching *, html.mo-theme-switching *::before, html.mo-theme-switching *::after {
    transition: background-color 320ms var(--mo-out), border-color 320ms var(--mo-out), color 320ms var(--mo-out), fill 320ms var(--mo-out), stroke 320ms var(--mo-out) !important;
  }

  /* ---- landing ---------------------------------------------------- */
  html { scroll-behavior: smooth; }
  .nav { transition: box-shadow var(--mo-med) var(--mo-out), background-color var(--mo-med) var(--mo-out); }
  .hero-landing { position: relative; isolation: isolate; overflow: hidden; }
  .hero-landing::before {
    content: "";
    position: absolute;
    inset: -10% -5% 30%;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(36% 50% at 30% 30%, var(--mo-glow-a), transparent 70%),
      radial-gradient(32% 46% at 72% 40%, var(--mo-glow-b), transparent 70%);
    filter: blur(40px);
    animation: moAurora 18s ease-in-out infinite alternate;
  }
  .hero-landing .hero-title { animation: moRise .7s var(--mo-out) both; }
  .hero-landing .hero-sub { animation: moRise .7s var(--mo-out) .1s both; }
  .hero-landing .hero-cta { animation: moRise .7s var(--mo-out) .2s both; }
  .hero-landing .demo-wrap { animation: moRise .9s var(--mo-out) .32s both; }
  .hero-title .grad {
    background: linear-gradient(90deg, var(--color-primary, #2563eb), #8b5cf6, #06b6d4, var(--color-primary, #2563eb));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: moGradientText 7s linear infinite;
  }
  .demo-window { transition: translate .5s var(--mo-out), box-shadow .5s var(--mo-out); }
  .demo-wrap:hover .demo-window { translate: 0 -4px; box-shadow: 0 30px 60px -36px rgba(15, 23, 42, .45); }
  .demo-chat .demo-msg.is-typing::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-inline-start: 3px;
    vertical-align: -2px;
    background: currentColor;
    animation: moCaret 1s steps(1) infinite;
  }
  /* reveal (opacity/transform) is staggered via --mo-d; hover uses the
     independent translate property so it is never delayed */
  .use-card, .plan-col, .step {
    transition: opacity var(--motion-slow, .5s) var(--mo-out) var(--mo-d, 0ms), transform var(--motion-slow, .5s) var(--mo-out) var(--mo-d, 0ms),
      translate var(--mo-med) var(--mo-out), box-shadow var(--mo-med) var(--mo-out), border-color var(--mo-med) var(--mo-out);
  }
  .use-card:hover, .plan-col:hover {
    translate: 0 -3px;
    box-shadow: 0 18px 40px -28px rgba(15, 23, 42, .5);
    border-color: color-mix(in srgb, var(--color-primary, #2563eb) 30%, var(--color-border-subtle, #ddd));
  }
  .step .num { transition: transform var(--mo-med) var(--mo-spring), background-color var(--mo-med) var(--mo-out), color var(--mo-med) var(--mo-out); }
  .step:hover .num { transform: scale(1.12); background: var(--color-primary, #2563eb); color: #fff; }
  /* spotlight that follows the pointer (vars set by motion.js) */
  .use-card.mo-spot { background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--color-primary, #2563eb) 9%, transparent), transparent 70%); }
  /* stagger reveal inside grids */
  :is(.use-grid, .steps, .landing-plans) > .reveal:nth-child(2) { --mo-d: 80ms; }
  :is(.use-grid, .steps, .landing-plans) > .reveal:nth-child(3) { --mo-d: 160ms; }
  :is(.use-grid, .steps, .landing-plans) > .reveal:nth-child(n+4) { --mo-d: 220ms; }
}