/* Page backgrounds. The public page paints one behind everything and the
   editor's Look card shows each one as a small tile, both from this file, so
   the tile is the real thing.

   A background is picked by [data-bg] on an ancestor of .bg. It reads --bg and
   --accent from the page, and [data-theme="light"] further up gives its light
   version. Sizes use container units: they follow the tile in the editor and
   fall back to the screen on the page. */

.bg {
  --accent-2: var(--accent);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
}

/* A second color a little way round the color wheel from the accent. */
@supports (color: oklch(from red l c h)) {
  .bg {
    --accent-2: oklch(from var(--accent) l c calc(h + 65));
  }
}

.bg::before,
.bg::after {
  content: "";
  position: absolute;
}

/* ---- gradients ------------------------------------------------------------------ */

[data-bg="glow"] .bg {
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--bg);
}

[data-bg="sunset"] .bg {
  background: linear-gradient(165deg, #1f0b2e 0%, #4a1238 48%, #7a2a1c 100%);
}

[data-theme="light"] [data-bg="sunset"] .bg {
  background: linear-gradient(165deg, #fde8d7 0%, #fbd5e1 50%, #efd6f5 100%);
}

[data-bg="ocean"] .bg {
  background: linear-gradient(170deg, #041226 0%, #0a2c4c 50%, #0b4650 100%);
}

[data-theme="light"] [data-bg="ocean"] .bg {
  background: linear-gradient(170deg, #def0fb 0%, #d2edf1 50%, #ccecdf 100%);
}

[data-bg="dusk"] .bg {
  background: linear-gradient(160deg, #110c2c 0%, #2c1a5a 50%, #57205e 100%);
}

[data-theme="light"] [data-bg="dusk"] .bg {
  background: linear-gradient(160deg, #e6e2fb 0%, #eedbf5 50%, #f9dde7 100%);
}

[data-bg="forest"] .bg {
  background: linear-gradient(165deg, #06140e 0%, #0e2d21 55%, #1c472b 100%);
}

[data-theme="light"] [data-bg="forest"] .bg {
  background: linear-gradient(165deg, #e7f2df 0%, #d8eddf 50%, #cde6d5 100%);
}

[data-bg="mesh"] .bg {
  background:
    radial-gradient(circle 70cqmax at 0% 0%, color-mix(in srgb, var(--accent) 36%, transparent), transparent 70%),
    radial-gradient(circle 60cqmax at 100% 45%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 70%),
    radial-gradient(circle 70cqmax at 20% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    var(--bg);
}

[data-theme="light"] [data-bg="mesh"] .bg {
  background:
    radial-gradient(circle 70cqmax at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(circle 60cqmax at 100% 45%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 70%),
    radial-gradient(circle 70cqmax at 20% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--bg);
}

/* ---- animated -------------------------------------------------------------------
   Only transform and opacity move, so phones can animate them without
   repainting. Each soft blob is a pseudo-element with a radial gradient. */

[data-bg="drift"] .bg::before,
[data-bg="drift"] .bg::after,
[data-bg="lava"] .bg::before,
[data-bg="lava"] .bg::after {
  aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--blob), transparent);
}

[data-bg="drift"] .bg::before {
  --blob: color-mix(in srgb, var(--accent) 32%, transparent);
  width: 90cqmax;
  left: -30cqmax;
  top: -25cqmax;
  animation: bg-float-a 24s ease-in-out infinite alternate;
}

[data-bg="drift"] .bg::after {
  --blob: color-mix(in srgb, var(--accent-2) 28%, transparent);
  width: 80cqmax;
  right: -30cqmax;
  bottom: -20cqmax;
  animation: bg-float-b 30s ease-in-out infinite alternate;
}

[data-theme="light"] [data-bg="drift"] .bg::before {
  --blob: color-mix(in srgb, var(--accent) 26%, transparent);
}

[data-theme="light"] [data-bg="drift"] .bg::after {
  --blob: color-mix(in srgb, var(--accent-2) 22%, transparent);
}

[data-bg="aurora"] .bg {
  background: linear-gradient(180deg, #020617 0%, #06182a 55%, #0a2533 100%);
}

[data-bg="aurora"] .bg::before,
[data-bg="aurora"] .bg::after {
  background: radial-gradient(closest-side, var(--blob), var(--blob-edge) 60%, transparent);
}

[data-bg="aurora"] .bg::before {
  --blob: rgb(52 211 153 / 0.42);
  --blob-edge: rgb(34 211 238 / 0.12);
  left: -20%;
  top: -12%;
  width: 140%;
  height: 60%;
  animation: bg-sway 16s ease-in-out infinite alternate;
}

[data-bg="aurora"] .bg::after {
  --blob: rgb(129 140 248 / 0.34);
  --blob-edge: rgb(192 132 252 / 0.1);
  left: -10%;
  top: 12%;
  width: 120%;
  height: 45%;
  animation: bg-sway 22s ease-in-out -8s infinite alternate-reverse;
}

[data-theme="light"] [data-bg="aurora"] .bg {
  background: linear-gradient(180deg, #eef6fb 0%, #f3f1fb 100%);
}

[data-theme="light"] [data-bg="aurora"] .bg::before {
  --blob: rgb(16 185 129 / 0.28);
  --blob-edge: rgb(6 182 212 / 0.1);
}

[data-theme="light"] [data-bg="aurora"] .bg::after {
  --blob: rgb(139 92 246 / 0.22);
  --blob-edge: rgb(192 132 252 / 0.08);
}

[data-bg="lava"] .bg {
  background:
    radial-gradient(circle 50cqmax at 85% 85%, rgb(124 58 237 / 0.25), transparent),
    linear-gradient(180deg, #13060e 0%, #1d0a10 100%);
}

[data-bg="lava"] .bg::before {
  --blob: rgb(249 115 22 / 0.45);
  width: 80cqmax;
  left: -20cqmax;
  bottom: -30cqmax;
  animation: bg-rise 18s ease-in-out infinite alternate;
}

[data-bg="lava"] .bg::after {
  --blob: rgb(236 72 153 / 0.4);
  width: 70cqmax;
  right: -22cqmax;
  top: -18cqmax;
  animation: bg-sink 23s ease-in-out infinite alternate;
}

[data-theme="light"] [data-bg="lava"] .bg {
  background:
    radial-gradient(circle 50cqmax at 85% 85%, rgb(167 139 250 / 0.2), transparent),
    linear-gradient(180deg, #fff5ef 0%, #fdeef2 100%);
}

[data-theme="light"] [data-bg="lava"] .bg::before {
  --blob: rgb(251 146 60 / 0.38);
}

[data-theme="light"] [data-bg="lava"] .bg::after {
  --blob: rgb(244 114 182 / 0.32);
}

/* Two layers of stars on a repeating tile, drifting up at different speeds.
   Each layer is one tile taller than the screen and moves up by one tile, so
   the loop is seamless. */
[data-bg="stars"] .bg {
  --star: #fff;
  background: radial-gradient(130% 70% at 50% 110%, #1e2a5a 0%, #0b1230 45%, #04060f 100%);
}

[data-theme="light"] [data-bg="stars"] .bg {
  --star: rgb(67 56 202 / 0.5);
  background: linear-gradient(180deg, #e9ecfb 0%, #f6f0f8 100%);
}

[data-bg="stars"] .bg::before,
[data-bg="stars"] .bg::after {
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% + var(--tile));
  background-size: var(--tile) var(--tile);
}

[data-bg="stars"] .bg::before {
  --tile: 28cqmax;
  background-image:
    radial-gradient(1px 1px at 8% 12%, var(--star) 60%, transparent),
    radial-gradient(1px 1px at 27% 64%, var(--star) 60%, transparent),
    radial-gradient(1px 1px at 41% 28%, var(--star) 60%, transparent),
    radial-gradient(1px 1px at 55% 86%, var(--star) 60%, transparent),
    radial-gradient(1px 1px at 68% 45%, var(--star) 60%, transparent),
    radial-gradient(1px 1px at 79% 8%, var(--star) 60%, transparent),
    radial-gradient(1px 1px at 92% 72%, var(--star) 60%, transparent),
    radial-gradient(1px 1px at 16% 92%, var(--star) 60%, transparent),
    radial-gradient(1px 1px at 86% 36%, var(--star) 60%, transparent);
  opacity: 0.7;
  animation: bg-climb 140s linear infinite;
}

[data-bg="stars"] .bg::after {
  --tile: 41cqmax;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 34%, var(--star) 60%, transparent),
    radial-gradient(1.5px 1.5px at 47% 76%, var(--star) 60%, transparent),
    radial-gradient(1.5px 1.5px at 63% 18%, var(--star) 60%, transparent),
    radial-gradient(1.5px 1.5px at 88% 58%, var(--star) 60%, transparent),
    radial-gradient(1.5px 1.5px at 33% 4%, var(--star) 60%, transparent);
  animation:
    bg-climb 90s linear infinite,
    bg-twinkle 4s ease-in-out infinite alternate;
}

@keyframes bg-float-a {
  to { transform: translate(35%, 45%) scale(1.12); }
}

@keyframes bg-float-b {
  to { transform: translate(-40%, -50%) scale(0.9); }
}

@keyframes bg-sway {
  from { transform: translateX(-10%) skewX(-12deg); }
  to { transform: translateX(10%) skewX(10deg) scaleY(1.2); }
}

@keyframes bg-rise {
  to { transform: translate(18%, -60%) scale(1.15); }
}

@keyframes bg-sink {
  to { transform: translate(-15%, 65%) scale(0.9); }
}

@keyframes bg-climb {
  to { transform: translateY(calc(-1 * var(--tile))); }
}

@keyframes bg-twinkle {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

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