/* ═══════════════════════════════════════════════════════════
   Grimorie — Animated Terminal Component
   Typing sequences with auto-play, loading dots, cursor blink.
   Data-driven via data-sequences JSON attribute.
   ═══════════════════════════════════════════════════════════ */

/* ── Container ── */
.gm-terminal-animated {
  background: var(--gm-terminal);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Theme-reactive border glow — pulses when running */
.gm-terminal-animated[data-running="true"] {
  border-color: var(--gm-border-hover);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 20px var(--gm-fire-glow), 0 0 40px rgba(0, 0, 0, 0.2);
}

/* ── Title bar — reuses existing nx-dot classes ── */
.gm-term-anim-hdr {
  background: var(--gm-surface);
  border-bottom: 1px solid var(--gm-border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.gm-term-anim-title {
  font-family: var(--gm-font-mono);
  font-size: 11px;
  color: var(--gm-text-dim);
  margin-left: 6px;
  flex: 1;
}

.gm-term-anim-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--gm-font-mono);
  font-size: 10px;
  color: var(--gm-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gm-term-anim-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gm-primary);
  animation: gm-term-live-pulse 2s ease-in-out infinite;
}

@keyframes gm-term-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Scoped nx-dot styles for standalone use ── */
.gm-terminal-animated .nx-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.gm-terminal-animated .nx-dot-r { background: #ff5f56; }
.gm-terminal-animated .nx-dot-y { background: #ffbd2e; }
.gm-terminal-animated .nx-dot-g { background: #27c93f; }

/* ── Body ── */
.gm-term-anim-body {
  padding: 18px 22px;
  font-family: var(--gm-font-mono);
  font-size: 14px;
  line-height: 1.7;
  min-height: 140px;
  background: rgba(0, 0, 0, 0.4);
  position: relative;
}

/* CRT scan lines — subtle retro overlay */
.gm-term-anim-body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* ── Output lines ── */
.gm-term-anim-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gm-term-anim-line {
  color: var(--gm-text);
  opacity: 0;
  animation: gm-term-line-in 0.3s ease-out forwards;
}

.gm-term-anim-line[data-type="command"] {
  color: var(--gm-text-bright);
}

.gm-term-anim-line[data-type="success"] {
  background: linear-gradient(90deg, var(--gm-fire-core), var(--gm-fire-mid), var(--gm-fire-deep));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px var(--gm-fire-glow));
}

@keyframes gm-term-line-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Prompt ── */
.gm-term-anim-prompt {
  white-space: nowrap;
}

.gm-term-anim-user { color: var(--gm-primary); }
.gm-term-anim-sep { color: var(--gm-text-dim); }
.gm-term-anim-path { color: var(--gm-cyan); }
.gm-term-anim-dollar { color: var(--gm-text-bright); }
.gm-term-anim-typing { color: var(--gm-text-bright); }

/* ── Cursor blink with fire glow ── */
.gm-term-anim-cursor {
  color: var(--gm-primary);
  text-shadow: 0 0 8px var(--gm-fire-glow), 0 0 16px var(--gm-fire-glow);
  animation: gm-cursor-blink 1s step-end infinite;
}

@keyframes gm-cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ── Loading dots ── */
.gm-term-anim-loading {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gm-text-dim);
  margin-top: 4px;
}

.gm-term-anim-loading[hidden] { display: none; }

.gm-term-anim-dot {
  width: 4px;
  height: 4px;
  background: var(--gm-text-dim);
  border-radius: 50%;
  animation: gm-dot-bounce 1.4s ease-in-out infinite;
}

.gm-term-anim-dot:nth-child(2) { animation-delay: 0.1s; }
.gm-term-anim-dot:nth-child(3) { animation-delay: 0.2s; }

@keyframes gm-dot-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}

.gm-term-anim-loading-text {
  font-size: 11px;
  margin-left: 4px;
}

/* ── Status bar ── */
.gm-term-anim-status {
  border-top: 1px solid var(--gm-border);
  padding: 8px 22px;
  display: flex;
  justify-content: space-between;
  font-family: var(--gm-font-mono);
  font-size: 11px;
  color: var(--gm-text-dim);
}

.gm-term-anim-status strong {
  color: var(--gm-text-bright);
  font-weight: 500;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .gm-term-anim-cursor { animation: none; opacity: 1; }
  .gm-term-anim-live-dot { animation: none; }
  .gm-term-anim-dot { animation: none; }
  .gm-term-anim-line { animation: none; opacity: 1; }
  .gm-terminal-animated[data-running="true"] { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); }
}