/* =========================================================
   Animations — Loading, Reveal, Typewriter, Micro-interactions
   ========================================================= */

/* --- Page Fade-in on Load -------------------------------- */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.site-header {
  animation: page-enter var(--dur-slow) var(--ease-gallery) both;
}

.content-section {
  animation: page-enter var(--dur-slow) var(--ease-gallery) 120ms both;
}

/* --- Section Reveal (JS-driven) -------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-reveal) var(--ease-gallery),
    transform var(--dur-reveal) var(--ease-gallery);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Input Focus Underline Expand ----------------------- */
@keyframes underline-expand {
  from { scaleX: 0; }
  to   { scaleX: 1; }
}

.cell-input {
  position: relative;
}

/* --- Loading Dots --------------------------------------- */
@keyframes dot-pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
  40%           { transform: scale(1);   opacity: 1;   }
}

.loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  display: inline-block;
  animation: dot-pulse 1.4s ease-in-out infinite;
}

.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

/* --- Stage Text Fade ------------------------------------ */
@keyframes stage-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

.stage-text-enter {
  animation: stage-fade-in var(--dur-base) var(--ease-gallery) forwards;
}

.stage-text-exit {
  animation: stage-fade-out var(--dur-base) var(--ease-smooth) forwards;
}

/* --- Shimmer on progress bar ---------------------------- */
@keyframes shimmer-move {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

.progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.4) 50%,
    transparent 100%
  );
  animation: shimmer-move 1.6s ease-in-out infinite;
}

/* --- Orbit rings (decorative background) ---------------- */
@keyframes orbit-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.loading-orbit-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto var(--sp-8);
}

.loading-orbit-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: var(--color-accent);
  z-index: 2;
}

.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(139,37,0,0.2);
  transform: translate(-50%, -50%);
}

.orbit-ring:nth-child(1) {
  width: 48px;
  height: 48px;
  border-color: rgba(139,37,0,0.35);
  animation: orbit-spin 2.4s linear infinite;
}

.orbit-ring:nth-child(1)::after {
  content: '';
  position: absolute;
  top: -3px;
  right: 8px;
  width: 5px;
  height: 5px;
  background: var(--color-accent);
  border-radius: 50%;
}

.orbit-ring:nth-child(2) {
  width: 72px;
  height: 72px;
  border-color: rgba(139,37,0,0.2);
  animation: orbit-spin 3.8s linear infinite reverse;
}

.orbit-ring:nth-child(2)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 12px;
  width: 4px;
  height: 4px;
  background: var(--color-accent-mid);
  border-radius: 50%;
}

.orbit-ring:nth-child(3) {
  width: 98px;
  height: 98px;
  border-color: rgba(139,37,0,0.1);
  animation: orbit-spin 6s linear infinite;
}

/* --- Image Curtain Reveal ------------------------------- */
@keyframes curtain-left {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@keyframes curtain-right {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.result-image-frame .curtain-left,
.result-image-frame .curtain-right {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--color-ink);
  transform-origin: left center;
  pointer-events: none;
}

.result-image-frame .curtain-right {
  transform-origin: right center;
}

.result-image-frame.reveal-active .curtain-left {
  animation: curtain-left 900ms 100ms var(--ease-gallery) forwards;
}

.result-image-frame.reveal-active .curtain-right {
  animation: curtain-right 900ms 200ms var(--ease-gallery) forwards;
}

/* --- Cursor Blink --------------------------------------- */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* --- Result Card Slide-up ------------------------------- */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.result-description-card.animate-in {
  animation: card-enter var(--dur-reveal) var(--ease-gallery) both;
}

/* --- Table Row stagger ---------------------------------- */
.plan-table tbody tr {
  opacity: 0;
  animation: page-enter var(--dur-base) var(--ease-gallery) both;
}

.plan-table tbody tr:nth-child(1) { animation-delay: 200ms; }
.plan-table tbody tr:nth-child(2) { animation-delay: 280ms; }
.plan-table tbody tr:nth-child(3) { animation-delay: 360ms; }
.plan-table tbody tr:nth-child(4) { animation-delay: 440ms; }
.plan-table tbody tr:nth-child(5) { animation-delay: 520ms; }

/* --- Error shake ---------------------------------------- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.shake {
  animation: shake 400ms var(--ease-smooth);
}

/* --- Prompt pill reveal --------------------------------- */
@keyframes pill-expand {
  from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
  to   { opacity: 1; max-height: 200px; }
}

.prompt-preview.visible {
  display: block;
  animation: pill-expand var(--dur-slow) var(--ease-gallery) forwards;
  overflow: hidden;
}

/* --- Scroll-linked Parallax Header Deco ----------------- */
.header-deco-bar {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--color-accent) 0%, transparent 100%);
  opacity: 0.5;
}

/* --- Focus ring for accessibility ----------------------- */
.btn-submit:focus-visible,
.btn-secondary:focus-visible,
.field-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}