/* ===== AI effects (ai-fx.js) =====
   "Ask AI to..." typing prompt,
   decoding section headings, and cursor-following card glow.
   Every effect degrades to static content under prefers-reduced-motion. */

/* --- "Ask AI to..." prompt (injected after the hero lede) --- */
.ai-prompt {
  /* Fixed size, two rows (label over typed line): typing never reflows the hero. */
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 1px; align-items: center;
  width: min(100%, 400px); margin-top: 24px; padding: 10px 16px 10px 10px; border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--border));
  box-shadow: 0 0 0 0 transparent, 0 10px 30px -18px color-mix(in srgb, var(--accent) 80%, transparent);
  font-size: 0.98rem; line-height: 1.4; color: var(--text);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  /* keep the hero's staggered entrance (opacity/transform from .hero-copy > *) */
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s, box-shadow 0.4s ease;
}
.ai-prompt.is-done { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 14%, transparent), 0 10px 30px -18px color-mix(in srgb, var(--accent) 80%, transparent); }
.ai-prompt-icon {
  grid-row: span 2; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
}
.ai-prompt-icon svg { width: 17px; height: 17px; }
.ai-prompt.is-done .ai-prompt-icon svg { animation: ai-spark 0.9s ease; }
@keyframes ai-spark {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(90deg) scale(1.25); }
  100% { transform: rotate(180deg) scale(1); }
}
.ai-prompt-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-prompt-line { display: flex; align-items: center; min-width: 0; height: 1.4em; }
.ai-prompt-text { font-weight: 600; white-space: nowrap; overflow: hidden; }
.ai-caret {
  display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; flex-shrink: 0;
  background: var(--accent-2); animation: ai-caret 1s steps(1) infinite;
}
@keyframes ai-caret { 50% { opacity: 0; } }
/* Smallest phones: the longest task still fits on one line. */
@media (max-width: 389px) { .ai-prompt { font-size: 0.9rem; column-gap: 10px; padding-right: 12px; } }

/* --- Decoding headings --- */
.ai-glyph { color: var(--accent-2); opacity: 0.75; }

/* --- Cursor-following card glow (pointer devices only) --- */
@media (hover: hover) and (pointer: fine) {
  .ai-glow { position: relative; isolation: isolate; }
  .ai-glow::before, .ai-glow::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity 0.35s ease;
  }
  /* soft spotlight under the content */
  .ai-glow::before {
    z-index: -1;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%);
  }
  /* bright rim that tracks the cursor along the border */
  .ai-glow::after {
    padding: 1.5px;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--accent-2), color-mix(in srgb, var(--accent) 60%, transparent) 40%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  .ai-glow:hover::before, .ai-glow:hover::after { opacity: 1; }
}

/* --- FAQ answers stream in --- */
.faq-item.ai-stream .faq-body { position: relative; }
.ai-tok { opacity: 0; filter: blur(4px); transition: opacity 0.35s ease, filter 0.35s ease; }
.ai-tok.on { opacity: 1; filter: none; }
.ai-thinking {
  position: absolute; left: 24px; top: 2px; display: none; gap: 5px; align-items: center; height: 1.6em;
}
.faq-item.is-thinking .ai-thinking { display: inline-flex; }
.ai-thinking i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2);
  animation: ai-think 0.9s ease-in-out infinite;
}
.ai-thinking i:nth-child(2) { animation-delay: 0.15s; }
.ai-thinking i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-think { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

/* --- AI scan around the instructor photo --- */
/* A rotating ring's layout box is ~41% larger than the circle you see (its
   corners swing out), which pushed narrow phones 9px wide. Clip the photo
   column to itself; the margin keeps the visible rings (24px + 2px) inside. */
.about-photo-wrap.has-ai-scan { overflow: hidden; }
.ai-scan { position: relative; display: inline-block; border-radius: 50%; margin: 30px 0 6px; }
.ai-scan .about-photo { display: block; position: relative; z-index: 1; }
.ai-scan-ring {
  position: absolute; inset: -12px; border-radius: 50%; pointer-events: none;
  border: 1.5px dashed color-mix(in srgb, var(--accent-2) 55%, transparent);
  animation: ai-orbit 22s linear infinite;
}
/* two "satellites" riding the inner ring */
.ai-scan-ring::before, .ai-scan-ring::after {
  content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent-2) 70%, transparent);
  top: -5px; left: calc(50% - 4.5px);
}
.ai-scan-ring::after { top: auto; bottom: -5px; background: var(--accent); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent) 70%, transparent); }
.ai-scan-ring-2 {
  inset: -24px; border: 2px solid transparent;
  border-top-color: color-mix(in srgb, var(--accent) 75%, transparent);
  border-right-color: color-mix(in srgb, var(--accent-2) 35%, transparent);
  animation: ai-orbit 7s linear infinite reverse;
}
.ai-scan-ring-2::before, .ai-scan-ring-2::after { display: none; }
@keyframes ai-orbit { to { transform: rotate(360deg); } }
/* scan beam sweeping down across the photo, clipped to the circle */
.ai-scan-beam { position: absolute; inset: 4px; z-index: 2; border-radius: 50%; overflow: hidden; pointer-events: none; }
.ai-scan-beam::after {
  content: ""; position: absolute; left: 0; right: 0; height: 34%; top: -40%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent-2) 22%, transparent) 70%, color-mix(in srgb, var(--accent-2) 85%, transparent) 98%, transparent);
  mix-blend-mode: screen; animation: ai-beam 5s ease-in-out infinite;
}
@keyframes ai-beam { 0% { top: -40%; } 45%, 100% { top: 110%; } }
@media (prefers-reduced-motion: reduce) {
  .ai-scan-beam { display: none; }
}

/* --- How It Works: signals flowing step to step (3-column layout only) --- */
.steps-grid.has-ai-flow { position: relative; }
.ai-flow { display: none; }
@media (min-width: 760px) {
  /* Each segment runs from the right edge of one step number (card padding
     28px + 44px badge + 8px) to the left edge of the next; columns are
     (100% - 2 x 28px gap) / 3 wide. Badge centers sit 32px + 22px down. */
  .ai-flow {
    display: block; position: absolute; z-index: 2; top: 53px; height: 2px; pointer-events: none;
    width: calc((100% - 56px) / 3 - 32px);
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 55%, transparent) 0 6px, transparent 6px 12px);
    background-size: 24px 2px; animation: ai-flow-march 1s linear infinite;
    opacity: 0; transition: opacity 0.6s ease;
  }
  .has-ai-flow.flow-on .ai-flow { opacity: 1; }
  .ai-flow-1 { left: 80px; }
  .ai-flow-2 { left: calc((100% - 56px) / 3 + 108px); }
  @keyframes ai-flow-march { to { background-position: 24px 0; } }
  .ai-flow-packet {
    position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; opacity: 0;
    background: #fff; box-shadow: 0 0 8px 3px var(--accent-2), 0 0 20px 6px color-mix(in srgb, var(--accent) 60%, transparent);
    animation: ai-packet 3.6s ease-in-out infinite;
  }
  .ai-flow-2 .ai-flow-packet { animation-delay: 1.8s; }
  @keyframes ai-packet {
    0% { left: 0; opacity: 0; } 5% { opacity: 1; } 42% { opacity: 1; } 47% { left: calc(100% - 8px); opacity: 0; } 100% { left: calc(100% - 8px); opacity: 0; }
  }
  /* each step number lights up as a signal arrives */
  .has-ai-flow .step-num { animation: ai-step-hit 3.6s ease-out infinite; }
  .has-ai-flow .step-card:nth-child(1) .step-num { animation-delay: -0.1s; }
  .has-ai-flow .step-card:nth-child(2) .step-num { animation-delay: 1.6s; }
  .has-ai-flow .step-card:nth-child(3) .step-num { animation-delay: 3.4s; }
  @keyframes ai-step-hit {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 70%, transparent); }
    20% { box-shadow: 0 0 0 10px transparent, 0 0 22px 4px color-mix(in srgb, var(--accent-2) 45%, transparent); }
    40%, 100% { box-shadow: 0 0 0 0 transparent; }
  }
}

/* --- Learning paths: checkmarks draw themselves in order --- */
.ai-fx .path-card li svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.45s ease; }
.ai-fx .path-card.is-visible li svg path { stroke-dashoffset: 0; }
.ai-fx .path-card li:nth-child(1) svg path { transition-delay: 0.35s; }
.ai-fx .path-card li:nth-child(2) svg path { transition-delay: 0.55s; }
.ai-fx .path-card li:nth-child(3) svg path { transition-delay: 0.75s; }
.ai-fx .path-card li:nth-child(4) svg path { transition-delay: 0.95s; }
.ai-fx .path-card li:nth-child(5) svg path { transition-delay: 1.15s; }
.ai-fx .path-card li:nth-child(n+6) svg path { transition-delay: 1.35s; }