/* Hero layers: three planes at different scroll rates, per the premium-upgrade skill
   (references/layers.md, measured from fora.so via scroll-craft). Decoration only.
   Retain the beams-background class solely for the approved hero layout rules. */
.beams-background.hero-layers{
  background:#fcfaff;
  contain:paint;
}
.beams-background.hero-layers::before,
.beams-background.hero-layers::after{display:none}
.hero-layers .plane{
  position:absolute; pointer-events:none;
  will-change:transform;
  transition:opacity .6s ease-out;   /* opacity only; never transform */
}
/* Far plane: a soft halo behind the headline, blurred as distance. */
.hero-layers .plane-far{
  inset:-22% -12%;
  background:radial-gradient(52% 44% at 72% 24%,rgba(167,139,250,.50),rgba(167,139,250,.18) 48%,transparent 72%);
  filter:blur(22px);
}
/* Mid plane: silk ribbons drawn from the existing silk frame as a luminance mask over a lavender tint,
   sitting behind and around the form column, fading toward the copy column. */
.hero-layers .plane-mid{
  left:-8%; top:-10%; width:64%; height:122%;
  background:linear-gradient(165deg,#cdb9fb 0%,#9d7ff0 48%,#b9a3ea 100%);
  -webkit-mask-image:url("silk/f_060.webp"),linear-gradient(to right,#000 0%,#000 55%,transparent 100%);
  mask-image:url("silk/f_060.webp"),linear-gradient(to right,#000 0%,#000 55%,transparent 100%);
  -webkit-mask-size:cover,100% 100%; mask-size:cover,100% 100%;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-composite:source-in; mask-composite:intersect;
  -webkit-mask-source-type:luminance; mask-mode:luminance,alpha;
  opacity:.72; filter:blur(2px);
}
/* Front plane: white mist that dips under the form (the product) and rises at the edges,
   so the call to action stays in view longer as the planes separate. */
.hero-layers .plane-front{
  inset:-12%;
  background:radial-gradient(60% 56% at 34% 50%,transparent 58%,rgba(255,255,255,.32) 80%,rgba(255,255,255,.70) 100%);
}
/* The layered hero flows into the next section through the floor fade, not a hairline. */
.hero:has(.hero-layers) + .sec{border-top-color:transparent}
/* Floor: fade to the next section's ground over the last 240px, above every plane. */
.hero-layers .hero-floor{
  position:absolute; left:0; right:0; bottom:0; height:240px;
  background:linear-gradient(to bottom,rgba(247,244,255,0),#f7f4ff);
  pointer-events:none;
}
/* Grain: a fixed film over the page, multiply at 3%, the difference between a page and a lit room. */
.page-grain{
  position:fixed; inset:0; pointer-events:none; z-index:9000;
  opacity:.03; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
@media(max-width:900px){
  .hero-layers .plane-far{background:radial-gradient(70% 34% at 50% 18%,rgba(167,139,250,.44),rgba(167,139,250,.14) 50%,transparent 74%)}
  .hero-layers .plane-mid{left:-20%; top:-6%; width:120%; height:70%; opacity:.6;
    -webkit-mask-image:url("silk/f_060.webp"),linear-gradient(to bottom,#000 0%,#000 60%,transparent 100%);
    mask-image:url("silk/f_060.webp"),linear-gradient(to bottom,#000 0%,#000 60%,transparent 100%)}
  .hero-layers .plane-front{background:radial-gradient(80% 50% at 50% 62%,transparent 56%,rgba(255,255,255,.3) 82%,rgba(255,255,255,.65) 100%)}
  .hero-layers .hero-floor{height:180px}
}
@media(prefers-reduced-motion:reduce){
  .hero-layers .plane{transform:none !important}
}
html.a11y-nomotion .hero-layers .plane{transform:none !important}
html.a11y-contrast .page-grain{display:none}