/* ============================================================
   Duha motion system · v1.0 · ratified 2026-07-21
   The dot is Duha's only actor. House easing is a single-overshoot
   spring matching Baloo's bounce. All states honor reduced-motion.

   Contract: the mark is an inline SVG (never <use> — CSS cannot
   animate inside shadow clones). The dot carries class="duha-dot";
   the mark group carries class="duha-mark".
   State classes go on the SVG (or a wrapper):
     .is-intro    — plays once on app/page load (1.9 s)
     .is-thinking — loops while retrieving/generating (1.15 s)
     .is-answered — plays once when the answer lands (1.6 s)
     .is-typing   — chat typing indicator, three dots .t1 .t2 .t3
     .is-wiggle   — hover affordance, interactive surfaces only
   ============================================================ */

:root {
  --duha-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.duha-dot,
.duha-mark,
.duha-halo {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---- intro: sunrise in (1.9 s total) ---- */
@keyframes duha-mark-in {
  0%   { transform: translateY(26px) scale(0.7); opacity: 0; }
  60%  { transform: translateY(-4px) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes duha-dot-rise {
  0%, 35% { transform: translateY(30px); opacity: 0; }
  55%     { opacity: 1; }
  75%     { transform: translateY(-6px); }
  100%    { transform: translateY(0); opacity: 1; }
}
@keyframes duha-halo-bloom {
  0%, 70% { transform: scale(0.4); opacity: 0; }
  82%     { opacity: 0.55; }
  100%    { transform: scale(2.6); opacity: 0; }
}
.is-intro .duha-mark { animation: duha-mark-in 0.9s var(--duha-spring) both; }
.is-intro .duha-dot  { animation: duha-dot-rise 1.5s var(--duha-spring) both; }
.is-intro .duha-halo { animation: duha-halo-bloom 1.9s ease-out both; }

/* ---- thinking: squash-and-stretch bob (loop) ---- */
@keyframes duha-bob {
  0%, 100% { transform: translateY(9px) scale(1.05, 0.95); }
  50%      { transform: translateY(-9px) scale(0.96, 1.06); }
}
.is-thinking .duha-dot { animation: duha-bob 1.15s ease-in-out infinite; }

/* ---- answered: settle + ring (plays once) ---- */
@keyframes duha-settle {
  0%   { transform: translateY(12px); }
  30%  { transform: translateY(-4px); }
  50%  { transform: translateY(0); }
  62%  { transform: scale(1.22); }
  78%, 100% { transform: scale(1); }
}
@keyframes duha-ring-out {
  0%, 55% { transform: scale(1); opacity: 0; }
  65%     { transform: scale(1.1); opacity: 0.65; }
  100%    { transform: scale(3.1); opacity: 0; }
}
.is-answered .duha-dot  { animation: duha-settle 1.6s var(--duha-spring) both; }
.is-answered .duha-halo { animation: duha-ring-out 1.6s ease-out both; }

/* ---- typing: three suns queueing (loop) ---- */
@keyframes duha-tp {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-9px); opacity: 1; }
}
.is-typing .t1 { animation: duha-tp 1.05s ease-in-out infinite; }
.is-typing .t2 { animation: duha-tp 1.05s ease-in-out 0.15s infinite; }
.is-typing .t3 { animation: duha-tp 1.05s ease-in-out 0.3s infinite; }

/* ---- wiggle: tail-led shake on hover (0.5 s) ---- */
@keyframes duha-wig {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-7deg); }
  60%      { transform: rotate(5deg); }
}
.is-wiggle:hover .duha-mark,
.is-wiggle.play .duha-mark {
  animation: duha-wig 0.5s ease-in-out;
  transform-origin: 40% 70%;
}

/* ---- splash wordmark stagger (pairs with .is-intro) ---- */
@keyframes duha-pop {
  0%   { transform: translateY(20px); opacity: 0; }
  60%  { transform: translateY(-3px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.duha-splash-word span { opacity: 0; display: inline-block; }
.is-intro .duha-splash-word span { animation: duha-pop 0.55s var(--duha-spring) both; }
.is-intro .duha-splash-word span:nth-child(1) { animation-delay: 0.85s; }
.is-intro .duha-splash-word span:nth-child(2) { animation-delay: 0.95s; }
.is-intro .duha-splash-word span:nth-child(3) { animation-delay: 1.05s; }
.is-intro .duha-splash-word span:nth-child(4) { animation-delay: 1.15s; }

/* ---- reduced motion: everything lands instantly ---- */
@media (prefers-reduced-motion: reduce) {
  .is-intro .duha-mark, .is-intro .duha-dot, .is-intro .duha-halo,
  .is-thinking .duha-dot,
  .is-answered .duha-dot, .is-answered .duha-halo,
  .is-typing .t1, .is-typing .t2, .is-typing .t3,
  .is-wiggle:hover .duha-mark, .is-wiggle.play .duha-mark,
  .is-intro .duha-splash-word span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .duha-halo { opacity: 0 !important; }
}