/**
 * Helmies.fi — AI Card
 *
 * A live-streaming service card spawned by the chat bot. It mirrors
 * the static `.svc-stack__card-frame` recipe (pearl-glass body, glow
 * ring, mini-scene at the top), but it also has:
 *   - an entrance / exit transform animation so cards swap cleanly
 *   - a blinking caret while the description is being streamed
 *   - per-service `--accent`-tinted scene loops (CSS-only)
 */

/* ─── Card host: a sibling overlay layer over the static stack ──
   Same left-half inset as `.svc-stack__card`, same alignment. We
   set `pointer-events: none` so the host never traps clicks meant
   for the chat input behind it; the card itself reactivates events. */
.svc-stack-ai {
  position: absolute;
  inset: 0 50% 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  pointer-events: none;
  z-index: 50;             /* above the static stack but below header */
}
@media (max-width: 900px) {
  .svc-stack-ai { display: none; } /* mobile uses chat-history */
}

/* The card itself — reuses .svc-stack__card-frame; we just override
   positioning to remove the flex-centering parent's defaults and
   add an entrance/exit transform. Width matches the static stack
   cards (the frame's own `max-width: 1100px` takes over); height
   adjusts to content rather than running tall. */
.ai-card {
  position: relative;
  inset: auto;
  width: 100%;
  padding: 0;
  display: flex;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition:
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-card.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ai-card.is-leaving {
  opacity: 0;
  transform: translateY(-18px) scale(0.97);
  transition:
    opacity 0.32s ease,
    transform 0.32s ease;
}

/* Auto-height frame — content drives the size. The static frame's
   clamp(26rem, 72vh, 42rem) is replaced with a softer min so short
   replies still feel cardy. No max-height + no scrollbar: the card
   grows with the text. */
.ai-card .svc-stack__card-frame {
  height: auto;
  min-height: clamp(20rem, 48vh, 30rem);
  max-height: none;
  overflow: hidden;
}

/* While an AI card is active, the static stack cards yield. We only
   target direct children of .svc-stack so the AI card inside
   .svc-stack-ai keeps showing.
   `!important` is required because GSAP writes inline opacity /
   transform on these cards during scroll-pin — without it, the
   inline styles beat this class rule and the static deck stays
   visible behind the AI card. */
.svc-stack.has-ai-card > .svc-stack__card {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.32s ease;
}

/* Close button — top-right of the AI card frame. Glass circle, X
   icon. Click dismisses the card and brings the static deck back. */
.ai-card__close {
  position: absolute;
  top: clamp(0.85rem, 1.6vw, 1.2rem);
  right: clamp(0.85rem, 1.6vw, 1.2rem);
  z-index: 5;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ai-card__close:hover  { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.50); }
.ai-card__close:active { transform: scale(0.92); }

/* The kicker reads "From the bot" instead of "Service". */
.ai-card__kicker {
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.18em;
}

/* User's question shown as the tagline, italic + quoted. */
.ai-card__tagline {
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
}

/* Streaming description — caret blinks while characters arrive. */
.ai-card__desc {
  white-space: pre-wrap;       /* respect line breaks if any */
}
.ai-card__caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  margin-bottom: -2px;
  background: var(--accent, #fff);
  animation: ai-card-caret 0.85s steps(1) infinite;
  vertical-align: text-bottom;
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}
.ai-card.is-final .ai-card__caret {
  display: none;
}
@keyframes ai-card-caret {
  50% { opacity: 0; }
}

/* Pills inherit the static deck's pearl-glass recipe. */

/* ─── Per-service scene loops ───────────────────────────────── */
.ai-card__scene-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Web — typing caret + bars filling like loaded content. */
.ai-card__scene-svg--web .caret {
  animation: aiweb-caret 0.7s steps(1) infinite;
}
.ai-card__scene-svg--web .bar {
  animation: aiweb-bar 2.4s ease-in-out infinite;
  transform-origin: 44px 0;
}
.ai-card__scene-svg--web .bar:nth-child(7)  { animation-delay: 0.0s; }
.ai-card__scene-svg--web .bar:nth-child(8)  { animation-delay: 0.2s; }
.ai-card__scene-svg--web .bar:nth-child(9)  { animation-delay: 0.4s; }
.ai-card__scene-svg--web .bar:nth-child(10) { animation-delay: 0.6s; }
@keyframes aiweb-caret { 50% { opacity: 0.2; } }
@keyframes aiweb-bar   {
  0%   { width: 0;   opacity: 0.2; }
  40%  { width: 220px; opacity: 1; }
  80%  { width: 220px; opacity: 1; }
  100% { width: 0;   opacity: 0.2; }
}

/* Form — pearl breathes, halos pulse outward. */
.ai-card__scene-svg--form .pearl   { animation: aiform-pearl 3.8s ease-in-out infinite; transform-origin: 160px 100px; }
.ai-card__scene-svg--form .shimmer { animation: aiform-shimmer 4.2s ease-in-out infinite; transform-origin: 146px 86px; }
.ai-card__scene-svg--form .halo    { animation: aiform-halo 4s ease-out infinite;        transform-origin: 160px 100px; opacity: 0; }
.ai-card__scene-svg--form .halo--2 { animation-delay: 1.2s; }
@keyframes aiform-pearl   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes aiform-shimmer { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
@keyframes aiform-halo    {
  0%   { opacity: 0;   transform: scale(0.7); }
  35%  { opacity: 0.6;  transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.5); }
}

/* Depth — slow rotating isometric cube. */
.ai-card__scene-svg--depth .cube {
  animation: aidepth-rotate 9s linear infinite;
  transform-origin: 160px 100px;
}
@keyframes aidepth-rotate {
  0%   { transform: translate(160px, 100px) rotate(0deg); }
  100% { transform: translate(160px, 100px) rotate(360deg); }
}

/* Mind — pulse traveling out from hub through the four links. */
.ai-card__scene-svg--mind .pulse {
  animation: aimind-pulse 2.6s ease-out infinite;
  transform-origin: 160px 100px;
}
.ai-card__scene-svg--mind .node {
  animation: aimind-blink 2.6s ease-in-out infinite;
}
.ai-card__scene-svg--mind .node:nth-of-type(2) { animation-delay: 0.4s; }
.ai-card__scene-svg--mind .node:nth-of-type(3) { animation-delay: 0.8s; }
.ai-card__scene-svg--mind .node:nth-of-type(4) { animation-delay: 1.2s; }
@keyframes aimind-pulse {
  0%   { opacity: 0.85; transform: scale(1); }
  80%  { opacity: 0;    transform: scale(8); }
  100% { opacity: 0;    transform: scale(8); }
}
@keyframes aimind-blink {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Growth — bars rise + arrow line draws. */
.ai-card__scene-svg--growth .g-bar {
  animation: aigrowth-bar 3.6s ease-in-out infinite;
  transform: translateY(0);
  transform-origin: bottom;
}
.ai-card__scene-svg--growth .g-bar:nth-of-type(1) { animation-delay: 0.0s; }
.ai-card__scene-svg--growth .g-bar:nth-of-type(2) { animation-delay: 0.15s; }
.ai-card__scene-svg--growth .g-bar:nth-of-type(3) { animation-delay: 0.30s; }
.ai-card__scene-svg--growth .g-bar:nth-of-type(4) { animation-delay: 0.45s; }
.ai-card__scene-svg--growth .g-bar:nth-of-type(5) { animation-delay: 0.60s; }
@keyframes aigrowth-bar {
  0%   { height: 0;   y: 160; }
  35%  { height: 36;  y: 124; }
  65%  { height: 36;  y: 124; }
  100% { height: 0;   y: 160; }
}
.ai-card__scene-svg--growth .g-arrow,
.ai-card__scene-svg--growth .g-arrow-head {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: aigrowth-draw 3.6s ease-in-out infinite;
}
@keyframes aigrowth-draw {
  0%   { stroke-dashoffset: 260; opacity: 0; }
  20%  { opacity: 1; }
  60%  { stroke-dashoffset: 0;   opacity: 1; }
  90%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: 260; opacity: 0; }
}

/* Bites — steam wisps + plate breathe. */
.ai-card__scene-svg--bites .plate2 { animation: aibites-plate 3.4s ease-in-out infinite; transform-origin: 160px 120px; }
.ai-card__scene-svg--bites .steam  { animation: aibites-steam 2.8s ease-in-out infinite; transform-origin: center bottom; opacity: 0.4; }
.ai-card__scene-svg--bites .steam:nth-of-type(4) { animation-delay: 0.7s; }
@keyframes aibites-plate { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes aibites-steam {
  0%   { opacity: 0;   transform: translateY(10px); }
  35%  { opacity: 0.7; transform: translateY(0); }
  70%  { opacity: 0.4; transform: translateY(-6px); }
  100% { opacity: 0;   transform: translateY(-12px); }
}

/* Helmies (default) — ring pulses + pearl breathing. */
.ai-card__scene-svg--helmies .pearl  { animation: aihelm-pearl 4s ease-in-out infinite; transform-origin: 160px 100px; }
.ai-card__scene-svg--helmies .ring   { animation: aihelm-ring 4s ease-out infinite; transform-origin: 160px 100px; opacity: 0; }
.ai-card__scene-svg--helmies .ring--2 { animation-delay: 1.2s; }
@keyframes aihelm-pearl { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes aihelm-ring  {
  0%   { opacity: 0;   transform: scale(0.7); }
  35%  { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.45); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-card,
  .ai-card.is-active,
  .ai-card.is-leaving { transition: none; }
  .ai-card__scene-svg * { animation: none !important; }
  .ai-card__caret { animation: none; opacity: 0.6; }
}