/* 🔥 Moving backgrounds (js/backdrop.js): ten scenes on a few spans, coloured by the Ember variation (--v-accent, --v-hero,
   --v-glow) so every colour works with every scene. Behind everything, never in the way of a tap; Daylight shows them softly;
   reduce motion (device or the accessibility panel) holds a still frame. The round previews in Customize draw the same scenes
   small (.motion--mini). */
.motion { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict;
  --ma: var(--v-accent); --mb: var(--v-hero); --mg: var(--v-glow); }
.motion--mini { position: absolute; z-index: 0; border-radius: inherit; background: var(--bg); }
.motion i { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); display: block;
  animation-delay: calc(var(--d) * -1s); will-change: transform, opacity; }
:root[data-theme="light"] .motion:not(.motion--mini) { opacity: .4; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .motion:not(.motion--mini) { opacity: .4; } }

/* Galaxy: a slow-turning nebula and twinkling stars */
.motion--galaxy { background: radial-gradient(60% 45% at 30% 35%, rgb(var(--mg) / .22), transparent 70%),
  radial-gradient(50% 40% at 75% 70%, color-mix(in oklab, var(--mb) 28%, transparent), transparent 70%); }
.motion--galaxy::before { content: ""; position: absolute; inset: -30%; background: conic-gradient(from 0deg at 50% 50%,
  transparent, rgb(var(--mg) / .10), transparent 30%, color-mix(in oklab, var(--mb) 12%, transparent), transparent 60%);
  animation: m-spin 120s linear infinite; }
.motion--galaxy i { width: calc(var(--s) * 3px); height: calc(var(--s) * 3px); border-radius: 50%; background: var(--mb);
  box-shadow: 0 0 6px var(--mb); animation: m-twinkle 4s ease-in-out infinite; }

/* Aurora: wide soft bands of colour drifting */
.motion--aurora i { width: 90vw; height: 40vh; left: calc(var(--n) * 25% - 30%); top: calc(var(--n) * 12% - 5%); border-radius: 50%;
  filter: blur(60px); background: linear-gradient(90deg, rgb(var(--mg) / .45), color-mix(in oklab, var(--mb) 40%, transparent));
  animation: m-drift 26s ease-in-out infinite alternate; opacity: .55; }
.motion--mini.motion--aurora i { width: 160%; height: 60%; filter: blur(8px); }

/* Embers: sparks rising from below and fading */
.motion--embers i { top: auto; bottom: -10px; width: calc(var(--s) * 4px); height: calc(var(--s) * 4px); border-radius: 50%;
  background: var(--ma); box-shadow: 0 0 8px var(--ma), 0 0 18px rgb(var(--mg) / .6); animation: m-rise 9s linear infinite; }

/* Fireflies: soft lights wandering and pulsing */
.motion--fireflies i { width: calc(var(--s) * 6px); height: calc(var(--s) * 6px); border-radius: 50%; background: var(--mb);
  box-shadow: 0 0 14px var(--mb); animation: m-wander 14s ease-in-out infinite alternate, m-twinkle 3s ease-in-out infinite; }

/* Rain: thin streaks falling at a slant */
.motion--rain i { top: -20%; width: 1px; height: calc(var(--s) * 70px); background: linear-gradient(transparent, color-mix(in oklab, var(--mb) 55%, transparent));
  transform: rotate(12deg); animation: m-fall 1.6s linear infinite; }

/* Snow: soft flakes drifting down */
.motion--snow i { top: -5%; width: calc(var(--s) * 6px); height: calc(var(--s) * 6px); border-radius: 50%;
  background: color-mix(in oklab, var(--mb) 70%, white); opacity: .7; animation: m-snow 12s linear infinite; }

/* Waves: layered tides along the bottom */
.motion--waves i { left: -50%; top: auto; bottom: calc(var(--n) * 6% - 22%); width: 200%; height: 45%; border-radius: 45%;
  background: rgb(var(--mg) / calc(.10 + var(--n) * .05)); animation: m-tide calc(16s + var(--n) * 5s) linear infinite; }

/* Grid: a horizon and a floor rolling toward you */
.motion--grid { background: radial-gradient(70% 30% at 50% 58%, rgb(var(--mg) / .30), transparent 70%); }
.motion--grid::before { content: ""; position: absolute; left: -50%; right: -50%; top: 58%; bottom: -40%;
  background: repeating-linear-gradient(90deg, rgb(var(--mg) / .35) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg, rgb(var(--mg) / .35) 0 1px, transparent 1px 60px);
  transform: perspective(300px) rotateX(62deg); transform-origin: top; animation: m-roll 3s linear infinite; }
.motion--grid i { display: none; }
.motion--mini.motion--grid::before { background-size: auto; transform: perspective(60px) rotateX(62deg); }

/* Bokeh: big soft circles floating out of focus */
.motion--bokeh i { width: calc(var(--s) * 120px); height: calc(var(--s) * 120px); border-radius: 50%; filter: blur(4px);
  background: radial-gradient(circle, color-mix(in oklab, var(--mb) 30%, transparent), rgb(var(--mg) / .08) 70%, transparent);
  animation: m-wander 30s ease-in-out infinite alternate; }
.motion--mini.motion--bokeh i { width: calc(var(--s) * 22px); height: calc(var(--s) * 22px); filter: none; }

/* Lava: slow blobs that change shape */
.motion--lava i { width: 45vmax; height: 45vmax; left: calc(var(--n) * 30% - 15%); top: calc(var(--n) * 20% + 10%); filter: blur(40px);
  background: radial-gradient(circle, rgb(var(--mg) / .5), transparent 65%); animation: m-blob 24s ease-in-out infinite alternate; }
.motion--mini.motion--lava i { width: 90%; height: 90%; filter: blur(6px); }

@keyframes m-spin { to { transform: rotate(1turn); } }
@keyframes m-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes m-drift { from { transform: translate(-6%, 0) scaleY(1); } to { transform: translate(6%, 4%) scaleY(1.25); } }
@keyframes m-rise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(30px, -110vh); opacity: 0; } }
.motion--mini.motion--embers i { animation-name: m-rise-mini; }
@keyframes m-rise-mini { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(4px, -70px); opacity: 0; } }
@keyframes m-wander { from { transform: translate(0, 0); } to { transform: translate(calc((var(--s) - .8) * 140px), calc((.9 - var(--s)) * 120px)); } }
@keyframes m-fall { to { transform: translate(-25vh, 130vh) rotate(12deg); } }
@keyframes m-snow { to { transform: translate(40px, 110vh); } }
.motion--mini.motion--rain i { animation-name: m-fall-mini; height: calc(var(--s) * 18px); }
.motion--mini.motion--snow i { animation-name: m-snow-mini; width: 3px; height: 3px; }
@keyframes m-fall-mini { to { transform: translate(-16px, 90px) rotate(12deg); } }
@keyframes m-snow-mini { to { transform: translate(6px, 80px); } }
@keyframes m-tide { to { transform: rotate(1turn); } }
@keyframes m-roll { to { background-position: 0 60px, 0 60px; } }
@keyframes m-blob { 0% { transform: translate(0, 0) scale(1); border-radius: 40% 60% 55% 45%; } 100% { transform: translate(8%, -10%) scale(1.2); border-radius: 60% 40% 45% 55%; } }

@media (prefers-reduced-motion: reduce) { .motion, .motion *, .motion::before { animation: none !important; } }
html[data-a11y-motion] .motion, html[data-a11y-motion] .motion *, html[data-a11y-motion] .motion::before { animation: none !important; }

/* ---------- Customize: every look choice as round buttons with a small picture of it ---------- */
.swatches { display: flex; flex-wrap: wrap; gap: 14px; }
.swatch { display: grid; justify-items: center; gap: 6px; width: 66px; padding: 0; border: 0; background: none; color: var(--text-muted);
  font: inherit; font-size: var(--text-xs); text-align: center; cursor: pointer; }
.swatch__dot { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px var(--border); transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.swatch:hover .swatch__dot { transform: translateY(-2px); }
.swatch[aria-checked="true"] { color: var(--text); font-weight: var(--weight-semibold); }
.swatch[aria-checked="true"] .swatch__dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.swatch:focus-visible { outline: none; }
.swatch:focus-visible .swatch__dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-ring, var(--accent)); }
.swatch__dot--flame { background: conic-gradient(from 210deg, #ff6a1f, #ffb547, #ff6a1f); }
.swatch__dot--gold { background: conic-gradient(from 210deg, #ffb547, #ffd9a0, #ffb547); }
.swatch__dot--copper { background: conic-gradient(from 210deg, #e08a55, #f2c29b, #e08a55); }
.swatch__dot--coal { background: conic-gradient(from 210deg, #f0533a, #ffb547, #f0533a); }
.swatch__dot--blue { background: conic-gradient(from 210deg, #6e9bff, #c9daff, #6e9bff); }
.swatch__dot--jai { background: conic-gradient(from 210deg, #ff4fa3, #ffc2e2, #ff4fa3); }
.swatch__dot--auto { background: linear-gradient(135deg, #f4efe9 50%, #17120f 50%); }
.swatch__dot--light { background: #f4efe9; }
.swatch__dot--dark { background: #17120f; }
.swatch__dot--none { background: var(--bg); }
.swatch__dot--none::after { content: ""; width: 70%; height: 2px; background: var(--text-subtle); transform: rotate(-45deg); }
.swatch__dot--coals { background: radial-gradient(90% 60% at 50% 115%, rgb(var(--v-glow) / .75), transparent 70%), var(--bg); }
.swatch__dot .swatch__ui { position: absolute; inset: 30% 22% 22%; border-radius: 4px; background: var(--surface); opacity: .9; z-index: 1;
  box-shadow: 0 0 0 1px var(--border); }
.form__grid .field:has(.swatches) { grid-column: 1 / -1; }
.swatch-field { display: grid; gap: var(--space-2); grid-column: 1 / -1; }
.swatch-field > .field { gap: 0; }
.swatches .swatch { appearance: none; height: auto; min-height: 0; min-width: 0; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; padding: 0; }
.swatches .swatch::before, .swatches .swatch::after { content: none; }

/* the rich scene (js/scenes.js): one canvas behind everything */
.scene-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
@supports (height: 100lvh) { .scene-canvas { height: 100lvh; } }   /* 📜 the tallest view: no jump as the address bar hides */
.scene-canvas.is-soft { opacity: .45; }