@charset "UTF-8";

/* ==========================================================================
   Wiki Hero Metal — Apex Tale PBR Brushed-Gold Title System
   Scoped to .wiki-hero-metal only (used by wiki + internal page heroes)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS VARIABLES — Gold PBR palette, light angles, intensities
   -------------------------------------------------------------------------- */

.wiki-hero-metal {
  --whm-gold-albedo: #c9963a;
  --whm-gold-hi: #f5e6c0;
  --whm-gold-mid: #e0b84a;
  --whm-gold-base: #b8862d;
  --whm-gold-deep: #8a5a20;
  --whm-gold-shadow: #5a3a14;
  --whm-gold-edge: #3d2810;
  --whm-gold-rim: #ffe9b0;
  --whm-gold-bloom: rgba(200, 150, 70, 0.32);
  --whm-gold-bloom-soft: rgba(184, 134, 46, 0.18);
  --whm-gold-dust: rgba(232, 195, 115, 0.48);
  --whm-metal-dark: #2a1a08;
  --whm-metal-ambient: rgba(245, 230, 192, 0.08);

  --whm-metallic: 1;
  --whm-roughness: 0.52;
  --whm-specular-intensity: 0.52;
  --whm-rim-intensity: 0.54;
  --whm-bloom-intensity: 0.2;
  --whm-edge-bevel: 1;
  --whm-chanfro-intensity: 1;
  --whm-shine-opacity: 0.12;
  --whm-shine-duration: 13s;
  --whm-displace-strength: 1;

  /* Light direction (degrees + offsets for gradient simulation) */
  --whm-light-az: -28deg;
  --whm-light-el: 62deg;
  --whm-light-x: 42%;
  --whm-light-y: 18%;
  --whm-key-color: rgba(255, 236, 180, 0.72);
  --whm-fill-color: rgba(200, 150, 70, 0.55);
  --whm-rim-color: rgba(255, 230, 170, 0.7);

  /* Typography */
  --whm-font: "Cinzel", "AngelusMedieval", Georgia, "Times New Roman", serif;
  --whm-tracking: 0.16em;
  --whm-size: clamp(61px, 5.9vw, 87px);
  --whm-weight: 700;
  --whm-line: 0.9;

  /* Stage geometry */
  --whm-stage-pad-y: 0.35em;
  --whm-stage-pad-x: 0.2em;
  --whm-canvas-opacity: 0.55;
  --whm-filter-specular: url(#whm-specular);
  --whm-filter-displace: url(#whm-brushed);
  --whm-filter-bloom: url(#whm-bloom);
  --whm-filter-stack: url(#whm-metal-stack);
  --whm-filter-chanfro: url(#whm-chanfro);

  /* Layer stack z-index map */
  --whm-z-canvas: 0;
  --whm-z-stage: 1;
  --whm-z-shadow: 1;
  --whm-z-emboss: 2;
  --whm-z-base: 3;
  --whm-z-albedo: 4;
  --whm-z-roughness: 5;
  --whm-z-chanfro: 6;
  --whm-z-specular: 7;
  --whm-z-rim: 8;
  --whm-z-bloom: 8;
  --whm-z-shine: 9;
  --whm-z-text: 10;

  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 22px;
  isolation: isolate;
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* --------------------------------------------------------------------------
   2. LAYOUT / POSITIONING — Metal title stage
   -------------------------------------------------------------------------- */

.wiki-hero-metal__canvas {
  position: absolute;
  inset: -18% -8% -22% -8%;
  z-index: var(--whm-z-canvas);
  width: auto;
  height: auto;
  max-width: none;
  pointer-events: none;
  opacity: var(--whm-canvas-opacity);
  mix-blend-mode: screen;
  -webkit-user-select: none;
  user-select: none;
}

.wiki-hero-metal__svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.wiki-hero-metal__stage {
  position: relative;
  z-index: var(--whm-z-stage);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--whm-stage-pad-y) var(--whm-stage-pad-x);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.wiki-hero-metal__title {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--whm-font);
  font-size: var(--whm-size);
  font-weight: var(--whm-weight);
  letter-spacing: var(--whm-tracking);
  line-height: var(--whm-line);
  text-transform: uppercase;
  text-align: center;
  color: var(--whm-gold-albedo);
  white-space: nowrap;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: filter;
}

.wiki-hero-metal__stack {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.wiki-hero-metal__stack > .wiki-hero-metal__layer {
  grid-area: 1 / 1;
}

/* Under: depth / fill support behind readable text */
.wiki-hero-metal__stack--under {
  z-index: 1;
}

/* Over: specular / rim / shine above the clipped fill */
.wiki-hero-metal__stack--over {
  z-index: 12;
}

/* --------------------------------------------------------------------------
   3. TEXT LAYERS — Base, fill, specular, edge bevel, shadow
   -------------------------------------------------------------------------- */

.wiki-hero-metal__layer,
.wiki-hero-metal__text {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.wiki-hero-metal__layer {
  position: relative;
  display: block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}

/* --- Shadow (soft contact + cast) --- */
.wiki-hero-metal__layer--shadow {
  z-index: var(--whm-z-shadow);
  color: rgba(0, 0, 0, 0.55);
  -webkit-text-fill-color: rgba(0, 0, 0, 0.55);
  transform: translate3d(0.02em, 0.08em, 0);
  -webkit-transform: translate3d(0.02em, 0.08em, 0);
  filter: blur(0.045em);
  -webkit-filter: blur(0.045em);
  opacity: 0.72;
  text-shadow:
    0 0.12em 0.18em rgba(0, 0, 0, 0.45),
    0 0.22em 0.4em rgba(0, 0, 0, 0.28);
}

/* --- Emboss / extruded bronze edge + outer chisel facets --- */
.wiki-hero-metal__layer--emboss {
  z-index: var(--whm-z-emboss);
  color: var(--whm-gold-shadow);
  -webkit-text-fill-color: var(--whm-gold-shadow);
  transform: translate3d(0, 0.0375em, 0);
  -webkit-transform: translate3d(0, 0.0375em, 0);
  opacity: calc(0.98 * var(--whm-edge-bevel));
  text-shadow:
    /* Lit chisel facet (top-left) — edge wear */
    -1px -1px 0 rgba(255, 236, 180, 0.92),
    -2px -1px 0 rgba(245, 230, 192, 0.5),
    0 -1px 0 rgba(255, 233, 176, 0.82),
    -1px 0 0 rgba(224, 184, 74, 0.4),
    /* Dark chisel facet (bottom-right) */
    1px 1px 0 rgba(42, 24, 8, 0.95),
    2px 2px 0 rgba(26, 14, 4, 0.72),
    0 2px 0 rgba(60, 35, 10, 0.82),
    1px 0 0 rgba(50, 28, 8, 0.58),
    /* AO — feet / internal cavities only (tight offsets) */
    0 3px 0 rgba(20, 10, 4, 0.55),
    1px 3px 1px rgba(20, 10, 4, 0.35),
    /* Extrusion depth */
    0 4px 2px rgba(25, 14, 4, 0.45),
    1px 5px 4px rgba(0, 0, 0, 0.38),
    0 7px 12px rgba(0, 0, 0, 0.3);
  filter: none;
}

/* --- Base bronze plate --- */
.wiki-hero-metal__layer--base {
  z-index: var(--whm-z-base);
  background-image:
    linear-gradient(
      180deg,
      #6b4420 0%,
      #8a5a20 28%,
      #a07028 52%,
      #7a5020 78%,
      #3d2810 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 1;
  filter: drop-shadow(0 1px 0 rgba(245, 230, 192, 0.18));
  -webkit-filter: drop-shadow(0 1px 0 rgba(245, 230, 192, 0.18));
}

/* --- Albedo (PBR base color / brushed gold fill) --- */
.wiki-hero-metal__layer--albedo {
  z-index: var(--whm-z-albedo);
  background-color: var(--whm-gold-albedo);
  background-image:
    /* Key light falloff (warm champagne, never cold white) */
    linear-gradient(
      var(--whm-light-az),
      rgba(245, 230, 192, 0.75) 0%,
      rgba(255, 233, 176, 0.45) 12%,
      rgba(224, 184, 74, 0.32) 28%,
      transparent 48%
    ),
    /* Vertical metal gradient — brushed gold / bronze */
    linear-gradient(
      180deg,
      #f5e6c0 0%,
      #ffe9b0 6%,
      #efd48a 14%,
      #e0b84a 26%,
      #c9a045 40%,
      #b8862d 52%,
      #a07028 66%,
      #8a5a20 78%,
      #5a3a14 90%,
      #3d2810 100%
    ),
    /* Brushed horizontal streaks — irregular spacing */
    repeating-linear-gradient(
      90deg,
      rgba(255, 236, 180, 0.08) 0px,
      rgba(255, 236, 180, 0.08) 0.5px,
      transparent 0.5px,
      transparent 2px,
      rgba(42, 26, 8, 0.07) 2px,
      rgba(42, 26, 8, 0.07) 2.5px,
      transparent 2.5px,
      transparent 5px,
      rgba(255, 233, 176, 0.05) 5px,
      transparent 6px,
      transparent 9px
    ),
    /* Micro grain */
    repeating-linear-gradient(
      0deg,
      rgba(245, 230, 192, 0.04) 0px,
      transparent 1px,
      transparent 2px,
      rgba(40, 24, 8, 0.06) 3px,
      transparent 4px
    );
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-blend-mode: soft-light, normal, overlay, soft-light;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: var(--whm-metallic);
  filter: var(--whm-filter-displace);
  -webkit-filter: var(--whm-filter-displace);
}

/* --- Roughness (micro-facet darkening / anisotropy) --- */
.wiki-hero-metal__layer--roughness {
  z-index: var(--whm-z-roughness);
  background-image:
    /* Micro riscos — irregular horizontal, 0.5–2px */
    repeating-linear-gradient(
      91deg,
      transparent 0px,
      rgba(255, 236, 180, 0.09) 0.5px,
      transparent 1px,
      transparent 2.5px,
      rgba(30, 18, 6, 0.14) 3px,
      transparent 4px,
      transparent 6.5px,
      rgba(255, 233, 176, 0.05) 7px,
      transparent 8px,
      transparent 11px
    ),
    linear-gradient(
      180deg,
      rgba(245, 230, 192, 0.1) 0%,
      transparent 32%,
      rgba(40, 24, 8, 0.2) 68%,
      rgba(20, 10, 4, 0.3) 100%
    );
  background-blend-mode: soft-light, multiply;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: calc(var(--whm-roughness) * 0.9);
  mix-blend-mode: soft-light;
}

/* --- Chanfro / hard V-ridge bevel (over fill) --- */
.wiki-hero-metal__layer--chanfro {
  z-index: var(--whm-z-chanfro);
  color: var(--whm-gold-base);
  -webkit-text-fill-color: var(--whm-gold-base);
  opacity: var(--whm-chanfro-intensity);
  mix-blend-mode: hard-light;
  filter: var(--whm-filter-chanfro);
  -webkit-filter: var(--whm-filter-chanfro);
  text-shadow:
    /* Fallback hard chisel: lit ridge + dark cavity walls */
    -1px -1px 0 rgba(255, 236, 180, 0.9),
    0 -1px 0 rgba(245, 230, 192, 0.6),
    -0.5px 0 0 rgba(224, 184, 74, 0.35),
    1px 1px 0 rgba(42, 24, 8, 0.82),
    0 1px 0 rgba(60, 35, 10, 0.62),
    0.5px 0.5px 0 rgba(26, 14, 4, 0.45);
}

/* --- Specular (feSpecularLighting via SVG filter hookup) --- */
.wiki-hero-metal__layer--specular {
  z-index: var(--whm-z-specular);
  background-image:
    radial-gradient(
      ellipse 58% 42% at var(--whm-light-x) var(--whm-light-y),
      var(--whm-key-color) 0%,
      rgba(255, 233, 176, 0.48) 24%,
      rgba(224, 184, 74, 0.18) 48%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(245, 230, 192, 0.55) 0%,
      rgba(255, 233, 176, 0.28) 16%,
      transparent 44%
    );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: var(--whm-specular-intensity);
  mix-blend-mode: screen;
  filter: var(--whm-filter-specular);
  -webkit-filter: var(--whm-filter-specular);
}

/* --- Rim / Fresnel edge light + hard chisel outline --- */
.wiki-hero-metal__layer--rim {
  z-index: var(--whm-z-rim);
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.015em rgba(255, 233, 176, 0.42);
  text-stroke: 0.015em rgba(255, 233, 176, 0.42);
  opacity: var(--whm-rim-intensity);
  mix-blend-mode: screen;
  text-shadow:
    /* Edge wear — upper outer edges only */
    0 -1px 0 rgba(255, 236, 180, 0.85),
    -1px -1px 0 rgba(245, 230, 192, 0.65),
    -1px 0 0 rgba(224, 184, 74, 0.4),
    /* Dark bottom / right ridge + AO at feet */
    0 1px 0 rgba(60, 35, 10, 0.75),
    1px 1px 0 rgba(40, 22, 6, 0.7),
    1px 0 0 rgba(50, 28, 6, 0.5),
    0 2px 1px rgba(20, 10, 4, 0.35),
    /* Soft outer separation */
    0 2px 2px rgba(0, 0, 0, 0.22);
  filter: none;
}

/* --- Bloom / soft glow (behind fill; never covers glyph contour) --- */
.wiki-hero-metal__layer--bloom {
  z-index: var(--whm-z-bloom);
  color: var(--whm-gold-mid);
  -webkit-text-fill-color: var(--whm-gold-mid);
  opacity: var(--whm-bloom-intensity);
  filter: var(--whm-filter-bloom);
  -webkit-filter: var(--whm-filter-bloom);
  mix-blend-mode: screen;
  transform: scale(1.008);
  -webkit-transform: scale(1.008);
}

/* --- Shine sweep — distant light reflection born from material --- */
.wiki-hero-metal__layer--shine {
  z-index: var(--whm-z-shine);
  background-image: linear-gradient(
    105deg,
    transparent 0%,
    transparent 42%,
    rgba(255, 233, 176, 0.04) 46%,
    rgba(245, 230, 192, 0.14) 50%,
    rgba(255, 233, 176, 0.04) 54%,
    transparent 58%,
    transparent 100%
  );
  background-size: 240% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: var(--whm-shine-opacity);
  mix-blend-mode: soft-light;
  animation: whm-shine-sweep var(--whm-shine-duration) ease-in-out infinite;
  -webkit-animation: whm-shine-sweep var(--whm-shine-duration) ease-in-out infinite;
}

/* --- Primary fill (visual); label via h1[aria-label] --- */
.wiki-hero-metal__text {
  position: relative;
  z-index: var(--whm-z-text);
  display: block;
  background-color: var(--whm-gold-albedo);
  background-image:
    linear-gradient(
      180deg,
      #f5e6c0 0%,
      #ffe9b0 6%,
      #efd48a 14%,
      #e0b84a 26%,
      #c9a045 40%,
      #b8862d 52%,
      #a07028 66%,
      #8a5a20 78%,
      #5a3a14 90%,
      #3d2810 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 236, 180, 0.07) 0px,
      transparent 0.5px,
      transparent 2px,
      rgba(42, 26, 8, 0.06) 2.5px,
      transparent 4px,
      transparent 7px
    );
  background-blend-mode: normal, overlay;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--whm-gold-albedo);
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 4px rgba(184, 134, 46, 0.18))
    drop-shadow(0 0 12px rgba(138, 90, 32, 0.1))
    drop-shadow(0 1px 0 rgba(245, 230, 192, 0.38))
    drop-shadow(0 -1px 0 rgba(40, 22, 6, 0.4))
    drop-shadow(0 2px 0 rgba(90, 58, 20, 0.38))
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
  -webkit-filter:
    drop-shadow(0 0 4px rgba(184, 134, 46, 0.18))
    drop-shadow(0 0 12px rgba(138, 90, 32, 0.1))
    drop-shadow(0 1px 0 rgba(245, 230, 192, 0.38))
    drop-shadow(0 -1px 0 rgba(40, 22, 6, 0.4))
    drop-shadow(0 2px 0 rgba(90, 58, 20, 0.38))
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
}

/* --------------------------------------------------------------------------
   4. SVG FILTER HOOKUPS
   -------------------------------------------------------------------------- */

.wiki-hero-metal--filters-on .wiki-hero-metal__layer--albedo {
  filter: var(--whm-filter-displace);
  -webkit-filter: var(--whm-filter-displace);
}

.wiki-hero-metal--filters-on .wiki-hero-metal__layer--chanfro {
  filter: var(--whm-filter-chanfro);
  -webkit-filter: var(--whm-filter-chanfro);
}

.wiki-hero-metal--filters-on .wiki-hero-metal__layer--specular {
  filter: var(--whm-filter-specular);
  -webkit-filter: var(--whm-filter-specular);
}

.wiki-hero-metal--filters-on .wiki-hero-metal__layer--bloom {
  filter: var(--whm-filter-bloom);
  -webkit-filter: var(--whm-filter-bloom);
}

.wiki-hero-metal--filters-on .wiki-hero-metal__title {
  filter: none;
}

.wiki-hero-metal--filters-on .wiki-hero-metal__stage {
  /* Stacked metal look via composite filter on stage when supported */
  filter: none;
}

@supports (filter: url(#whm-metal-stack)) {
  .wiki-hero-metal--filters-on.wiki-hero-metal--stack-filter .wiki-hero-metal__layer--albedo {
    filter: var(--whm-filter-stack);
    -webkit-filter: var(--whm-filter-stack);
  }
}

/* --------------------------------------------------------------------------
   5. BRUSHED METAL TEXTURE — CSS noise / gradients + blend
   -------------------------------------------------------------------------- */

.wiki-hero-metal__layer--albedo::before,
.wiki-hero-metal__text::before {
  content: none;
}

.wiki-hero-metal--brushed .wiki-hero-metal__layer--albedo {
  background-image:
    linear-gradient(
      var(--whm-light-az),
      rgba(245, 230, 192, 0.72) 0%,
      rgba(255, 233, 176, 0.4) 14%,
      transparent 46%
    ),
    linear-gradient(
      180deg,
      #f5e6c0 0%,
      #efd48a 16%,
      #e0b84a 36%,
      #c9963a 50%,
      #b8862d 62%,
      #8a5a20 80%,
      #3d2810 100%
    ),
    repeating-linear-gradient(
      88deg,
      rgba(255, 236, 180, 0.08) 0 0.5px,
      transparent 0.5px 2.5px,
      rgba(42, 26, 8, 0.07) 2.5px 3px,
      transparent 3px 6px,
      rgba(255, 233, 176, 0.04) 6px 6.5px,
      transparent 6.5px 10px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(245, 230, 192, 0.04) 0 1px,
      transparent 1px 3px
    ),
    radial-gradient(
      circle at 30% 20%,
      rgba(255, 233, 176, 0.1),
      transparent 40%
    );
  background-blend-mode: soft-light, normal, overlay, soft-light, screen;
}

.wiki-hero-metal--brushed .wiki-hero-metal__layer--roughness {
  opacity: calc(var(--whm-roughness) * 0.95);
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08) 0 1px,
      transparent 1px 5px,
      rgba(20, 10, 4, 0.1) 5px 6px,
      transparent 6px 9px
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 40%,
      rgba(40, 24, 8, 0.2) 100%
    );
}

/* Anisotropic streak variant */
.wiki-hero-metal--aniso .wiki-hero-metal__layer--roughness {
  background-image:
    repeating-linear-gradient(
      94deg,
      transparent 0,
      rgba(255, 255, 255, 0.14) 0.4px,
      transparent 1.2px,
      transparent 5px
    ),
    repeating-linear-gradient(
      -2deg,
      transparent 0,
      rgba(0, 0, 0, 0.08) 0.6px,
      transparent 2px,
      transparent 7px
    );
  mix-blend-mode: overlay;
}

/* --------------------------------------------------------------------------
   6. SHINE SWEEP ANIMATION — Very slow, low opacity
   -------------------------------------------------------------------------- */

@keyframes whm-shine-sweep {
  0% {
    background-position: 130% 0;
    opacity: calc(var(--whm-shine-opacity) * 0.35);
  }
  40% {
    opacity: var(--whm-shine-opacity);
  }
  55% {
    background-position: -30% 0;
    opacity: calc(var(--whm-shine-opacity) * 0.85);
  }
  100% {
    background-position: -40% 0;
    opacity: calc(var(--whm-shine-opacity) * 0.25);
  }
}

@-webkit-keyframes whm-shine-sweep {
  0% {
    background-position: 130% 0;
    opacity: calc(var(--whm-shine-opacity) * 0.35);
  }
  40% {
    opacity: var(--whm-shine-opacity);
  }
  55% {
    background-position: -30% 0;
    opacity: calc(var(--whm-shine-opacity) * 0.85);
  }
  100% {
    background-position: -40% 0;
    opacity: calc(var(--whm-shine-opacity) * 0.25);
  }
}

@keyframes whm-metallic-breathe {
  0%,
  100% {
    filter:
      drop-shadow(0 0 5px rgba(224, 184, 74, 0.2))
      drop-shadow(0 0 14px rgba(184, 134, 46, 0.1))
      drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
  }
  50% {
    filter:
      drop-shadow(0 0 7px rgba(224, 184, 74, 0.28))
      drop-shadow(0 0 18px rgba(184, 134, 46, 0.14))
      drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
  }
}

@-webkit-keyframes whm-metallic-breathe {
  0%,
  100% {
    -webkit-filter:
      drop-shadow(0 0 5px rgba(224, 184, 74, 0.2))
      drop-shadow(0 0 14px rgba(184, 134, 46, 0.1))
      drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
  }
  50% {
    -webkit-filter:
      drop-shadow(0 0 7px rgba(224, 184, 74, 0.28))
      drop-shadow(0 0 18px rgba(184, 134, 46, 0.14))
      drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
  }
}

@keyframes whm-rim-pulse {
  0%,
  100% {
    opacity: calc(var(--whm-rim-intensity) * 0.88);
  }
  50% {
    opacity: calc(var(--whm-rim-intensity) * 1.05);
  }
}

@-webkit-keyframes whm-rim-pulse {
  0%,
  100% {
    opacity: calc(var(--whm-rim-intensity) * 0.88);
  }
  50% {
    opacity: calc(var(--whm-rim-intensity) * 1.05);
  }
}

@keyframes whm-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 0.35rem, 0);
    -webkit-transform: translate3d(0, 0.35rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes whm-enter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 0.35rem, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@keyframes whm-specular-drift {
  0%,
  100% {
    background-position: var(--whm-light-x) var(--whm-light-y), 0 0;
  }
  50% {
    background-position: calc(var(--whm-light-x) + 4%) calc(var(--whm-light-y) + 3%), 0 0;
  }
}

@-webkit-keyframes whm-specular-drift {
  0%,
  100% {
    background-position: var(--whm-light-x) var(--whm-light-y), 0 0;
  }
  50% {
    background-position: calc(var(--whm-light-x) + 4%) calc(var(--whm-light-y) + 3%), 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .wiki-hero-metal {
    animation: whm-enter 0.9s cubic-bezier(0.2, 1, 0.3, 1) both;
  }

  .wiki-hero-metal__text {
    animation: whm-metallic-breathe 14s ease-in-out infinite;
    -webkit-animation: whm-metallic-breathe 14s ease-in-out infinite;
  }

  .wiki-hero-metal__layer--rim {
    animation: whm-rim-pulse 16s ease-in-out infinite;
    -webkit-animation: whm-rim-pulse 16s ease-in-out infinite;
  }

  .wiki-hero-metal__layer--specular {
    animation: whm-specular-drift 22s ease-in-out infinite;
    -webkit-animation: whm-specular-drift 22s ease-in-out infinite;
    background-size: 100% 100%, 100% 100%;
    background-repeat: no-repeat;
  }
}

/* --------------------------------------------------------------------------
   7. HOVER / FOCUS — Extremely subtle
   -------------------------------------------------------------------------- */

.wiki-hero-metal__title:focus-visible {
  outline: 1px solid rgba(232, 195, 115, 0.45);
  outline-offset: 0.2em;
  border-radius: 0.08em;
}

@media (hover: hover) and (pointer: fine) {
  .wiki-hero-metal:hover {
    --whm-specular-intensity: 0.62;
    --whm-shine-opacity: 0.18;
    --whm-bloom-intensity: 0.4;
  }

  .wiki-hero-metal:hover .wiki-hero-metal__layer--shine {
    animation-duration: 14s;
    -webkit-animation-duration: 14s;
  }

  .wiki-hero-metal:hover .wiki-hero-metal__text {
    filter:
      drop-shadow(0 0 6px rgba(224, 184, 74, 0.3))
      drop-shadow(0 0 16px rgba(184, 134, 46, 0.16))
      drop-shadow(0 1px 0 rgba(255, 250, 230, 0.32))
      drop-shadow(0 2px 0 rgba(90, 58, 20, 0.3))
      drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
  }
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE BREAKPOINTS — Desktop / tablet / mobile
   -------------------------------------------------------------------------- */

/* Large desktop */
@media (min-width: 1400px) {
  .wiki-hero-metal {
    --whm-size: clamp(74px, 5.2vw, 95px);
    --whm-tracking: 0.15em;
    --whm-bloom-intensity: 0.38;
    --whm-canvas-opacity: 0.6;
  }
}

/* Desktop */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .wiki-hero-metal {
    --whm-size: clamp(65px, 5.5vw, 87px);
    --whm-tracking: 0.14em;
  }
}

/* Small desktop / large tablet */
@media (max-width: 1199.98px) {
  .wiki-hero-metal {
    --whm-size: clamp(52px, 6.5vw, 74px);
    --whm-tracking: 0.13em;
    --whm-canvas-opacity: 0.48;
    --whm-bloom-intensity: 0.28;
    --whm-shine-opacity: 0.12;
  }

  .wiki-hero-metal__layer--bloom {
    transform: scale(1.01);
    -webkit-transform: scale(1.01);
  }
}

/* Tablet */
@media (max-width: 991.98px) {
  .wiki-hero-metal {
    --whm-size: clamp(42px, 8.1vw, 63px);
    --whm-tracking: 0.12em;
    --whm-specular-intensity: 0.42;
    --whm-rim-intensity: 0.32;
    --whm-bloom-intensity: 0.22;
    --whm-canvas-opacity: 0.4;
    --whm-shine-duration: 22s;
    margin-bottom: 18px;
  }

  .wiki-hero-metal__layer--shadow {
    filter: blur(0.03em);
    -webkit-filter: blur(0.03em);
    opacity: 0.55;
  }

  .wiki-hero-metal__layer--roughness {
    opacity: calc(var(--whm-roughness) * 0.55);
  }

  .wiki-hero-metal__canvas {
    inset: -12% -4% -16% -4%;
  }
}

/* Mobile landscape / small tablet */
@media (max-width: 767.98px) {
  .wiki-hero-metal {
    --whm-size: clamp(36px, 9.7vw, 49px);
    --whm-tracking: 0.1em;
    --whm-specular-intensity: 0.32;
    --whm-rim-intensity: 0.24;
    --whm-bloom-intensity: 0;
    --whm-canvas-opacity: 0.32;
    --whm-shine-opacity: 0.08;
    --whm-metallic: 0.95;
    margin-bottom: 14px;
  }

  /* Reduce GPU layers on small screens */
  .wiki-hero-metal__layer--bloom,
  .wiki-hero-metal__layer--roughness {
    display: none;
  }

  .wiki-hero-metal__layer--specular {
    filter: none;
    -webkit-filter: none;
    opacity: 0.28;
  }

  .wiki-hero-metal__layer--albedo {
    filter: none;
    -webkit-filter: none;
  }

  .wiki-hero-metal__layer--shadow {
    filter: blur(0.02em);
    -webkit-filter: blur(0.02em);
    text-shadow: 0 0.08em 0.12em rgba(0, 0, 0, 0.4);
  }

  .wiki-hero-metal__text {
    filter:
      drop-shadow(0 0 4px rgba(224, 184, 74, 0.2))
      drop-shadow(0 2px 0 rgba(90, 58, 20, 0.3))
      drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
    -webkit-filter:
      drop-shadow(0 0 4px rgba(224, 184, 74, 0.2))
      drop-shadow(0 2px 0 rgba(90, 58, 20, 0.3))
      drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
    animation: none;
    -webkit-animation: none;
  }
}

/* Narrow phones */
@media (max-width: 479.98px) {
  .wiki-hero-metal {
    --whm-size: clamp(29px, 10.5vw, 39px);
    --whm-tracking: 0.08em;
    --whm-canvas-opacity: 0.22;
    --whm-shine-opacity: 0;
    --whm-rim-intensity: 0.18;
  }

  .wiki-hero-metal__layer--shine,
  .wiki-hero-metal__layer--rim,
  .wiki-hero-metal__layer--specular {
    display: none;
  }

  .wiki-hero-metal__canvas {
    opacity: 0.18;
  }

  .wiki-hero-metal__layer--emboss {
    opacity: 0.7;
    text-shadow:
      0 1px 0 rgba(255, 250, 230, 0.25),
      0 2px 0 rgba(90, 58, 20, 0.45),
      0 3px 4px rgba(0, 0, 0, 0.3);
  }
}

/* --------------------------------------------------------------------------
   9. HIGH-DPI TWEAKS
   -------------------------------------------------------------------------- */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .wiki-hero-metal {
    --whm-roughness: 0.34;
  }

  .wiki-hero-metal__layer--albedo,
  .wiki-hero-metal__text {
    background-size: 100% 100%, 100% 100%, 50% 100%, 100% 50%;
  }

  .wiki-hero-metal--brushed .wiki-hero-metal__layer--albedo {
    background-size: 100% 100%, 100% 100%, 40% 100%, 100% 40%, 100% 100%;
  }

  .wiki-hero-metal__layer--shadow {
    filter: blur(0.035em);
    -webkit-filter: blur(0.035em);
  }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .wiki-hero-metal {
    --whm-shine-opacity: 0.12;
    --whm-specular-intensity: 0.5;
  }

  .wiki-hero-metal__text {
    -webkit-font-smoothing: subpixel-antialiased;
  }
}

/* --------------------------------------------------------------------------
   10. SAFARI WORKAROUNDS — background-clip + filter
   -------------------------------------------------------------------------- */

@supports (-webkit-touch-callout: none) {
  .wiki-hero-metal__layer--albedo,
  .wiki-hero-metal__layer--specular,
  .wiki-hero-metal__layer--shine,
  .wiki-hero-metal__text {
    /* Safari: avoid stacking filter + background-clip on same node when possible */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .wiki-hero-metal__layer--albedo {
    /* Displace filter can cancel text-clip in older Safari — soften */
    -webkit-filter: none;
    filter: none;
  }

  .wiki-hero-metal__layer--specular {
    -webkit-filter: none;
    filter: none;
    opacity: calc(var(--whm-specular-intensity) * 0.9);
  }

  .wiki-hero-metal__layer--bloom {
    /* Bloom blur via filter is expensive / flaky on iOS */
    -webkit-filter: blur(0.06em);
    filter: blur(0.06em);
    opacity: calc(var(--whm-bloom-intensity) * 0.7);
  }

  .wiki-hero-metal__text {
    /* Ensure clip remains after drop-shadow */
    -webkit-text-fill-color: transparent;
  }
}

/* iOS Safari landscape */
@media (-webkit-touch-callout: none) and (max-height: 500px) and (orientation: landscape) {
  .wiki-hero-metal {
    --whm-size: clamp(32px, 8.1vh, 45px);
    --whm-canvas-opacity: 0.2;
    margin-bottom: 10px;
  }

  .wiki-hero-metal__layer--bloom,
  .wiki-hero-metal__layer--shine {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   11. FIREFOX FILTER COMPOSITING
   -------------------------------------------------------------------------- */

@-moz-document url-prefix() {
  .wiki-hero-metal__layer--albedo {
    /* Firefox: feDisplacementMap on clipped text can be muddy */
    filter: none;
  }

  .wiki-hero-metal__layer--specular {
    filter: none;
    opacity: calc(var(--whm-specular-intensity) * 1.05);
    mix-blend-mode: soft-light;
  }

  .wiki-hero-metal__layer--bloom {
    filter: blur(0.08em);
    opacity: calc(var(--whm-bloom-intensity) * 0.85);
  }

  .wiki-hero-metal__text {
    text-shadow: none;
  }

  .wiki-hero-metal__layer--rim {
    -moz-text-stroke: 0.016em rgba(255, 236, 190, 0.4);
  }
}

/* Alternate FF selectors without @-moz-document (future-proof) */
@supports (-moz-appearance: none) {
  .wiki-hero-metal--filters-on .wiki-hero-metal__layer--albedo {
    filter: none;
  }

  .wiki-hero-metal--filters-on .wiki-hero-metal__layer--specular {
    filter: none;
  }

  .wiki-hero-metal__canvas {
    mix-blend-mode: plus-lighter;
  }
}

/* --------------------------------------------------------------------------
   12. EDGE / CHROMIUM NUANCES
   -------------------------------------------------------------------------- */

@supports (-ms-ime-align: auto) {
  .wiki-hero-metal__text {
    background-attachment: scroll;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .wiki-hero-metal__layer--specular {
    mix-blend-mode: screen;
  }

  .wiki-hero-metal__canvas {
    mix-blend-mode: screen;
  }
}

/* --------------------------------------------------------------------------
   13. REDUCED MOTION — Disable canvas animation + shine sweep
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wiki-hero-metal,
  .wiki-hero-metal__text,
  .wiki-hero-metal__layer--rim,
  .wiki-hero-metal__layer--specular,
  .wiki-hero-metal__layer--shine {
    animation: none !important;
    -webkit-animation: none !important;
  }

  .wiki-hero-metal {
    --whm-shine-opacity: 0;
    --whm-canvas-opacity: 0.2;
  }

  .wiki-hero-metal__layer--shine {
    display: none;
  }

  .wiki-hero-metal__canvas {
    opacity: 0.15;
  }

  .wiki-hero-metal[data-whm-motion="off"] .wiki-hero-metal__canvas {
    display: none;
  }
}

.wiki-hero-metal[data-whm-motion="off"] {
  --whm-shine-opacity: 0;
}

.wiki-hero-metal[data-whm-motion="off"] .wiki-hero-metal__layer--shine {
  animation: none;
  -webkit-animation: none;
  opacity: 0;
}

.wiki-hero-metal[data-whm-motion="off"] .wiki-hero-metal__text,
.wiki-hero-metal[data-whm-motion="off"] .wiki-hero-metal__layer--rim,
.wiki-hero-metal[data-whm-motion="off"] .wiki-hero-metal__layer--specular {
  animation: none;
  -webkit-animation: none;
}

/* --------------------------------------------------------------------------
   14. FALLBACK — SVG filters unsupported / no background-clip
   -------------------------------------------------------------------------- */

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .wiki-hero-metal__text,
  .wiki-hero-metal__layer--albedo,
  .wiki-hero-metal__layer--base,
  .wiki-hero-metal__layer--specular,
  .wiki-hero-metal__layer--shine,
  .wiki-hero-metal__layer--roughness {
    background: none !important;
    -webkit-text-fill-color: var(--whm-gold-mid);
    color: var(--whm-gold-mid);
    text-shadow:
      0 1px 0 rgba(255, 250, 230, 0.55),
      0 2px 0 rgba(90, 58, 20, 0.45),
      0 6px 12px rgba(0, 0, 0, 0.4);
  }

  .wiki-hero-metal__layer--bloom,
  .wiki-hero-metal__layer--roughness,
  .wiki-hero-metal__layer--shine {
    display: none;
  }
}

.wiki-hero-metal--no-svg-filters .wiki-hero-metal__layer--albedo,
.wiki-hero-metal--no-svg-filters .wiki-hero-metal__layer--specular,
.wiki-hero-metal--no-svg-filters .wiki-hero-metal__layer--bloom,
.wiki-hero-metal--no-svg-filters .wiki-hero-metal__layer--chanfro {
  filter: none !important;
  -webkit-filter: none !important;
}

.wiki-hero-metal--no-svg-filters .wiki-hero-metal__layer--chanfro {
  mix-blend-mode: overlay;
  opacity: 0.85;
  text-shadow:
    -1px -1px 0 rgba(255, 236, 180, 0.9),
    0 -1px 0 rgba(245, 230, 192, 0.65),
    1px 1px 0 rgba(45, 26, 8, 0.85),
    0 1px 0 rgba(60, 35, 10, 0.65),
    0 2px 0 rgba(42, 24, 8, 0.45);
}

.wiki-hero-metal--no-svg-filters .wiki-hero-metal__layer--emboss {
  opacity: 1;
}

.wiki-hero-metal--no-svg-filters .wiki-hero-metal__layer--specular {
  opacity: 0.42;
  mix-blend-mode: soft-light;
}

.wiki-hero-metal--no-svg-filters .wiki-hero-metal__layer--bloom {
  opacity: 0.16;
  filter: blur(0.04em) !important;
  -webkit-filter: blur(0.04em) !important;
}

.wiki-hero-metal--no-canvas .wiki-hero-metal__canvas {
  display: none;
}

/* --------------------------------------------------------------------------
   15. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .wiki-hero-metal {
    margin: 0 0 12pt;
    color: #000;
    filter: none !important;
  }

  .wiki-hero-metal__canvas,
  .wiki-hero-metal__svg-filters,
  .wiki-hero-metal__stack,
  .wiki-hero-metal__layer {
    display: none !important;
  }

  .wiki-hero-metal__text {
    background: none !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    filter: none !important;
    -webkit-filter: none !important;
    text-shadow: none !important;
  }
}

/* --------------------------------------------------------------------------
   16. INTEGRATION — Coexist with wiki-hero center / avoid double metal
   -------------------------------------------------------------------------- */

.wiki-hero__center > .wiki-hero-metal {
  flex-shrink: 0;
}

.wiki-hero .wiki-hero-metal + .wiki-hero__subtitle {
  margin-top: 0;
}

/* When metal module is active, suppress legacy title if somehow still present */
.wiki-hero:has(.wiki-hero-metal) > .wiki-hero__container .wiki-hero__title:not(.wiki-hero-metal__title),
.wiki-hero:has(.wiki-hero-metal) .wiki-hero__center > .wiki-hero__title {
  display: none;
}

.wiki-hero:has(.wiki-hero-metal) .wiki-hero__title::before,
.wiki-hero:has(.wiki-hero-metal) .wiki-hero__title::after {
  content: none;
  display: none;
}

/* Forced quality tiers (set by JS) */
.wiki-hero-metal[data-whm-quality="high"] {
  --whm-canvas-opacity: 0.5;
  --whm-specular-intensity: 0.55;
  --whm-bloom-intensity: 0.22;
  --whm-chanfro-intensity: 1;
  --whm-rim-intensity: 0.56;
}

.wiki-hero-metal[data-whm-quality="medium"] {
  --whm-canvas-opacity: 0.42;
  --whm-specular-intensity: 0.45;
  --whm-bloom-intensity: 0.2;
  --whm-shine-opacity: 0.1;
  --whm-chanfro-intensity: 0.8;
}

.wiki-hero-metal[data-whm-quality="medium"] .wiki-hero-metal__layer--bloom {
  display: none;
}

.wiki-hero-metal[data-whm-quality="low"] {
  --whm-canvas-opacity: 0.28;
  --whm-specular-intensity: 0.28;
  --whm-bloom-intensity: 0;
  --whm-shine-opacity: 0;
  --whm-rim-intensity: 0.28;
  --whm-chanfro-intensity: 0.7;
}

.wiki-hero-metal[data-whm-quality="low"] .wiki-hero-metal__layer--bloom,
.wiki-hero-metal[data-whm-quality="low"] .wiki-hero-metal__layer--roughness,
.wiki-hero-metal[data-whm-quality="low"] .wiki-hero-metal__layer--shine {
  display: none;
}

.wiki-hero-metal[data-whm-quality="low"] .wiki-hero-metal__layer--albedo,
.wiki-hero-metal[data-whm-quality="low"] .wiki-hero-metal__layer--specular,
.wiki-hero-metal[data-whm-quality="low"] .wiki-hero-metal__layer--chanfro {
  filter: none;
  -webkit-filter: none;
}

.wiki-hero-metal[data-whm-quality="low"] .wiki-hero-metal__layer--chanfro {
  mix-blend-mode: overlay;
}

/* --------------------------------------------------------------------------
   17. UTILITY / STATE FLAGS
   -------------------------------------------------------------------------- */

.wiki-hero-metal.is-ready {
  visibility: visible;
}

.wiki-hero-metal.is-paused .wiki-hero-metal__layer--shine {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

.wiki-hero-metal.is-paused .wiki-hero-metal__text,
.wiki-hero-metal.is-paused .wiki-hero-metal__layer--rim,
.wiki-hero-metal.is-paused .wiki-hero-metal__layer--specular {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

.wiki-hero-metal[hidden] {
  display: none !important;
}

/* Contrast boost for very dark hero backgrounds */
.wiki-hero.guias-hero .wiki-hero-metal {
  --whm-gold-bloom: rgba(232, 195, 115, 0.48);
}

.wiki-hero.guias-hero .wiki-hero-metal__text {
  letter-spacing: var(--whm-tracking);
}

/* Ensure layers don't steal selection / AT focus */
.wiki-hero-metal__stack,
.wiki-hero-metal__canvas,
.wiki-hero-metal__svg-filters {
  speak: never;
}

/* End of wiki-hero-metal.css */