/* ============================================================
   Seed Code Chat — Animation
   Purposeful, subtle, premium. Respects reduced motion.
   ============================================================ */

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

@keyframes sc-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sc-fade-down {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sc-scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sc-slide-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes sc-sidebar-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes sc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes sc-caret {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes sc-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

@keyframes sc-spin {
  to { transform: rotate(360deg); }
}

@keyframes sc-live {
  0%, 100% { box-shadow: 0 0 0 0 var(--brand-glow); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

@keyframes sc-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes seed-breathe {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(10deg) scale(1.06); }
}

@keyframes seed-orbit {
  to { transform: rotate(360deg); }
}

@keyframes seed-glow {
  0%, 100% { opacity: 0.45; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ---- Applied helpers ---- */
.anim-fade-in { animation: sc-fade-in var(--t-base) ease-out; }
.anim-fade-up { animation: sc-fade-up var(--t-med) var(--ease-out); }
.anim-fade-down { animation: sc-fade-down var(--t-base) var(--ease-out); }
.anim-scale-in { animation: sc-scale-in var(--t-base) var(--ease-out); }
.anim-slide-in-right { animation: sc-slide-in-right var(--t-base) var(--ease-out); }

/* ---- Loading shimmer skeleton ---- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400px 100%;
  animation: sc-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}

/* ---- Streaming live indicator ---- */
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-strong);
  animation: sc-live 1.6s ease-out infinite;
}

.typing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: sc-dot 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--brand-dim);
  border-top-color: var(--brand-strong);
  border-radius: 50%;
  animation: sc-spin 0.8s linear infinite;
}

@keyframes sc-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ============================================================
   App intro / splash — shown once per session, then dismissed.
   The overlay markup lives in each page (id="sc-intro"); js/motion.js
   orchestrates the timing and removes it from the DOM.
   ============================================================ */

@keyframes sc-intro-logo {
  0%   { opacity: 0; transform: translateY(10px) scale(0.82);
         filter: blur(8px) drop-shadow(0 0 26px var(--brand-glow-strong)); }
  100% { opacity: 1; transform: translateY(0) scale(1);
         filter: blur(0) drop-shadow(0 0 26px var(--brand-glow-strong)); }
}

@keyframes sc-brand-in {
  0%   { opacity: 0; transform: translateY(12px); letter-spacing: 0.18em; }
  100% { opacity: 1; transform: translateY(0);   letter-spacing: 0.04em; }
}

.sc-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 460ms var(--ease-out),
    transform 460ms var(--ease-out),
    visibility 460ms;
  pointer-events: none;
}

.sc-intro.hide {
  opacity: 0;
  transform: scale(1.02);
  visibility: hidden;
}

/* Head marker script adds this when the intro was already shown, so
   the overlay never flashes on repeat navigation. */
html.sc-skip-intro .sc-intro {
  display: none;
}

.sc-intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.sc-intro-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 8px;
  animation: sc-intro-logo 550ms var(--ease-out) 120ms both;
}

.sc-intro-name {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  opacity: 0;
  animation: sc-brand-in 360ms var(--ease-out) 420ms both;
}

.sc-intro-name .accent {
  color: var(--brand-strong);
}

.sc-intro-tag {
  font-size: var(--fs-13);
  color: var(--muted);
  opacity: 0;
  animation: sc-fade-up 360ms var(--ease-out) 600ms both;
}

/* ============================================================
   Main app reveal — sidebar / header / content slide into place
   as the intro fades out. Scoped so mobile drawer stays intact.
   ============================================================ */

@media (min-width: 901px) {
  body.sc-intro-active .sidebar {
    opacity: 0;
    transform: translateX(-20px);
  }
}

body.sc-intro-active .main-header {
  opacity: 0;
  transform: translateY(-10px);
}

body.sc-intro-active .main {
  opacity: 0;
  transform: translateY(12px);
}

body.sc-intro-active .composer-wrap {
  opacity: 0;
  transform: translateY(12px);
}

body.app-ready .main-header,
body.app-ready .main,
body.app-ready .composer-wrap {
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}

@media (min-width: 901px) {
  body.app-ready .sidebar {
    transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  }
}

/* ============================================================
   Page transitions — enter on load, exit before navigating.
   ============================================================ */

@keyframes sc-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sc-page-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

/* Incoming page (repeat navigation / non-intro loads) */
html.sc-page-in #app {
  animation: sc-page-in 320ms var(--ease-out) both;
}

body.page-enter #app {
  animation: sc-page-in 320ms var(--ease-out) both;
}

body.page-exit #app {
  animation: sc-page-out 220ms ease-out both;
}

/* ============================================================
   Load staggers — sidebar nav + welcome screen.
   ============================================================ */

.sidebar-nav .side-nav-item {
  animation: sc-fade-up var(--t-med) var(--ease-out) both;
}
.sidebar-nav .side-nav-item:nth-child(1) { animation-delay: 40ms; }
.sidebar-nav .side-nav-item:nth-child(2) { animation-delay: 80ms; }
.sidebar-nav .side-nav-item:nth-child(3) { animation-delay: 120ms; }
.sidebar-nav .side-nav-item:nth-child(4) { animation-delay: 160ms; }
.sidebar-nav .side-nav-item:nth-child(5) { animation-delay: 200ms; }

.welcome > * {
  animation: sc-fade-up var(--t-med) var(--ease-out) both;
}
.welcome > *:nth-child(1) { animation-delay: 50ms; }
.welcome > *:nth-child(2) { animation-delay: 100ms; }
.welcome > *:nth-child(3) { animation-delay: 150ms; }
.welcome > *:nth-child(4) { animation-delay: 200ms; }

/* ============================================================
   Chat messages — new messages animate in; history stays stable.
   chat.js marks the newest message via
   SeedChatMotion.animateLatestMessages (adds .msg-anim + --msg-i).
   ============================================================ */

@keyframes sc-user-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sc-assistant-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.message.msg-anim {
  animation-name: sc-assistant-in;
  animation-duration: 320ms;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
  animation-delay: calc(var(--msg-i, 0) * 50ms);
}

.message.msg-anim.user {
  animation-name: sc-user-in;
  animation-duration: 250ms;
}

/* Streaming placeholder reveals once; streamed text stays stable. */
.message.msg-streaming {
  animation: sc-assistant-in 340ms var(--ease-out) both;
}

/* ============================================================
   Auth / 404 card staggered entrance
   ============================================================ */
.auth-card .auth-head {
  animation: sc-fade-up 300ms var(--ease-out) both;
}

.auth-card .auth-head > * {
  animation: sc-fade-up 300ms var(--ease-out) both;
}
.auth-card .auth-head > *:nth-child(1) { animation-delay: 40ms; }
.auth-card .auth-head > *:nth-child(2) { animation-delay: 110ms; }
.auth-card .auth-head > *:nth-child(3) { animation-delay: 180ms; }
.auth-card .auth-head > *:nth-child(4) { animation-delay: 250ms; }

.auth-card .auth-form > * {
  animation: sc-fade-up 280ms var(--ease-out) both;
}
.auth-card .auth-form > *:nth-child(1) { animation-delay: 120ms; }
.auth-card .auth-form > *:nth-child(2) { animation-delay: 170ms; }
.auth-card .auth-form > *:nth-child(3) { animation-delay: 220ms; }
.auth-card .auth-form > *:nth-child(4) { animation-delay: 270ms; }
.auth-card .auth-form > *:nth-child(5) { animation-delay: 320ms; }
.auth-card .auth-form > *:nth-child(6) { animation-delay: 370ms; }
.auth-card .auth-form > *:nth-child(7) { animation-delay: 420ms; }
.auth-card .auth-form > *:nth-child(8) { animation-delay: 470ms; }
.auth-card .auth-form > *:nth-child(9) { animation-delay: 520ms; }
.auth-card .auth-form > *:nth-child(10) { animation-delay: 570ms; }

.auth-card .nf-actions {
  animation: sc-fade-up 300ms var(--ease-out) 320ms both;
}

.auth-card .auth-head .nf-code {
  animation: sc-nf-code 420ms var(--ease-out) 120ms both;
}

@keyframes sc-nf-code {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* ---- Settings sections fade in on render ---- */
#settings-body > * {
  animation: sc-fade-up 260ms var(--ease-out) 40ms both;
}

/* ---- Send / stop swap ---- */
.btn-send,
.btn-stop {
  animation: sc-fade-in 180ms var(--ease-out);
}

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

  .skeleton {
    animation: none !important;
    background: var(--surface-3);
  }

  .typing-dots span { animation: none !important; }
  .spinner { animation-duration: 1.2s; }
  .seed-load-ico img,
  .seed-load-ico::before,
  .seed-load-ico::after { animation: none !important; }

  .sc-intro { display: none; }
}