/* Stage 2: only the existing rear hero card's material. No geometry or motion. */
.hero-visual .frame-back{
  background:
    radial-gradient(ellipse at 7% 0%,#ffffff19 0%,#ffffff07 38%,transparent 70%),
    linear-gradient(148deg,#303030 0%,#202020 44%,#151515 100%);
  border-color:#ffffff42 #ffffff14 #080808c4 #ffffff30;
  box-shadow:
    inset 0 1px 0 #ffffff18,
    inset 1px 0 0 #ffffff0a,
    9px 23px 38px #00000094,
    2px 6px 12px #0000005c;
}

/* Short upper-left reflections, fading before the unlit edges.
   These are painted inside the existing outline and consume no space. */
.hero-visual .frame-back:before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg,#ffffff70,#ffffff26 38%,transparent 76%) top left/100% 1px no-repeat,
    linear-gradient(180deg,#ffffff45,#ffffff12 42%,transparent 80%) top left/1px 100% no-repeat;
}

/* Procedural SVG micrograin replaces the old regular horizontal stripes.
   Keep it below the card's text, within its existing stacking context. */
.hero-visual .frame-back:after{
  background:url('assets/graphite-grain.svg') repeat;
  background-size:192px 192px;
  opacity:.65;
  mix-blend-mode:soft-light;
  z-index:-1;
}

@media(forced-colors:active){
  .hero-visual .frame-back{background:Canvas;border-color:CanvasText;box-shadow:none}
  .hero-visual .frame-back:before,.hero-visual .frame-back:after{display:none}
}