/* Textures and surface details. CSS and SVG only — no raster screenshots.
   Everything here is decoration: keep it behind content (pointer-events: none, aria-hidden in markup). */

:root {
  /* Grain: feTurbulence noise as a tiling data-URI, baked at ~8% opacity */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  /* Scratches: one shared SVG of thin bone lines, 10–25% opacity baked in */
  --scratches: url("../assets/svg/scratches.svg");
}

/* Page and panels */
body { background-image: var(--grain); }
.tex-grain { background-image: var(--grain); }
.tex-scratches { background-image: var(--scratches), var(--grain); background-size: cover, auto; background-position: center, 0 0; }

/* Rust blooms: two blurred radial gradients in the panel corners (12–16%) */
.has-bloom { position: relative; isolation: isolate; }
.has-bloom::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(60% 80% at 100% 0%, rgb(240 106 60 / .15), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgb(217 80 42 / .15), transparent 70%);
}

/* Rivets: light dot top-left, four panel corners */
.has-rivets { position: relative; }
.has-rivets::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  --rivet: radial-gradient(circle at 35% 35%, #9aa0a6 0 .8px, #4a5057 2px, #22262a 3.4px, transparent 4px);
  background:
    var(--rivet) left 8px top 8px / 8px 8px no-repeat,
    var(--rivet) right 8px top 8px / 8px 8px no-repeat,
    var(--rivet) left 8px bottom 8px / 8px 8px no-repeat,
    var(--rivet) right 8px bottom 8px / 8px 8px no-repeat;
}

/* Edge wear */
.edge-wear { box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), inset 0 -3px 6px rgb(0 0 0 / .45); }

/* Hero glow (behind the emblem) and edge vignette */
.hero-glow { background: radial-gradient(50% 50% at 50% 50%, rgb(255 255 255 / .14), rgb(255 255 255 / 0) 70%); }
.vignette { box-shadow: inset 0 0 160px 40px rgb(0 0 0 / .55); }

/* Title grain: speckled holes in the big hero words. Tuned in stage B against the Figma hero. */
.grain-text {
  -webkit-mask-image: var(--grain-mask);
  mask-image: var(--grain-mask);
}
:root {
  --grain-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -4 0 0 0 3.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}