/*
 * Warsmith — Forge-Glass base material & effects (shared).
 * Depends on tokens.css. Provides the reusable glass surface and the campfire-spark animation
 * used on the hero stage. Spec: anvil/docs/design/warsmith-design-system.md §3–§4.
 */

/* === Glass surface (cards, nav, panels) ===================================================== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-panel);
}

/* === Hero scrim (lay over key-art so text stays legible) ==================================== */
.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 220px 60px rgba(0, 0, 0, 0.55);
  background: linear-gradient(
    180deg,
    rgba(8, 8, 12, 0.55) 0%,
    transparent 26%,
    transparent 46%,
    rgba(8, 8, 12, 0.82) 100%
  );
}

/* === Campfire sparks ========================================================================
 * Each spark = an outer .spark (rise + wobble + birth->death envelope) wrapping an inner .dot
 * (fast flicker). Per-spark params come in as CSS vars (--o / --sway / --vy) + animation timing.
 * Nested opacities multiply, so the flicker always respects the envelope. Spawn the spans with JS
 * (see the site's hero island). Disabled under prefers-reduced-motion.
 */
.spark {
  position: absolute;
  opacity: 0;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
.spark.v1 { animation-name: rise1; }
.spark.v2 { animation-name: rise2; }
.spark.v3 { animation-name: rise3; }
.spark .dot {
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3d2 0%, #ffb648 38%, rgba(255, 120, 40, 0.55) 62%, transparent 78%);
  box-shadow:
    0 0 6px 1px rgba(255, 170, 80, 0.7),
    0 0 12px 2px rgba(255, 120, 40, 0.35);
  animation-name: flicker;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes rise1 { 0%{transform:translate(0,0) scale(1);opacity:0} 8%{opacity:var(--o)} 22%{transform:translate(calc(var(--sway)*.6),calc(var(--vy)*.18)) scale(1)} 40%{transform:translate(calc(var(--sway)*-.5),calc(var(--vy)*.4)) scale(.95)} 60%{transform:translate(calc(var(--sway)*.85),calc(var(--vy)*.62)) scale(.85)} 80%{transform:translate(calc(var(--sway)*-.6),calc(var(--vy)*.82)) scale(.7)} 90%{opacity:calc(var(--o)*.35)} 100%{transform:translate(calc(var(--sway)*.3),var(--vy)) scale(.45);opacity:0} }
@keyframes rise2 { 0%{transform:translate(0,0) scale(1);opacity:0} 9%{opacity:var(--o)} 26%{transform:translate(calc(var(--sway)*-.7),calc(var(--vy)*.22)) scale(1)} 48%{transform:translate(calc(var(--sway)*.9),calc(var(--vy)*.46)) scale(.9)} 68%{transform:translate(calc(var(--sway)*-.55),calc(var(--vy)*.68)) scale(.78)} 86%{transform:translate(calc(var(--sway)*.5),calc(var(--vy)*.88)) scale(.62)} 92%{opacity:calc(var(--o)*.35)} 100%{transform:translate(calc(var(--sway)*-.3),var(--vy)) scale(.4);opacity:0} }
@keyframes rise3 { 0%{transform:translate(0,0) scale(1);opacity:0} 8%{opacity:var(--o)} 24%{transform:translate(calc(var(--sway)*.5),calc(var(--vy)*.2)) scale(1)} 44%{transform:translate(var(--sway),calc(var(--vy)*.44)) scale(.92)} 64%{transform:translate(calc(var(--sway)*-.65),calc(var(--vy)*.66)) scale(.8)} 84%{transform:translate(calc(var(--sway)*.4),calc(var(--vy)*.86)) scale(.64)} 91%{opacity:calc(var(--o)*.35)} 100%{transform:translate(calc(var(--sway)*-.2),var(--vy)) scale(.42);opacity:0} }
@keyframes flicker { 0%,100%{opacity:1} 15%{opacity:.4} 30%{opacity:.85} 45%{opacity:.5} 62%{opacity:1} 78%{opacity:.45} 90%{opacity:.8} }

@media (prefers-reduced-motion: reduce) {
  .spark.v1,.spark.v2,.spark.v3,.spark .dot { animation: none; }
  .spark { opacity: .5; }
}