/* Generated scene wings surround a quiet reading area. This layer never
   changes a page's geometry or the coordinate system of its reveal canvas. */
html .shell[data-pv-background="active"] {
  isolation: isolate;
  background-color: #080908;
}
html .shell[data-pv-background="active"]::before,
html .shell[data-pv-background="active"]::after { content: none; }
html .shell.shell--landing[data-pv-background="active"] .pv-landing-page {
  background: transparent;
}
html .shell.shell--landing[data-pv-background="active"] .pv-landing-page::before {
  background: radial-gradient(ellipse at 73% 34%, #d5ab4310, transparent 49%);
}
html body:not(.machine-reveal-active) .shell.shell--vending[data-pv-background="active"] .pvh-hero.pvh-vending-stage {
  background: transparent;
}

.pv-page-background {
  --pv-pointer-x: 0px;
  --pv-pointer-y: 0px;
  --pv-light-x: 50%;
  --pv-light-y: 35%;
  --pv-scene-rgb: 199, 154, 61;
  --pv-scene-opacity: .62;
  --pv-wing-width: clamp(260px, 26vw, 650px);
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
  background: radial-gradient(ellipse at 50% 15%, rgba(var(--pv-scene-rgb), .035), transparent 68%), #080908;
}
.pv-page-background *, .pv-page-background::before, .pv-page-background::after {
  pointer-events: none;
  user-select: none;
}
.pv-page-background[data-scene="meadow"] { --pv-scene-rgb: 95, 172, 112; }
.pv-page-background[data-scene="voyage"] { --pv-scene-rgb: 67, 153, 194; }
.pv-page-background[data-scene="rift"] { --pv-scene-rgb: 132, 99, 219; }
.pv-page-background[data-scene="energy"] { --pv-scene-rgb: 240, 157, 52; }
.pv-page-background[data-mood="collection"] { --pv-scene-opacity: .48; }
.pv-page-background[data-mood="quiet"] { --pv-scene-opacity: .26; }
.pv-backdrop-plane {
  position: absolute;
  inset: -14px;
  opacity: 0;
  transform: translate3d(var(--pv-pointer-x), var(--pv-pointer-y), 0);
  transition: opacity .65s ease;
}
.pv-page-background[data-ready="true"] .pv-backdrop-plane { opacity: var(--pv-scene-opacity); }
.pv-backdrop-wing {
  position: absolute;
  display: block;
  top: 0;
  width: var(--pv-wing-width);
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 1;
  /* The inner half fades to the canvas before it reaches the reading area. */
}
.pv-backdrop-wing--left {
  left: max(0px, calc(50% - 1420px));
  object-position: left center;
  mask-image: linear-gradient(90deg, #000 0%, #000b 44%, transparent 100%);
}
.pv-backdrop-wing--right {
  right: max(0px, calc(50% - 1420px));
  object-position: right center;
  mask-image: linear-gradient(270deg, #000 0%, #000b 44%, transparent 100%);
}
.pv-backdrop-wing[data-image-state="fallback"] { visibility: hidden; }
.pv-backdrop-light {
  position: absolute;
  inset: 0;
  opacity: .7;
  background: radial-gradient(ellipse 540px 460px at var(--pv-light-x) var(--pv-light-y), rgba(var(--pv-scene-rgb), .055), transparent 72%);
  mask-image: linear-gradient(90deg, #000, transparent 37%, transparent 63%, #000);
}
.pv-backdrop-dust {
  position: absolute;
  inset: -20px;
  opacity: .35;
  background-image: radial-gradient(circle at 6% 22%, #ddbe7977 0 1px, transparent 2px), radial-gradient(circle at 94% 37%, #ddbe7977 0 1px, transparent 2px), radial-gradient(circle at 12% 73%, #ddbe7944 0 1px, transparent 2px), radial-gradient(circle at 88% 81%, #ddbe7944 0 1px, transparent 2px);
  transform: translate3d(calc(var(--pv-pointer-x) * 1.6), calc(var(--pv-pointer-y) * 1.6), 0);
}
/* The artwork is bounded beside the workspace, including on 32:9 monitors. */
@media (min-width: 2400px) {
  .pv-page-background { --pv-scene-opacity: .76; }
  .pv-page-background[data-mood="collection"] { --pv-scene-opacity: .6; }
  .pv-page-background[data-mood="quiet"] { --pv-scene-opacity: .4; }
  .pv-backdrop-plane { mask-image: linear-gradient(90deg, transparent, #000 calc(50% - 1100px), #000 calc(50% + 1100px), transparent); }
  .pv-backdrop-wing--left { mask-image: linear-gradient(90deg, transparent, #000 20%, #000b 44%, transparent); }
  .pv-backdrop-wing--right { mask-image: linear-gradient(270deg, transparent, #000 20%, #000b 44%, transparent); }
}
/* Static, small side accents keep mobile forms and pack controls readable. */
@media (max-width: 899px) {
  .pv-page-background { --pv-wing-width: clamp(110px, 30vw, 235px); --pv-scene-opacity: .4; }
  .pv-page-background[data-mood="collection"] { --pv-scene-opacity: .3; }
  .pv-page-background[data-mood="quiet"] { --pv-scene-opacity: .2; }
  .pv-backdrop-plane { top: 35px; bottom: auto; height: min(760px, 100svh); transform: none; mask-image: linear-gradient(#000 60%, transparent); }
  .pv-backdrop-light, .pv-backdrop-dust { display: none; }
  .pv-backdrop-wing--left { object-position: 22% center; }
  .pv-backdrop-wing--right { object-position: 78% center; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .pv-backdrop-plane, .pv-backdrop-dust { transform: none; transition: none; }
  .pv-backdrop-light { display: none; }
}
body.machine-reveal-active .pv-page-background,
.shell:has([data-practice-room][data-phase="revealing"]) .pv-page-background { visibility: hidden; }
@media (forced-colors: active), print { .pv-page-background { display: none; } }