/**
 * animations.css
 * ---------------
 * CSS animation rules for elements not controlled by TSX (third-party components).
 * @keyframes are defined in tailwind.config.ts and generated by Tailwind.
 * This file only contains the selectors that apply those animations.
 */

/* ===== Storyboard skeleton shimmer ===== */
.nano-comic-storyboard__asset-card-skeleton-block::after,
.nano-comic-storyboard__asset-card-skeleton-line::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.14) 48%,
    rgba(255, 255, 255, 0) 100%
  );
  @apply animate-shimmer motion-reduce:animate-none;
}

/* ===== Generation overlay sheen ===== */
.tc-task-node__gen-overlay-sheen {
  position: absolute;
  inset: -80px;
  background: linear-gradient(90deg, transparent, var(--tc-gen-overlay-sheen), transparent);
  @apply animate-sheen motion-reduce:animate-none;
}

/* ===== AI Chat aura pulse ===== */
.tc-ai-chat__aura {
  @apply animate-aura-pulse motion-reduce:animate-none;
  animation-play-state: paused;
}

/* ===== AI Chat thinking breathe ===== */
.tc-ai-chat-thinking::after {
  content: '';
  position: absolute;
  inset: -20% auto auto -10%;
  width: 42%;
  height: 140%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0.05) 42%, rgba(59, 130, 246, 0) 74%);
  pointer-events: none;
  filter: blur(10px);
  @apply animate-thinking-breathe motion-reduce:animate-none;
}

/* ===== AI Chat thinking slide (progress bar) ===== */
.tc-ai-chat-thinking__progress-bar {
  position: absolute;
  inset: 0 auto 0 -30%;
  width: 36%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.85) 45%, rgba(125, 211, 252, 0.55) 100%);
  @apply animate-slide-right motion-reduce:animate-none;
}

/* ===== AI Chat bubble breath ===== */
.tc-ai-chat__bubble-button::before {
  @apply animate-bubble-breath motion-reduce:animate-none;
}

/* ===== AI Chat bubble halo ===== */
.tc-ai-chat__bubble-button::after {
  @apply animate-bubble-halo motion-reduce:animate-none;
}

/* ===== AI Chat bubble status pulse ===== */
.tc-ai-chat__bubble-status {
  @apply animate-status-pulse motion-reduce:animate-none;
}

/* ===== AI Chat thinking line fade-in ===== */
.tc-ai-chat-thinking__line {
  opacity: 0;
  transform: translateY(4px);
  @apply animate-fade-in-up motion-reduce:animate-none;
}

/* ===== Reduced motion: disable transitions ===== */
@media (prefers-reduced-motion: reduce) {
  .tc-ai-chat {
    transition: none;
  }

  .tc-ai-chat__backdrop {
    transition: none;
  }

  .tc-ai-chat__aura {
    transition: none;
  }

  .tc-ai-chat__card {
    transition: none;
  }
}
