/* 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; }
}

/* ===================================================================
   Higgsfield-Level Cinematic Studio Tokens & Primitives
   =================================================================== */
:root {
  --cinema-bg: #07090e;
  --cinema-surface: rgba(13, 17, 27, 0.75);
  --cinema-surface-hover: rgba(22, 28, 45, 0.85);
  --cinema-border: rgba(255, 255, 255, 0.08);
  --cinema-glow-primary: #3b82f6;
  --cinema-glow-accent: #8b5cf6;
  --cinema-glow-emerald: #10b981;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-emil: cubic-bezier(0.23, 1, 0.32, 1);
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  --color-bg: #07090e;
  --color-bg-elevated: #0d121c;
  --color-surface: #101623;
  --color-surface-subtle: #0a0e17;
  --color-surface-hover: #161e30;
  --color-surface-active: #1d2840;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.05);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --cinema-bg: #07090e;
  --cinema-surface: rgba(13, 17, 27, 0.75);
  --cinema-surface-hover: rgba(22, 28, 45, 0.85);
  --cinema-border: rgba(255, 255, 255, 0.08);
  --cinema-glow-primary: #3b82f6;
  --cinema-glow-accent: #8b5cf6;
}

/* Glassmorphism Depth */
.glass-panel {
  background: var(--cinema-surface, rgba(13, 17, 27, 0.75));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--cinema-border, rgba(255, 255, 255, 0.08));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg, 14px);
}

/* Generating Card with Conic-Gradient Glow */
.generating-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  padding: 2px;
  background: transparent;
  isolation: isolate;
}
.generating-card::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--cinema-glow-primary) 90deg, var(--cinema-glow-accent) 180deg, transparent 270deg);
  animation: rotateGlow 3.2s linear infinite;
  z-index: 0;
}
.generating-card-inner {
  position: relative;
  background: #0b0f19;
  border-radius: 14px;
  padding: 16px;
  z-index: 1;
}
@keyframes rotateGlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Emil Kowalski Button & Press Physics */
.btn:active:not(:disabled), .icon-btn:active:not(:disabled), .studio-btn:active, .chip:active {
  transform: scale(0.97) !important;
  transition: transform 160ms var(--ease-emil) !important;
}

/* Modal and Popover Origin Physics */
.ds-popover, .artifact-dialog {
  transform-origin: var(--trigger-origin, center);
  transition: transform 220ms var(--ease-out-expo), opacity 200ms ease-out;
}
.ds-popover[data-state="opening"], .artifact-dialog[open] {
  animation: modalSpringIn 280ms var(--ease-spring);
}
@keyframes modalSpringIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Typewriter Streaming with Pulsing Neon Caret */
.stream-text {
  scroll-margin-bottom: 60px;
}
.stream-text.is-streaming::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1.15em;
  margin-inline-start: 4px;
  vertical-align: -2px;
  background: var(--cinema-glow-primary, #3b82f6);
  box-shadow: 0 0 10px var(--cinema-glow-primary, #3b82f6);
  border-radius: 1px;
  animation: neonCaret 0.8s ease-in-out infinite;
}
@keyframes neonCaret {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px var(--cinema-glow-primary)); }
  50% { opacity: 0.15; }
}

/* Before/After Compare Slider (Hardware-Accelerated clip-path) */
.compare-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  user-select: none;
  background: #000;
  max-width: 100%;
}
.compare-image-base {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.compare-image-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 calc(100% - var(--compare-pos, 50%)) 0 0);
  will-change: clip-path;
  pointer-events: none;
}
.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-pos, 50%);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.6), 0 0 4px var(--cinema-glow-primary);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}
.compare-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  display: grid;
  place-items: center;
  font-size: 11px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Prompt Studio Canvas & Controls */
.studio-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  width: 100%;
  padding: 16px 0;
}
.studio-media-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0d121c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 220ms var(--ease-out-expo), box-shadow 220ms var(--ease-out-expo), border-color 220ms var(--ease-out-expo);
}
.studio-media-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
}
.studio-media-card img, .studio-media-card video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.studio-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.88) 100%);
  opacity: 0;
  transition: opacity 200ms ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
  gap: 6px;
}
.studio-media-card:hover .studio-card-overlay {
  opacity: 1;
}
.studio-card-prompt {
  font-size: 0.76rem;
  color: #f1f5f9;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.studio-quick-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.studio-quick-btn {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.74rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 160ms ease;
}
.studio-quick-btn:hover {
  background: var(--cinema-glow-primary, #3b82f6);
}