/* ============================================================
   web-fx · metal.css  (Tier 1 — pure CSS, zero runtime cost)
   Metallic text, borders and sheen. Lighthouse-safe.
   GUARDRAIL: use sparingly. NEVER on the calm productivity apps
   (Tobydoro, Hazlo, Countie) — they stay typographic. Metallic
   surfaces are for tasteful premium accents only; on this site the
   single use is Dumbphone's restrained signal-orange ember hero.
   ============================================================ */

/* ---- metallic text (background-clip) ---- */
.metal-text {
  /* default = gold */
  --m1: #f6e29a; --m2: #d4af37; --m3: #b8902a; --m4: #f3dd92;
  background: linear-gradient(180deg, var(--m1) 0%, var(--m2) 38%, var(--m3) 60%, var(--m4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* a hair of depth so it reads as metal, not flat */
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}
.metal-text--silver { --m1: #ffffff; --m2: #c7ccd2; --m3: #8b9097; --m4: #e7eaee; }
.metal-text--chrome { --m1: #eaf2ff; --m2: #9fb2c9; --m3: #5e6a7c; --m4: #cdd8e6; }
.metal-text--cyan   { --m1: #d6fbff; --m2: #5ad6e8; --m3: #1f9fb3; --m4: #b6f3fb; }

/* ---- a slow sheen sweep over a metallic element (one bar, reduced-motion safe) ---- */
.metal-sheen { position: relative; overflow: hidden; isolation: isolate; }
.metal-sheen::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%);
  background-size: 250% 100%;
  mix-blend-mode: overlay;
  animation: fx-sheen 6.5s var(--ease, cubic-bezier(.22,1,.36,1)) infinite;
}
@keyframes fx-sheen {
  0% { background-position: 140% 0; }
  55%, 100% { background-position: -40% 0; }
}

/* ---- metallic gradient border (1px) ---- */
.metal-border {
  --m2: #d4af37; --m1: #f6e29a; --m3: #9a7a1c;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-card, #0a0a0f), var(--bg-card, #0a0a0f)) padding-box,
    linear-gradient(150deg, var(--m1), var(--m2) 40%, var(--m3) 70%, var(--m1)) border-box;
}

/* ============================================================
   web-fx · liquid-chrome canvas mount (Tier 3 — see liquid-chrome.js)
   The <canvas class="fx-liquid"> fills its positioned parent. A poster
   image (set per page in app.css: .fx-liquid{background-image:url(...)})
   is the fallback for no-WebGL / reduced-motion.
   ============================================================ */
.fx-host { position: relative; isolation: isolate; }
.fx-liquid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .metal-sheen::after { animation: none; opacity: 0; }
}

/* Fallback: if background-clip:text is unsupported, show solid metal (never invisible). */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .metal-text {
    background: none; color: var(--m2, #d4af37);
    -webkit-text-fill-color: currentColor; filter: none;
  }
}