.page-bg-surface {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: var(--page-bg-fill, #f6f6f8);
}

.page-background-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .32s ease;
}

html.page-background-selected .page-background-layer {
  opacity: 1;
}

html.page-background-selected .ambient-bubbles {
  display: none !important;
}

.page-bg-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-bg-particle,
.page-bg-special {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

.page-bg-particle {
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  color: rgba(255,255,255,.78);
  opacity: .72;
  transform: rotate(var(--rotate));
}

[data-page-bg-family="bubbles"] .page-bg-particle {
  top: auto;
  bottom: calc(var(--negative-size) - 12px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.86), transparent 24%),
    linear-gradient(145deg, rgba(93,183,255,.55), rgba(177,95,255,.3));
  box-shadow: 0 0 18px rgba(105,159,255,.2);
  animation: pageBgFloatUp var(--duration) linear var(--delay) infinite;
}

[data-page-bg-family="rays"] .page-bg-particle {
  width: var(--size-thin);
  height: var(--size-long);
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent, rgba(124,225,255,.95), transparent);
  box-shadow: 0 0 12px rgba(102,214,255,.72);
  transform: rotate(28deg);
  animation: pageBgRayFlash var(--duration) ease-in-out var(--delay) infinite;
}

[data-page-bg-family="moon"] .page-bg-particle,
[data-page-bg-family="stars"] .page-bg-particle,
[data-page-bg-family="galaxy"] .page-bg-particle {
  width: var(--size-dot);
  height: var(--size-dot);
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 8px rgba(180,220,255,.8);
  animation: pageBgTwinkle var(--duration) ease-in-out var(--delay) infinite;
}

.page-bg-moon {
  top: 8%;
  right: 10%;
  width: clamp(70px, 14vw, 170px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fffdf0 0 34%, #e6e5d7 58%, #b8c5d6 100%);
  box-shadow: 0 0 50px rgba(233,245,255,.44);
  animation: pageBgMoonGlow 6s ease-in-out infinite alternate;
}

[data-page-bg-family="snow"] .page-bg-particle {
  top: -12%;
  width: auto;
  height: auto;
  font-size: var(--size);
  line-height: 1;
  color: rgba(255,255,255,.9);
  text-shadow: 0 0 8px rgba(255,255,255,.6);
  animation: pageBgFall var(--duration) linear var(--delay) infinite;
}

[data-page-bg-family="lights"] .page-bg-particle {
  top: 0;
  width: var(--size-light-w);
  height: var(--size-light-h);
  border-radius: 50% 50% 45% 45%;
  background: hsl(var(--hue), 95%, 62%);
  box-shadow: 0 0 12px hsl(var(--hue), 95%, 62%), 0 0 28px hsla(var(--hue), 95%, 55%, .7);
  animation: pageBgLightBlink var(--duration) ease-in-out var(--delay) infinite;
}

[data-page-bg-family="lights"] .page-bg-particle::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: calc(20px + var(--size));
  background: rgba(30,50,35,.72);
}

[data-page-bg-family="fireworks"] .page-bg-particle {
  width: var(--size);
  height: var(--size);
  border: 2px solid hsl(var(--hue), 95%, 68%);
  border-radius: 50%;
  box-shadow: 0 0 16px hsla(var(--hue), 95%, 68%, .7);
  animation: pageBgFirework var(--duration) ease-out var(--delay) infinite;
}

[data-page-bg-family="confetti"] .page-bg-particle {
  top: -12%;
  width: var(--size-confetti-w);
  height: var(--size-confetti-h);
  border-radius: 2px;
  background: hsl(var(--hue), 88%, 62%);
  animation: pageBgConfetti var(--duration) linear var(--delay) infinite;
}

.page-bg-aurora {
  inset: -22%;
  width: 70%;
  height: 72%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87,255,209,.52), rgba(89,126,255,.16) 48%, transparent 72%);
  filter: blur(22px);
  animation: pageBgAurora 14s ease-in-out infinite alternate;
}

.page-bg-aurora:nth-child(2) {
  left: 34%;
  top: -26%;
  background: radial-gradient(circle, rgba(172,103,255,.5), rgba(52,210,255,.13) 50%, transparent 72%);
  animation-delay: -5s;
}

.page-bg-aurora:nth-child(3) {
  left: 12%;
  top: 32%;
  background: radial-gradient(circle, rgba(55,240,176,.32), rgba(125,68,255,.16) 50%, transparent 72%);
  animation-delay: -9s;
}

[data-page-bg-family="aurora"] .page-bg-particle {
  width: var(--size-dot);
  height: var(--size-dot);
  border-radius: 50%;
  background: rgba(255,255,255,.75);
  animation: pageBgTwinkle var(--duration) ease-in-out var(--delay) infinite;
}

.page-bg-neon-wave {
  left: -15%;
  width: 130%;
  height: 22%;
  border-radius: 50%;
  border-top: 2px solid rgba(97,231,255,.72);
  box-shadow: 0 -7px 22px rgba(91,125,255,.34);
  animation: pageBgWave 10s ease-in-out infinite alternate;
}

.page-bg-neon-wave:nth-child(1) { top: 22%; }
.page-bg-neon-wave:nth-child(2) { top: 40%; animation-delay: -2.5s; border-color: rgba(220,89,255,.7); }
.page-bg-neon-wave:nth-child(3) { top: 58%; animation-delay: -5s; }
.page-bg-neon-wave:nth-child(4) { top: 75%; animation-delay: -7.5s; border-color: rgba(255,105,192,.7); }

[data-page-bg-family="waves"] .page-bg-particle,
[data-page-bg-family="digital"] .page-bg-particle {
  width: var(--size-narrow);
  height: var(--size-narrow);
  border: 1px solid hsla(var(--hue),95%,72%,.75);
  background: hsla(var(--hue),95%,60%,.22);
  box-shadow: 0 0 10px hsla(var(--hue),95%,62%,.45);
  animation: pageBgDigitalFloat var(--duration) ease-in-out var(--delay) infinite alternate;
}

[data-page-bg-family="hearts"] .page-bg-particle,
[data-page-bg-family="books"] .page-bg-particle,
[data-page-bg-family="sparkles"] .page-bg-particle {
  width: auto;
  height: auto;
  font-size: var(--size);
  line-height: 1;
  color: rgba(255,255,255,.82);
  text-shadow: 0 0 12px rgba(255,255,255,.45);
  animation: pageBgSymbolFloat var(--duration) ease-in-out var(--delay) infinite;
}

.page-bg-ocean-wave {
  left: -12%;
  bottom: calc(-8% + var(--special-offset));
  width: 125%;
  height: 34%;
  border-radius: 50% 50% 0 0;
  background: rgba(255,255,255,.12);
  border-top: 2px solid rgba(255,255,255,.34);
  animation: pageBgOcean 10s ease-in-out infinite alternate;
}

.page-bg-ocean-wave:nth-child(2) { animation-delay: -3s; opacity: .7; }
.page-bg-ocean-wave:nth-child(3) { animation-delay: -6s; opacity: .45; }

[data-page-bg-family="ocean"] .page-bg-particle {
  width: var(--size-dot);
  height: var(--size-dot);
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  animation: pageBgTwinkle var(--duration) ease-in-out var(--delay) infinite;
}

[data-page-bg-family="petals"] .page-bg-particle,
[data-page-bg-family="leaves"] .page-bg-particle {
  top: -12%;
  width: var(--size-petal-w);
  height: var(--size-petal-h);
  border-radius: 75% 15% 70% 20%;
  background: hsla(var(--hue), 70%, 68%, .84);
  animation: pageBgFall var(--duration) linear var(--delay) infinite;
}

[data-page-bg-family="leaves"] .page-bg-particle {
  background: hsla(var(--leaf-hue), 78%, 48%, .88);
}

[data-page-bg-family="rain"] .page-bg-particle {
  top: -18%;
  width: 1px;
  height: var(--size-rain-h);
  background: linear-gradient(to bottom, transparent, rgba(190,225,255,.72));
  transform: rotate(10deg);
  animation: pageBgRain var(--duration) linear var(--delay) infinite;
}

.page-bg-cloud {
  width: clamp(90px, 20vw, 240px);
  height: clamp(34px, 7vw, 86px);
  left: var(--special-left);
  top: var(--special-top);
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  box-shadow:
    34px -16px 0 rgba(255,255,255,.14),
    70px 2px 0 rgba(255,255,255,.12);
  animation: pageBgCloudDrift var(--special-duration) linear infinite;
}

.page-bg-galaxy {
  inset: -20%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(206,105,255,.38), rgba(54,118,255,.16) 48%, transparent 72%);
  filter: blur(18px);
  animation: pageBgGalaxy 18s linear infinite;
}

.page-bg-galaxy:nth-child(2) {
  left: 35%;
  top: 5%;
  background: radial-gradient(circle, rgba(49,227,255,.3), rgba(100,65,255,.14) 48%, transparent 72%);
  animation-direction: reverse;
}

.page-bg-galaxy:nth-child(3) {
  left: 10%;
  top: 40%;
  animation-duration: 24s;
}

@keyframes pageBgFloatUp {
  0% { transform: translate3d(0,0,0) scale(.75); opacity: 0; }
  10% { opacity: .65; }
  88% { opacity: .55; }
  100% { transform: translate3d(var(--drift),-120vh,0) scale(1.12); opacity: 0; }
}

@keyframes pageBgRayFlash {
  0%,72%,100% { opacity: .08; transform: translate3d(-30px,-30px,0) rotate(28deg) scaleY(.7); }
  78% { opacity: .95; }
  84% { opacity: .18; transform: translate3d(40px,45px,0) rotate(28deg) scaleY(1.2); }
}

@keyframes pageBgTwinkle {
  0%,100% { opacity: .18; transform: scale(.7); }
  50% { opacity: .95; transform: scale(1.25); }
}

@keyframes pageBgMoonGlow {
  from { transform: translateY(-4px); box-shadow: 0 0 35px rgba(233,245,255,.34); }
  to { transform: translateY(4px); box-shadow: 0 0 65px rgba(233,245,255,.58); }
}

@keyframes pageBgFall {
  0% { transform: translate3d(0,-12vh,0) rotate(var(--rotate)); opacity: 0; }
  10% { opacity: .85; }
  100% { transform: translate3d(var(--drift),118vh,0) rotate(calc(var(--rotate) + 360deg)); opacity: .15; }
}

@keyframes pageBgLightBlink {
  0%,100% { opacity: .34; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes pageBgFirework {
  0%,58% { transform: scale(.08); opacity: 0; }
  64% { opacity: 1; }
  82% { transform: scale(2.3); opacity: .72; }
  100% { transform: scale(3.1); opacity: 0; }
}

@keyframes pageBgConfetti {
  0% { transform: translate3d(0,-15vh,0) rotate(var(--rotate)); opacity: 0; }
  10% { opacity: .95; }
  100% { transform: translate3d(var(--drift),118vh,0) rotate(calc(var(--rotate) + 720deg)); opacity: .5; }
}

@keyframes pageBgAurora {
  from { transform: translate3d(-8%,-3%,0) rotate(-8deg) scale(.95); }
  to { transform: translate3d(16%,8%,0) rotate(12deg) scale(1.18); }
}

@keyframes pageBgWave {
  from { transform: translateX(-3%) rotate(-2deg) scaleY(.8); }
  to { transform: translateX(3%) rotate(2deg) scaleY(1.15); }
}

@keyframes pageBgDigitalFloat {
  from { transform: translate3d(-10px,-14px,0) rotate(var(--rotate)); opacity: .25; }
  to { transform: translate3d(18px,18px,0) rotate(calc(var(--rotate) + 90deg)); opacity: .9; }
}

@keyframes pageBgSymbolFloat {
  0%,100% { transform: translate3d(0,12px,0) rotate(var(--rotate)) scale(.82); opacity: .22; }
  50% { transform: translate3d(var(--drift),-28px,0) rotate(calc(var(--rotate) + 20deg)) scale(1.05); opacity: .92; }
}

@keyframes pageBgOcean {
  from { transform: translateX(-3%) translateY(2%) rotate(-1deg); }
  to { transform: translateX(3%) translateY(-3%) rotate(1deg); }
}

@keyframes pageBgRain {
  from { transform: translate3d(0,-18vh,0) rotate(10deg); opacity: 0; }
  10% { opacity: .65; }
  to { transform: translate3d(var(--drift),118vh,0) rotate(10deg); opacity: .12; }
}

@keyframes pageBgCloudDrift {
  from { transform: translateX(-30vw); }
  to { transform: translateX(130vw); }
}

@keyframes pageBgGalaxy {
  from { transform: rotate(0deg) scale(.95); }
  to { transform: rotate(360deg) scale(1.12); }
}

.performance-lite .page-background-layer[data-page-bg-mode="animated"] .page-bg-motion {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .page-bg-motion *,
  .page-bg-motion {
    animation: none !important;
  }

  .page-bg-particle {
    opacity: .35;
  }
}

.page-hidden .page-bg-motion * { animation-play-state: paused !important; }