/* motion.css — WormGPT motion & detail pass (additive, loaded last) */

:root {
  --wg-ease: cubic-bezier(.22, .61, .36, 1);
  --wg-ease-out: cubic-bezier(.16, 1, .3, 1);
  --wg-dur-1: .16s;
  --wg-dur-2: .28s;
  --wg-dur-3: .48s;
  --wg-glow: rgba(77, 144, 254, .45);
}

/* 1. Keyframes */
@keyframes wg-fade-up {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes wg-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wg-scale-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.97); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes wg-slide-in-right {
  from { opacity: 0; transform: translate3d(18px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes wg-shimmer {
  0%   { background-position: -420px 0; }
  100% { background-position: 420px 0; }
}
@keyframes wg-ripple {
  to { transform: scale(2.6); opacity: 0; }
}
@keyframes wg-pulse {
  0%, 100% { opacity: .35; transform: scale(.82); }
  50%      { opacity: 1;   transform: scale(1); }
}
@keyframes wg-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes wg-gradient-pan {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 2. Entrance utilities */
.wg-anim-in { animation: wg-fade-up var(--wg-dur-3) var(--wg-ease-out) both; }
.wg-anim-fade { animation: wg-fade-in var(--wg-dur-3) var(--wg-ease-out) both; }
.wg-anim-scale { animation: wg-scale-in var(--wg-dur-2) var(--wg-ease-out) both; }
.wg-anim-right { animation: wg-slide-in-right var(--wg-dur-2) var(--wg-ease-out) both; }

/* welcome cards stagger via inline --wg-i (set by motion.js) */
.welcome-questions > * {
  animation: wg-fade-up var(--wg-dur-3) var(--wg-ease-out) both;
  animation-delay: calc(var(--wg-i, 0) * 55ms);
}
.welcome-title { animation: wg-fade-up var(--wg-dur-3) var(--wg-ease-out) both; }
.welcome-subtitle { animation: wg-fade-up var(--wg-dur-3) var(--wg-ease-out) both; animation-delay: 60ms; }

/* 3. Button / control micro-interactions */
.chat-header button,
.chat-header a,
.chat-composer button,
.composer-shell button,
.account-actions button,
.account-action,
.focused-model-trigger {
  transition:
    transform var(--wg-dur-1) var(--wg-ease),
    background-color var(--wg-dur-1) var(--wg-ease),
    border-color var(--wg-dur-1) var(--wg-ease),
    box-shadow var(--wg-dur-2) var(--wg-ease),
    color var(--wg-dur-1) var(--wg-ease);
  will-change: transform;
}
.chat-header button:hover,
.chat-header a:hover,
.chat-composer button:hover,
.composer-shell button:hover { transform: translateY(-1px); }
.chat-header button:active,
.chat-header a:active,
.chat-composer button:active,
.composer-shell button:active,
.focused-model-trigger:active { transform: scale(.94); }

/* keyboard accessibility */
.chat-header button:focus-visible,
.chat-composer button:focus-visible,
.account-actions button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--wg-glow);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ripple host */
.wg-ripple-host { position: relative; overflow: hidden; }
.wg-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .28); transform: scale(0);
  animation: wg-ripple .6s var(--wg-ease-out) forwards;
}

/* send button accent glow */
[data-zy-composer="1"] button[type="submit"],
[data-zy-composer="1"] button:last-of-type {
  position: relative;
}
[data-zy-composer="1"] button:not([disabled]):hover {
  box-shadow: 0 6px 20px rgba(11, 87, 208, .35);
}

/* 4. Sidebar drawer / sheet / modal motion */
.chat-sidebar {
  transition: transform var(--wg-dur-2) var(--wg-ease-out), opacity var(--wg-dur-2) var(--wg-ease-out) !important;
}
.mobile-sidebar-backdrop,
[class*="backdrop"] { transition: opacity var(--wg-dur-2) var(--wg-ease-out) !important; }

.focused-model-menu {
  animation: wg-scale-in var(--wg-dur-2) var(--wg-ease-out) both;
  transform-origin: top center;
  transition: opacity var(--wg-dur-1) var(--wg-ease), transform var(--wg-dur-2) var(--wg-ease-out);
}

/* generic dialogs / sheets */
[role="dialog"] { animation: wg-scale-in var(--wg-dur-2) var(--wg-ease-out) both; }

/* 5. Skeleton shimmer + typing pulse */
.wg-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.05) 63%);
  background-size: 840px 100%;
  animation: wg-shimmer 1.4s linear infinite;
  border-radius: 10px;
}
.wg-typing { display: inline-flex; gap: 4px; align-items: center; }
.wg-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: wg-pulse 1.2s var(--wg-ease) infinite;
}
.wg-ripple-free { animation: wg-float 3.4s ease-in-out infinite; }

/* brand accent pan (very subtle) */
.chat-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,144,254,.5), transparent);
  background-size: 200% 100%;
  animation: wg-gradient-pan 6s linear infinite;
  pointer-events: none; opacity: .6;
}
.chat-header { position: relative; }

/* 5b. Injected download button motion */
.wg-dl { animation: wg-scale-in var(--wg-dur-2) var(--wg-ease-out) both; }

/* 6. Scroll + selection polish */
html { scroll-behavior: smooth; }
::selection { background: rgba(77, 144, 254, .32); }

/* thin, themed scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); background-clip: padding-box; }

/* 7. Reduced motion — switch everything off gracefully */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .wg-anim-in, .wg-anim-fade, .wg-anim-scale, .wg-anim-right,
  .welcome-questions > *, .welcome-title, .welcome-subtitle, .wg-dl { animation: none !important; }
  .chat-header::after { animation: none !important; }
}