/* ═══════════════════════════════════════════════════════════════════════════
   WaveAI :: Motion
   Everything here is transform/opacity driven so it stays on the compositor and
   leaves the GPU's actual work — inference — alone.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ambient ─────────────────────────────────────────────────────────────── */

@keyframes causticDrift {
  0%   { transform: translate3d(0,0,0) scale(1);      opacity: .26; }
  50%  { transform: translate3d(-24px,14px,0) scale(1.06); opacity: .38; }
  100% { transform: translate3d(20px,-10px,0) scale(1.03); opacity: .28; }
}

@keyframes swell {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

@keyframes shimmer {
  0%   { background-position: -220% 0; }
  100% { background-position: 220% 0; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(53,229,242,.40); }
  70%      { box-shadow: 0 0 0 14px rgba(53,229,242,0); }
}

@keyframes spinSlow { to { transform: rotate(360deg); } }

/* ── Brand mark : three waves rolling out of phase ───────────────────────── */

.brand-mark { width: 30px; height: 30px; overflow: visible; }
.bm-wave { animation: bmRoll 3.4s ease-in-out infinite; transform-origin: center; }
.bm-w2 { animation-delay: -.55s; animation-duration: 4.1s; }
.bm-w3 { animation-delay: -1.2s; animation-duration: 3.8s; }
@keyframes bmRoll {
  0%, 100% { transform: translateX(0) scaleY(1); }
  50%      { transform: translateX(-3px) scaleY(1.38); }
}
body.thinking .bm-wave { animation-duration: 1.1s; }

/* ── Entrances ───────────────────────────────────────────────────────────── */

@keyframes surface {
  from { opacity: 0; transform: translateY(22px) scale(.982); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes surfaceLeft {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes driftIn {
  from { opacity: 0; transform: translateY(14px) rotateX(9deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.88); }
  60%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

.anim-surface { animation: surface .48s var(--ease-wave) both; }
.anim-drift   { animation: driftIn .42s var(--ease-wave) both; }
.anim-pop     { animation: popIn .34s var(--ease-swell) both; }

/* Panes cross-fade like light through water */
.pane {
  opacity: 0; visibility: hidden;
  transform: translateY(16px) scale(.994);
  transition: opacity .34s var(--ease-wave), transform .44s var(--ease-wave), visibility 0s .44s;
}
.pane.active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .38s var(--ease-wave) .04s, transform .5s var(--ease-wave), visibility 0s;
}

/* ── Tabs : the glow slides under the active tab ─────────────────────────── */

.tab-glow {
  position: absolute; bottom: 4px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--lagoon), transparent);
  box-shadow: 0 0 14px rgba(53,229,242,.85);
  transition: transform .44s var(--ease-swell), width .44s var(--ease-swell);
  pointer-events: none;
}

/* ── Ripple on press ─────────────────────────────────────────────────────── */

.ripple {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(140,240,255,.52), transparent 68%);
  transform: scale(0); opacity: .9; pointer-events: none;
  animation: rippleOut .66s var(--ease-wave) forwards;
}
@keyframes rippleOut { to { transform: scale(4.4); opacity: 0; } }

/* ── Sidebar rows : a wave sweeps across on hover ────────────────────────── */

.chat-item::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(53,229,242,.14) 50%, transparent 80%);
  transform: translateX(-110%);
  transition: transform .62s var(--ease-wave);
  pointer-events: none;
}
.chat-item:hover::before { transform: translateX(110%); }

/* ── Send button ─────────────────────────────────────────────────────────── */

.send-ring {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid rgba(53,229,242,.55);
  opacity: 0; transform: scale(.8);
}
.send-btn:not(:disabled):hover .send-ring { animation: ringOut 1.3s var(--ease-wave) infinite; }
@keyframes ringOut {
  0%   { opacity: .85; transform: scale(.82); }
  100% { opacity: 0;   transform: scale(1.42); }
}
body.thinking .send-btn .send-ring { animation: ringOut .8s var(--ease-wave) infinite; opacity: 1; }

/* ── Streaming caret : a drop of light ───────────────────────────────────── */

.caret {
  display: inline-block; width: 9px; height: 1.05em;
  vertical-align: text-bottom; margin-left: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan-soft), var(--lagoon));
  box-shadow: 0 0 12px rgba(53,229,242,.9);
  animation: caretPulse 1s ease-in-out infinite;
}
@keyframes caretPulse { 0%,100% { opacity: 1; transform: scaleY(1); } 50% { opacity: .35; transform: scaleY(.72); } }

/* ── Thinking indicator : sonar rings + rolling dots ─────────────────────── */

.thinking-row { display: flex; align-items: center; gap: 14px; padding: 6px 2px; }

.sonar { position: relative; width: 26px; height: 26px; flex: none; }
.sonar i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.6px solid rgba(53,229,242,.72);
  animation: sonarOut 2.1s var(--ease-wave) infinite;
}
.sonar i:nth-child(2) { animation-delay: .7s; }
.sonar i:nth-child(3) { animation-delay: 1.4s; }
.sonar b {
  position: absolute; inset: 9px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 14px var(--cyan);
  animation: sonarCore 2.1s ease-in-out infinite;
}
@keyframes sonarOut { 0% { transform: scale(.34); opacity: .95; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes sonarCore { 0%,100% { transform: scale(1); } 50% { transform: scale(.7); } }

.think-dots { display: flex; gap: 6px; }
.think-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(180deg, var(--cyan-soft), var(--aqua));
  animation: dotSwell 1.25s ease-in-out infinite;
}
.think-dots span:nth-child(2) { animation-delay: .16s; }
.think-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes dotSwell {
  0%, 100% { transform: translateY(0) scale(.82); opacity: .5; }
  50%      { transform: translateY(-7px) scale(1.18); opacity: 1; }
}

.think-label {
  font-size: 13px; color: var(--ink-2); font-weight: 600; letter-spacing: .2px;
  background: linear-gradient(90deg, var(--ink-3) 20%, var(--cyan-soft) 50%, var(--ink-3) 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2.6s linear infinite;
}

/* ── Folding-memory notice ───────────────────────────────────────────────── */

.fold-spin {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid rgba(53,229,242,.22);
  border-top-color: var(--cyan);
  animation: spinSlow .85s linear infinite;
}

/* ── Gauges ──────────────────────────────────────────────────────────────── */

.gfill {
  fill: none; stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 314.16;
  stroke-dashoffset: 314.16;
  transform: rotate(-90deg); transform-origin: 60px 60px;
  transition: stroke-dashoffset .7s var(--ease-wave), stroke .5s;
  filter: drop-shadow(0 0 7px currentColor);
}
.gtrack { fill: none; stroke: rgba(120,190,230,.10); stroke-width: 9; }
.gauge:hover .gring { animation: swell 2.4s ease-in-out infinite; }

/* ── Toasts ──────────────────────────────────────────────────────────────── */

@keyframes toastIn  { from { opacity: 0; transform: translateX(40px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(40px) scale(.94); } }
.toast { animation: toastIn .4s var(--ease-swell) both; }
.toast.out { animation: toastOut .3s var(--ease-wave) both; }

/* ── Modal ───────────────────────────────────────────────────────────────── */

@keyframes modalIn { from { opacity: 0; transform: translateY(26px) scale(.95); } to { opacity: 1; transform: none; } }
.modal:not([hidden]) { animation: fadeIn .22s ease both; }
.modal:not([hidden]) .modal-card { animation: modalIn .42s var(--ease-swell) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Skeleton shimmer ────────────────────────────────────────────────────── */

.skeleton {
  background: linear-gradient(90deg, rgba(30,70,100,.22) 25%, rgba(60,130,175,.34) 50%, rgba(30,70,100,.22) 75%);
  background-size: 220% 100%;
  animation: shimmer 1.7s linear infinite;
  border-radius: 8px;
}

/* ── Lesson cards ────────────────────────────────────────────────────────── */

@keyframes learnFlash {
  0%   { box-shadow: 0 0 0 0 rgba(61,220,151,.55); background: rgba(61,220,151,.16); }
  100% { box-shadow: 0 0 0 20px rgba(61,220,151,0); background: transparent; }
}
.lesson.just-learned { animation: learnFlash 1.5s var(--ease-wave) both; }

/* ── Copy-confirm tick ───────────────────────────────────────────────────── */

@keyframes tickPop { 0% { transform: scale(0) rotate(-24deg); } 60% { transform: scale(1.22) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
.copied .tick { animation: tickPop .4s var(--ease-swell) both; }

/* ── Motion settings ─────────────────────────────────────────────────────── */

body[data-motion="calm"] #caustics { animation-duration: 52s; opacity: .17; }
body[data-motion="calm"] .chat-item::before { display: none; }
body[data-motion="calm"] .anim-surface { animation-duration: .3s; }
body[data-motion="calm"] .gauge:hover .gring { animation: none; }

body[data-motion="off"] *,
body[data-motion="off"] *::before,
body[data-motion="off"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .06s !important;
}
body[data-motion="off"] #caustics { animation: none; opacity: .14; }

@media (prefers-reduced-motion: reduce) {
  body:not([data-motion="full"]) *,
  body:not([data-motion="full"]) *::before { animation-duration: .01ms !important; }
}