/* Verse Island — The Combine Lab (crafting-epic #26/#54).
 *
 * Owns the CSS for the keeper-location station cards + the per-keeper forge
 * animations (Tailwind JIT never sees these runtime-built classes, so they
 * live here rather than as inline utility classes — same pattern noted in
 * inventory_bar.js). Loaded once from craft.html; craft.js only toggles
 * classes (.is-forging, .vc-table-hit, .vc-strike) — all keyframes live here.
 *
 * Seven keeper "fx" scenes (station key -> .vc-fx-<name>):
 *   forge    Cinder's Molten Forge      — glowing anvil + rising sparks
 *   circuit  Coral's Beachcomber Bench  — traveling current + tide wash
 *   scan     Professor's Tinker Lab     — HUD scanline + flicker grid
 *   orbit    Codewood's Grove Whittler  — orbiting scene-graph nodes + woodchips
 *   ink      Inkbeard's Cartography     — spreading ink ripples + candle flicker
 *   runes    The Deep Athenaeum         — pulsing rune ring + rising bubbles
 *   genie    The Genie's Lamp           — swirling smoke + orbiting sparkle stars
 *   generic  fallback for any unmapped station — soft pulsing glow rings
 *
 * Every fx layer runs a SUBTLE ambient loop all the time (a station "feels
 * alive" even before you forge) and speeds up / brightens when `.is-forging`
 * is added to `.vc-forge-fx` while a job is polling.
 */

/* ── station cards: location backdrop ────────────────────────────────── */
.vc-station-card { position: relative; isolation: isolate; overflow: hidden; }
.vc-station-card .vc-card-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .3s ease;
  filter: saturate(1.02);
}
.vc-station-card:hover .vc-card-bg, .vc-station-card:focus-visible .vc-card-bg { transform: scale(1.06); }

/* ── forge modal: scene header ───────────────────────────────────────── */
.vc-forge-scene { position: relative; overflow: hidden; background: #14110f; }
.vc-forge-scene-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity .5s ease;
}
.vc-forge-scene-bg.vc-loaded { opacity: 1; }
.vc-forge-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vc-forge-fx .vc-p { position: absolute; will-change: transform, opacity; }

/* ── table + button micro-interactions ───────────────────────────────── */
.vc-forge-slots.vc-table-hit { animation: vc-table-hit .5s ease-out; }
@keyframes vc-table-hit {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0); transform: scale(1); }
  30%  { box-shadow: 0 0 0 6px rgba(245,158,11,.35); transform: scale(1.015); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); transform: scale(1); }
}
.vc-forge-go.vc-strike { animation: vc-strike .34s ease-out; }
@keyframes vc-strike {
  0%   { transform: scale(1); }
  35%  { transform: scale(.92); filter: brightness(1.25); }
  70%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}

/* ============================================================
   1. FORGE — Cinder's Molten Forge (blacksmith: sparks + anvil)
   ============================================================ */
.vc-fx-forge .vc-glow {
  position: absolute; left: 50%; bottom: 6%; width: 66%; height: 55%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,138,40,.55), transparent 70%);
  filter: blur(7px);
  animation: vc-forge-pulse 2.6s ease-in-out infinite;
}
.vc-fx-forge.is-forging .vc-glow { animation-duration: 1.1s; }
@keyframes vc-forge-pulse {
  0%, 100% { opacity: .35; transform: translateX(-50%) scale(.92); }
  50%      { opacity: .8;  transform: translateX(-50%) scale(1.08); }
}
.vc-fx-forge .vc-spark {
  width: 4px; height: 4px; border-radius: 50%; bottom: 16%;
  background: #ffc36b; box-shadow: 0 0 7px 2px rgba(255,178,72,.85);
  animation: vc-spark-rise 1.7s ease-out infinite;
}
.vc-fx-forge .vc-spark:nth-child(2) { left: 34%; --dx: 10px; animation-delay: 0s; }
.vc-fx-forge .vc-spark:nth-child(3) { left: 44%; --dx: -8px; animation-delay: .35s; }
.vc-fx-forge .vc-spark:nth-child(4) { left: 52%; --dx: 14px; animation-delay: .7s; }
.vc-fx-forge .vc-spark:nth-child(5) { left: 60%; --dx: -12px; animation-delay: 1.05s; }
.vc-fx-forge .vc-spark:nth-child(6) { left: 48%; --dx: 6px; animation-delay: 1.4s; }
@keyframes vc-spark-rise {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx,8px),-64px) scale(.25); opacity: 0; }
}
.vc-fx-forge.is-forging .vc-spark { animation-duration: .85s; }

/* ============================================================
   2. CIRCUIT — Coral's Beachcomber Workbench (wired current + tide)
   ============================================================ */
.vc-fx-circuit .vc-wire {
  position: absolute; left: 10%; right: 10%; top: 58%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(94,234,212,.55), transparent);
}
.vc-fx-circuit .vc-node {
  width: 8px; height: 8px; border-radius: 50%; top: calc(58% - 3px);
  background: #5eead4; box-shadow: 0 0 9px 3px rgba(94,234,212,.75);
  animation: vc-node-travel 3.2s linear infinite;
}
@keyframes vc-node-travel { 0% { left: 10%; } 100% { left: 86%; } }
.vc-fx-circuit.is-forging .vc-node { animation-duration: 1.05s; }
.vc-fx-circuit .vc-tide {
  position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(56,189,248,.28));
  animation: vc-tide-wash 4.2s ease-in-out infinite;
}
@keyframes vc-tide-wash { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }
.vc-fx-circuit.is-forging .vc-tide { animation-duration: 1.8s; }

/* ============================================================
   3. SCAN — Professor AweShucks' Tinker Lab (HUD scanline + grid flicker)
   ============================================================ */
.vc-fx-scan .vc-grid {
  position: absolute; inset: 0; opacity: .45;
  background-image:
    linear-gradient(rgba(167,139,250,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,.16) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: vc-flicker 2.8s steps(2) infinite;
}
@keyframes vc-flicker { 0%, 100% { opacity: .45; } 50% { opacity: .22; } }
.vc-fx-scan .vc-scanline {
  position: absolute; left: 0; right: 0; height: 24%; top: -25%;
  background: linear-gradient(180deg, transparent, rgba(196,181,253,.4), transparent);
  animation: vc-scan-sweep 2.6s linear infinite;
}
@keyframes vc-scan-sweep { 0% { top: -25%; } 100% { top: 100%; } }
.vc-fx-scan.is-forging .vc-scanline { animation-duration: 1s; }
.vc-fx-scan.is-forging .vc-grid { animation-duration: 1.2s; }

/* ============================================================
   4. ORBIT — Codewood Bear's Grove Whittler (scene-graph nodes + woodchips)
   ============================================================ */
.vc-fx-orbit .vc-orbit-ring {
  position: absolute; left: 50%; top: 58%; width: 74px; height: 74px;
  margin: -37px 0 0 -37px; border: 1.5px dashed rgba(163,230,53,.5); border-radius: 50%;
  animation: vc-spin-slow 6.5s linear infinite;
}
@keyframes vc-spin-slow { to { transform: rotate(360deg); } }
.vc-fx-orbit.is-forging .vc-orbit-ring { animation-duration: 2.6s; }
.vc-fx-orbit .vc-orbit-dot {
  width: 7px; height: 7px; border-radius: 50%; left: 50%; top: 58%;
  background: #a3e635; box-shadow: 0 0 7px 2px rgba(163,230,53,.75);
  animation: vc-orbit 3.4s linear infinite;
}
.vc-fx-orbit .vc-orbit-dot:nth-child(3) { animation-delay: -1.7s; }
@keyframes vc-orbit {
  from { transform: rotate(0deg) translateX(37px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(37px) rotate(-360deg); }
}
.vc-fx-orbit.is-forging .vc-orbit-dot { animation-duration: 1.3s; }
.vc-fx-orbit .vc-chip {
  width: 5px; height: 8px; background: #b98a4a; border-radius: 1px; top: -12%;
  animation: vc-chip-fall 2.6s linear infinite;
}
.vc-fx-orbit .vc-chip:nth-child(4) { left: 30%; animation-delay: 0s; }
.vc-fx-orbit .vc-chip:nth-child(5) { left: 62%; animation-delay: 1.1s; }
@keyframes vc-chip-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(120px) rotate(220deg); opacity: 0; }
}
.vc-fx-orbit.is-forging .vc-chip { animation-duration: 1.3s; }

/* ============================================================
   5. INK — Inkbeard's Cartography Table (ink ripples + candle flicker)
   ============================================================ */
.vc-fx-ink .vc-ripple {
  position: absolute; left: 46%; top: 62%; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%; border: 1.5px solid rgba(56,189,248,.55);
  animation: vc-ripple 2.6s ease-out infinite;
}
.vc-fx-ink .vc-ripple:nth-child(3) { animation-delay: .85s; }
.vc-fx-ink .vc-ripple:nth-child(4) { animation-delay: 1.7s; }
@keyframes vc-ripple { 0% { transform: scale(.3); opacity: .8; } 100% { transform: scale(6.5); opacity: 0; } }
.vc-fx-ink.is-forging .vc-ripple { animation-duration: 1.15s; }
.vc-fx-ink .vc-candle {
  position: absolute; right: 12%; top: 22%; width: 3px; height: 14px;
  background: #fbbf24; border-radius: 2px 2px 1px 1px;
  box-shadow: 0 -7px 11px 2px rgba(251,191,36,.6);
  animation: vc-flame 1.4s ease-in-out infinite;
}
@keyframes vc-flame { 0%, 100% { transform: scaleY(1) skewX(0deg); } 50% { transform: scaleY(1.15) skewX(-4deg); } }

/* ============================================================
   6. RUNES — The Deep Athenaeum (pulsing runes + rising bubbles)
   ============================================================ */
.vc-fx-runes .vc-rune {
  position: absolute; width: 11px; height: 11px; left: 50%; top: 55%;
  margin: -5.5px 0 0 -5.5px; border: 1.5px solid rgba(45,212,191,.75); transform-origin: 0 0;
  animation: vc-rune-orbit 5.5s linear infinite;
}
.vc-fx-runes .vc-rune:nth-child(2) { animation-delay: -1.8s; }
.vc-fx-runes .vc-rune:nth-child(3) { animation-delay: -3.6s; }
@keyframes vc-rune-orbit {
  from { transform: rotate(0deg) translateX(34px) rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) translateX(34px) rotate(-180deg) scale(1.25); }
  to   { transform: rotate(360deg) translateX(34px) rotate(-360deg) scale(1); }
}
.vc-fx-runes.is-forging .vc-rune { animation-duration: 2.2s; }
.vc-fx-runes .vc-bubble {
  position: absolute; width: 6px; height: 6px; border-radius: 50%; bottom: 0;
  background: rgba(125,211,252,.55);
  animation: vc-bubble-rise 3.2s ease-in infinite;
}
.vc-fx-runes .vc-bubble:nth-child(4) { left: 30%; animation-delay: 0s; }
.vc-fx-runes .vc-bubble:nth-child(5) { left: 66%; animation-delay: 1.3s; }
.vc-fx-runes .vc-bubble:nth-child(6) { left: 48%; animation-delay: 2.1s; }
@keyframes vc-bubble-rise {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  20%  { opacity: .85; }
  100% { transform: translateY(-130px) scale(1); opacity: 0; }
}
.vc-fx-runes.is-forging .vc-bubble { animation-duration: 1.4s; }

/* ============================================================
   7. GENIE — The Genie's Lamp (swirling smoke + orbiting sparkle stars)
   ============================================================ */
.vc-fx-genie .vc-smoke {
  position: absolute; left: 50%; bottom: 0; width: 55%; height: 75%; margin-left: -27.5%;
  background: radial-gradient(ellipse at bottom, rgba(217,70,239,.5), transparent 72%);
  filter: blur(9px);
  animation: vc-smoke-swirl 4.2s ease-in-out infinite;
}
@keyframes vc-smoke-swirl {
  0%, 100% { transform: translateX(-6%) scaleY(1); }
  50%      { transform: translateX(6%) scaleY(1.18); }
}
.vc-fx-genie.is-forging .vc-smoke { animation-duration: 1.8s; }
.vc-fx-genie .vc-star {
  position: absolute; width: 4px; height: 4px; left: 50%; top: 55%;
  background: #f0abfc; box-shadow: 0 0 7px 2px rgba(240,171,252,.85);
  animation: vc-star-orbit 3.8s linear infinite;
}
.vc-fx-genie .vc-star:nth-child(3) { --r: 30px; animation-delay: -1.3s; }
.vc-fx-genie .vc-star:nth-child(4) { --r: 44px; animation-delay: -2.6s; }
.vc-fx-genie .vc-star:nth-child(5) { --r: 22px; animation-delay: -.6s; }
@keyframes vc-star-orbit {
  from { transform: rotate(0deg) translateX(var(--r,36px)) rotate(0deg) scale(.8); }
  to   { transform: rotate(360deg) translateX(var(--r,36px)) rotate(-360deg) scale(.8); }
}
.vc-fx-genie.is-forging .vc-star { animation-duration: 1.4s; }

/* ============================================================
   GENERIC — fallback for any unmapped station (soft pulsing glow rings)
   ============================================================ */
.vc-fx-generic .vc-glow {
  position: absolute; left: 50%; top: 55%; width: 60%; height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(249,168,80,.4), transparent 70%);
  animation: vc-forge-pulse 2.6s ease-in-out infinite;
}
.vc-fx-generic.is-forging .vc-glow { animation-duration: 1.2s; }
.vc-fx-generic .vc-ring {
  position: absolute; left: 50%; top: 55%; width: 20px; height: 20px;
  margin: -10px 0 0 -10px; border-radius: 50%; border: 1.5px solid rgba(249,168,80,.6);
  animation: vc-ping-ring 2.4s cubic-bezier(0,.6,.5,1) infinite;
}
.vc-fx-generic .vc-ring:nth-child(2) { animation-delay: .8s; }
.vc-fx-generic .vc-ring:nth-child(3) { animation-delay: 1.6s; }
@keyframes vc-ping-ring { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
.vc-fx-generic.is-forging .vc-ring { animation-duration: 1.1s; }

/* ── accessibility: respect reduced-motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vc-station-card .vc-card-bg,
  .vc-forge-scene-bg,
  .vc-forge-slots.vc-table-hit,
  .vc-forge-go.vc-strike,
  .vc-forge-fx *,
  .vc-forge-fx *::before,
  .vc-forge-fx *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .vc-forge-fx .vc-glow, .vc-fx-genie .vc-smoke { opacity: .35 !important; }
}