/* Hero slash shared by home and training: the original kinked slash, finished with a brushed-gold edge,
   a fine echo line inside it, and a one-time shimmer. Loaded after each page's own stylesheet. */
@media (min-width:901px) {
  body.page-home .home-hero-art,
  body.page-training .hero-art {
    --slash-top:14%; --slash-mid:9%; --edge:5px; --echo:30px;
    position:relative; overflow:hidden; border-left:0;
    /* The panel itself is the gold edge; the dark art sits on ::before, inset by --edge. */
    clip-path:polygon(var(--slash-top) 0,100% 0,100% 100%,0 100%,var(--slash-mid) 50%);
    background:linear-gradient(170deg,#7d5f30 0%,#d9bb7f 22%,#a07b3e 46%,#e6cd95 63%,#8a6a35 82%,#c6a668 100%);
    background-size:100% 300%; background-position:50% 0%;
    animation:slash-shimmer 2.4s ease-out .3s 1 both;
  }
  body.page-home .home-hero-art::before,
  body.page-training .hero-art::before {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    width:auto; height:auto; border:0; opacity:1; transform:none; left:0; top:0;
    clip-path:polygon(calc(var(--slash-top) + var(--edge)) 0,100% 0,100% 100%,var(--edge) 100%,calc(var(--slash-mid) + var(--edge)) 50%);
    background:
      radial-gradient(ellipse at 62% 46%,#3a3c34 0%,#23261f 52%,#171916 100%),
      #191b19;
  }
  /* Echo line: a 1.5px gold stroke parallel to the edge, fading toward the bottom. */
  body.page-home .home-hero-art::after,
  body.page-training .hero-art::after {
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    width:auto; height:auto; border:0; transform:none; left:0; top:0; opacity:.55;
    clip-path:polygon(calc(var(--slash-top) + var(--echo)) 0,calc(var(--slash-top) + var(--echo) + 1.5px) 0,calc(var(--slash-mid) + var(--echo) + 1.5px) 50%,calc(var(--echo) + 1.5px) 100%,var(--echo) 100%,calc(var(--slash-mid) + var(--echo)) 50%);
    background:linear-gradient(180deg,#e2c690,#b69863 60%,#b6986300);
  }
  body.page-home .home-hero-art > *,
  body.page-training .hero-art > * { position:relative; z-index:2; }
  body.page-home .home-hero-art > .ring,
  body.page-training .hero-art > .ring { position:absolute; }
  body.page-training .hero-art > .hero-art-label { position:absolute; }
  /* Nudge the shield toward the open side of the slash. */
  body.page-home .home-hero-art { padding-left:6%; }
  body.page-training .hero-art { padding-left:calc(35px + 5%); }
}
@keyframes slash-shimmer { from { background-position:50% 100%; } to { background-position:50% 0%; } }
@media (prefers-reduced-motion:reduce) {
  body.page-home .home-hero-art, body.page-training .hero-art { animation:none; }
}