/* Shared pastel geometry. Decorative coordinates do not affect content layout. */
.page-frame,
.page-background-page {
  position: relative;
  isolation: isolate;
  background: var(--c-white);
}

.page-background-page { min-height: 100vh; }

.page-background {
  position: absolute;
  z-index: -1;
  top: calc(var(--control-h) + 2 * var(--sp-8));
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Registration tabs can change the page height; keep My Page's decorations anchored to the viewport. */
.page-background-page[data-page="mypage"] > .page-background,
.page-frame:has(.my-registration-tabs) > .page-background {
  position: fixed;
}

body.preview-access-required > .page-background,
body[data-page="admin"] > .page-background,
body[data-page="playback-check"] > .page-background,
body[data-page^="admin-"] > .page-background { display: none; }

.page-background > span {
  position: absolute;
  width: clamp(270px, 25vw, 400px);
  height: 300px;
  clip-path: polygon(0 0, 100% 10%, 65% 100%, 15% 88%);
  opacity: .65;
}

.page-background > span:nth-child(1) { left: -115px; top: 2%; background: var(--c-deco-pink); transform: rotate(26deg); }
.page-background > span:nth-child(2) { right: -125px; top: 9%; background: var(--c-deco-lilac); transform: rotate(-36deg); }
.page-background > span:nth-child(3) { left: -130px; top: 29%; background: var(--c-deco-aqua); transform: rotate(-20deg); }
.page-background > span:nth-child(4) { right: -150px; top: 35%; background: var(--c-deco-pink); transform: rotate(36deg); }
.page-background > span:nth-child(5) { left: -130px; top: 54%; background: var(--c-deco-lilac); transform: rotate(12deg); }
.page-background > span:nth-child(6) { right: -145px; top: 62%; background: var(--c-deco-aqua); transform: rotate(-26deg); }
.page-background > span:nth-child(7) { left: -155px; top: 78%; background: var(--c-deco-pink); transform: rotate(-15deg); }
.page-background > span:nth-child(8) { right: -130px; top: 86%; background: var(--c-deco-lilac); transform: rotate(-36deg); }

/* Animate only decorative transforms; each shape keeps its original placement and tilt. */
@media (prefers-reduced-motion: no-preference) {
  .page-background > span {
    animation: page-background-drift var(--motion-background) ease-in-out infinite,
      page-background-spin var(--motion-background-spin) linear infinite;
  }
  .page-background > span:nth-child(even) { animation-direction: normal, reverse; }
  .page-background > span:nth-child(1) { animation-delay: calc(var(--motion-background) / -12); }
  .page-background > span:nth-child(2) { animation-delay: calc(var(--motion-background) / -3); }
  .page-background > span:nth-child(3) { animation-delay: calc(var(--motion-background) / -6 * 5); }
  .page-background > span:nth-child(4) { animation-delay: calc(var(--motion-background) / -2); }
  .page-background > span:nth-child(5) { animation-delay: calc(var(--motion-background) / -4); }
  .page-background > span:nth-child(6) { animation-delay: calc(var(--motion-background) / -3 * 2); }
  .page-background > span:nth-child(7) { animation-delay: calc(var(--motion-background) / -12 * 7); }
  .page-background > span:nth-child(8) { animation-delay: calc(var(--motion-background) / -12 * 11); }
}

@keyframes page-background-drift {
  0%, 100% { translate: calc(-1 * var(--sp-16)) calc(-1 * var(--sp-24)); }
  50% { translate: var(--sp-16) var(--sp-24); }
}

@keyframes page-background-spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}