/*
  Home page anvil strike (static/js/anvil-intro.js), played right on the hero's
  anvil: on arrival (the hero text stays put), and again on every press of
  the anvil. Nothing here shows unless <html> has .anvil-intro
  (the entrance, added by an inline script in the home template) or
  .anvil-striking (a press).
*/

.anvil-intro-overlay { display: none; }

html.anvil-intro .anvil-intro-overlay,
html.anvil-striking .anvil-intro-overlay {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
}

/* The hero's anvil is a button: pressing it strikes it again. The blow lands
   on the press, so nothing here may sit between the press and the hit — no tap
   delay, no tap highlight, and no text selection when it's struck repeatedly. */
.anvil-strike {
  position: relative;
  isolation: isolate;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  border-radius: 0.12em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 0.2s cubic-bezier(.3, 1.6, .5, 1);
}
.anvil-strike svg {
  width: 100%;
  height: 100%;
}
/* Fade a fixed, feathered bloom instead of re-filtering the animated SVG.
   It belongs to the button, so swapping in the strike's anvil never resets it.
   Pointer events stay on the button's original bounds, not the wider halo. */
.anvil-strike::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 52%,
    color-mix(in oklab, var(--color-primary) 32%, transparent) 0%,
    color-mix(in oklab, var(--color-primary) 20%, transparent) 24%,
    color-mix(in oklab, var(--color-secondary) 10%, transparent) 44%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 650ms cubic-bezier(.22, .61, .36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .anvil-strike:hover::before { opacity: 1; }
}
.anvil-strike:focus-visible::before {
  opacity: 1;
}
.anvil-strike:active { transform: scale(0.97); }
/* Hold still while striking, so the stand-in anvil sits exactly on the real one. */
html.anvil-intro .anvil-strike,
html.anvil-striking .anvil-strike { transform: none; transition: none; }
/* The mark's idle colour-flow is a pair of @property animations; pause it on
   the stand-in while a blow is in flight so it doesn't compete with the slam. */
html.anvil-intro [data-logo-mark],
html.anvil-striking [data-logo-mark] {
  animation: none;
}
.anvil-strike:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 0.06em;
}
/* The hover bloom stays inside the icon's corners. */
.app-icon-logo .anvil-strike::before { inset: 0; border-radius: inherit; }

/* The stage's anvil stands in for the real one while it's struck. */
html.anvil-intro [data-anvil-strike] [data-logo-mark],
html.anvil-striking [data-anvil-strike] [data-logo-mark] {
  opacity: 0;
}

/* On the home page the anvil sits on an app icon, and the whole tile is the
   button; the padding is the margin around the mark. */
.app-icon-logo .anvil-strike {
  width: 100%;
  height: 100%;
  padding: 16%;
  border-radius: inherit;
  corner-shape: inherit;
}
.app-icon-logo .anvil-strike:focus-visible { outline-offset: 3px; }

.anvil-intro-shake,
.anvil-intro-sparks {
  position: absolute;
  inset: 0;
}
.anvil-intro-sparks { width: 100%; height: 100%; }

/* The stage uses the logo mark's viewBox and is scaled down onto the hero's
   anvil; everything on it (hammer, flash, rings) scales with it. */
.anvil-intro-stage {
  --s: min(52vw, 17rem);
  position: absolute;
  left: 50%;
  top: 52%;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transform-origin: 0 0;
  --strike-x: 66.67%; /* where the hammer lands, across the stage */
}
/* A click strikes from the left: the hammer is mirrored about the stage. */
.anvil-intro-stage.is-left { --strike-x: 33.33%; }
.anvil-intro-stage.is-left .anvil-intro-hammer { scale: -1 1; }
.anvil-intro-anvil,
.anvil-intro-hammer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.anvil-intro-anvil {
  opacity: 0;
  transform-origin: 50% 78%; /* the anvil's feet */
}

/* ---- Hammer: drawn resting on the anvil face, and swung about its grip ---- */

.anvil-intro-hammer-body {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 40px 5.9px;
}
.anvil-intro-hammer .head { fill: color-mix(in oklab, var(--color-base-content) 82%, var(--color-base-200)); }
.anvil-intro-hammer .face { fill: var(--color-base-content); }
.anvil-intro-hammer .shine { fill: var(--color-base-100); opacity: 0.35; }
.anvil-intro-hammer .handle { fill: #b07a47; }
.anvil-intro-hammer .grip { fill: #6e4526; }

/* ---- Impact: flash and shockwaves, centred where the hammer lands ---- */

.anvil-intro-glow,
.anvil-intro-flash,
.anvil-intro-ring {
  position: absolute;
  left: var(--strike-x);
  top: 23.7%; /* the anvil face */
  translate: -50% -50%;
  border-radius: 50%;
  opacity: 0;
}
/* Warm bloom around the anvil. Opacity/scale only — animating SVG `filter`
   drop-shadows on the slam was forcing a re-raster every frame. */
.anvil-intro-glow {
  z-index: 0;
  top: 40%;
  width: calc(var(--s) * 1.45);
  height: calc(var(--s) * 1.45);
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--color-primary) 50%, transparent) 0%,
    color-mix(in oklab, var(--color-secondary) 24%, transparent) 42%,
    transparent 70%
  );
}
.anvil-intro-anvil,
.anvil-intro-hammer { z-index: 1; }
.anvil-intro-flash,
.anvil-intro-ring { z-index: 2; }
.anvil-intro-flash {
  width: calc(var(--s) * 1.2);
  height: calc(var(--s) * 1.2);
  background: radial-gradient(
    circle,
    #fff 0 7%,
    color-mix(in oklab, #ffc857 80%, transparent) 20%,
    color-mix(in oklab, var(--color-primary) 30%, transparent) 40%,
    transparent 68%
  );
}
.anvil-intro-ring {
  width: calc(var(--s) * 1.8);
  height: calc(var(--s) * 0.42);
  border: calc(var(--s) * 0.012) solid var(--color-primary);
}
.anvil-intro-ring-wide {
  width: calc(var(--s) * 3.2);
  height: calc(var(--s) * 3.2);
  border: calc(var(--s) * 0.007) solid color-mix(in oklab, var(--color-primary) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .anvil-strike::before { transition: none; }
  html.anvil-intro .anvil-intro-overlay,
  html.anvil-striking .anvil-intro-overlay { display: none; }
}