/* ============================================================================
 * FAST — Liquid Metal (CSS tiers)
 * ----------------------------------------------------------------------------
 * Tier 2: .fast-liquid-metal-css        Animated CSS-only fallback.
 * Tier 3: .fast-chrome-sheen            Flat chrome gradient for pills/chips.
 *         .fast-chrome-sheen--flowing   Same, with slow orbit animation.
 *         .fast-chrome-text             Chrome-filled text (logotype feel).
 *
 * Palette is locked to the 6-stop production metallic gradient:
 *   #F6F8FA · #C8CFD8 · #E3E5EA · #F6F8FA · #DEE3E8 · #5F6672
 * Direction is always 261deg (matches `metallic-gradient`, `fast-badge`,
 * `dropdown-gradient` in fastxyz/fast-website globals.css).
 * ========================================================================== */

:root {
  --fast-chrome-1: #F6F8FA;
  --fast-chrome-2: #C8CFD8;
  --fast-chrome-3: #E3E5EA;
  --fast-chrome-4: #F6F8FA;
  --fast-chrome-5: #DEE3E8;
  --fast-chrome-6: #5F6672;
  --fast-chrome-angle: 261deg;
  --fast-chrome-stops:
    var(--fast-chrome-1) -8.09%,
    var(--fast-chrome-2) 19.46%,
    var(--fast-chrome-3) 45.22%,
    var(--fast-chrome-4) 64.99%,
    var(--fast-chrome-5) 91.94%,
    var(--fast-chrome-6) 116.5%;
  --fast-chrome-gradient: linear-gradient(var(--fast-chrome-angle), var(--fast-chrome-stops));
}

/* ──────────────────────────────────────────────────────────────────────────
   Tier 2 — animated CSS fallback
   A layered composition: base chrome gradient + soft radial specular pools
   + an orbit animation. Looks good even without the WebGL tier, though it's
   obviously a step down from the real shader.
   ────────────────────────────────────────────────────────────────────────── */
/* Liquid-metal palette for the dark, voluminous surface effect.
   Distinct from the Tier-3 chrome-sheen palette (which is intentionally
   light silver for pills/buttons). These stops go deep graphite → pewter →
   highlight, which is what reads as "liquid metal" at poster scale. */
.fast-liquid-metal-css {
  --fast-lm-deep:    #0C0E12;
  --fast-lm-shadow:  #1A1F28;
  --fast-lm-body:    #3A4250;
  --fast-lm-pewter:  #7A8495;
  --fast-lm-highlight:#E4EAF2;
  position: relative;
  overflow: hidden;
  background-color: var(--fast-lm-shadow);
  background-image:
    /* Bright specular pool, top-left */
    radial-gradient(62% 55% at 28% 22%, rgba(228,234,242,0.70), rgba(228,234,242,0) 62%),
    /* Pewter mid-pool */
    radial-gradient(55% 60% at 72% 38%, rgba(122,132,149,0.55), rgba(122,132,149,0) 68%),
    /* Deep graphite pool, bottom-right */
    radial-gradient(60% 70% at 78% 82%, rgba(12,14,18,0.75), rgba(12,14,18,0) 70%),
    /* Secondary highlight sliver */
    radial-gradient(35% 25% at 42% 58%, rgba(228,234,242,0.45), rgba(228,234,242,0) 70%),
    /* Base graphite gradient (dark → body) */
    linear-gradient(261deg,
      var(--fast-lm-shadow) -8%,
      var(--fast-lm-body) 22%,
      var(--fast-lm-pewter) 48%,
      var(--fast-lm-body) 72%,
      var(--fast-lm-deep) 108%);
  background-size: 180% 180%, 180% 180%, 180% 180%, 140% 140%, 260% 260%;
  background-position: 0% 0%, 100% 30%, 100% 100%, 40% 60%, 0% 50%;
  animation: fast-liquid-metal-orbit 18s ease-in-out infinite;
  color: #E4EAF2;
}

.fast-liquid-metal-css::after {
  /* Sharp specular ribbon — the catchlight that sells "liquid metal" */
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(228,234,242,0.28) 46%,
    rgba(255,255,255,0.70) 50%,
    rgba(228,234,242,0.28) 54%,
    transparent 62%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  animation: fast-liquid-metal-shimmer 12s ease-in-out infinite;
}

@keyframes fast-liquid-metal-orbit {
  0%   { background-position:   0% 0%, 100% 100%, 50% 50%,   0% 50%; }
  25%  { background-position:  70% 15%,  30%  85%, 40% 55%,  50% 40%; }
  50%  { background-position: 100% 40%,   0%  60%, 60% 45%, 100% 50%; }
  75%  { background-position:  30% 70%,  70%  30%, 55% 50%,  50% 60%; }
  100% { background-position:   0% 0%, 100% 100%, 50% 50%, 200% 50%; }
}

@keyframes fast-liquid-metal-shimmer {
  0%, 100% { transform: translateX(-10%) translateY(-5%); }
  50%      { transform: translateX(10%)  translateY(5%); }
}

/* ──────────────────────────────────────────────────────────────────────────
   Tier 3 — chrome sheen for pills, badges, buttons, chips
   ────────────────────────────────────────────────────────────────────────── */
.fast-chrome-sheen {
  background: var(--fast-chrome-gradient);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.25) inset;
  color: #2B2C2F;
}

.fast-chrome-sheen--flowing {
  background: linear-gradient(
    var(--fast-chrome-angle),
    var(--fast-chrome-stops),
    var(--fast-chrome-1) 140%,
    var(--fast-chrome-2) 165%,
    var(--fast-chrome-3) 190%
  );
  background-size: 300% 300%;
  animation: fast-chrome-orbit 10s ease-in-out infinite;
}

@keyframes fast-chrome-orbit {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 20%; }
  50%  { background-position: 60% 100%; }
  75%  { background-position: 10% 60%; }
  100% { background-position: 0% 0%; }
}

/* Chrome text — useful for hero word marks, "FAST" glyph, numeric highlights. */
.fast-chrome-text {
  background: var(--fast-chrome-gradient);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.fast-chrome-text--flowing {
  animation: fast-chrome-orbit 10s ease-in-out infinite;
}

/* ──────────────────────────────────────────────────────────────────────────
   Utilities
   ────────────────────────────────────────────────────────────────────────── */

/* Fade into canvas color so hero backgrounds transition to UI cleanly. */
.fast-liquid-metal-fade-bottom {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

.fast-liquid-metal-fade-top {
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
}

.fast-liquid-metal-fade-radial {
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, #000 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at center, #000 45%, transparent 100%);
}

/* Reduced-motion: freeze all animations. Tier 1 handles this via JS. */
@media (prefers-reduced-motion: reduce) {
  .fast-liquid-metal-css,
  .fast-liquid-metal-css::after,
  .fast-chrome-sheen--flowing,
  .fast-chrome-text--flowing {
    animation: none !important;
  }
}