/* ============================================================================
   decor.css — the feminine atmosphere layer.

   Four stacked effects, all purely decorative and all behind the content:

     1. AURORA    slow drifting colour blooms
     2. VEIL      a fine dotted lattice + soft light rays
     3. FLOAT     petals, blossoms, hearts and sparkles rising and swaying
     4. FLOURISH  hand-drawn line curls in the corners

   Everything is drawn as SVG rather than emoji. Emoji render as a different
   picture on every operating system — Apple's 🌸 is not Google's — so a layout
   tuned on one machine looks wrong on the next, and they cannot take the
   theme's colours. These shapes inherit from the token palette instead, which
   is why the whole layer restyles itself in dark mode for free.

   The layer is pointer-events:none end to end and is fully removed under
   prefers-reduced-motion, and by the "Soft animations" switch in Settings.
   ========================================================================= */

.decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;          /* keeps this layer out of the page's layout work */
}

/* Content has to sit above the atmosphere. */
.topbar { z-index: 40; }
main, footer.disclaimer { position: relative; z-index: 1; }

/* ── 1 · Aurora ──────────────────────────────────────────────────────── */

.decor-aurora { position: absolute; inset: -18%; filter: blur(52px); opacity: .78; }
.decor-aurora i {
  position: absolute;
  border-radius: 50%;
  display: block;
  will-change: transform;
}
.decor-aurora i:nth-child(1) {
  width: 46vw; height: 46vw; top: -6%; left: -8%;
  background: radial-gradient(circle at 40% 40%,
    color-mix(in srgb, var(--brand) 42%, transparent), transparent 68%);
  animation: auroraA 34s ease-in-out infinite;
}
.decor-aurora i:nth-child(2) {
  width: 40vw; height: 40vw; top: 4%; right: -10%;
  background: radial-gradient(circle at 60% 40%,
    color-mix(in srgb, var(--accent) 38%, transparent), transparent 68%);
  animation: auroraB 41s ease-in-out infinite;
}
.decor-aurora i:nth-child(3) {
  width: 52vw; height: 52vw; bottom: -18%; left: 18%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%);
  animation: auroraC 47s ease-in-out infinite;
}
.decor-aurora i:nth-child(4) {
  width: 30vw; height: 30vw; top: 42%; left: -6%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  animation: auroraB 38s ease-in-out infinite reverse;
}

:root[data-theme="dark"] .decor-aurora { opacity: .42; filter: blur(64px); }

@keyframes auroraA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(5vw, 4vh, 0) scale(1.14); }
  66%      { transform: translate3d(-3vw, 7vh, 0) scale(.92); }
}
@keyframes auroraB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(-6vw, 5vh, 0) scale(1.18); }
  70%      { transform: translate3d(3vw, -4vh, 0) scale(.9); }
}
@keyframes auroraC {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-7vw, -6vh, 0) scale(1.12); }
}

/* ── 2 · Veil — dotted lattice and light rays ────────────────────────── */

.decor-veil {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(color-mix(in srgb, var(--brand) 26%, transparent) .9px, transparent .9px),
    radial-gradient(color-mix(in srgb, var(--accent) 20%, transparent) .9px, transparent .9px);
  background-size: 34px 34px, 34px 34px;
  background-position: 0 0, 17px 17px;
  opacity: .42;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 30%, #000 20%, transparent 78%);
}
:root[data-theme="dark"] .decor-veil { opacity: .46; }

.decor-rays {
  position: absolute; inset: -20% -10%;
  background: repeating-linear-gradient(
    108deg,
    transparent 0 70px,
    color-mix(in srgb, var(--brand) 9%, transparent) 70px 72px,
    transparent 72px 150px);
  opacity: .5;
  mask-image: radial-gradient(ellipse 80% 60% at 70% 8%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 8%, #000, transparent 72%);
  animation: rays 26s ease-in-out infinite;
  will-change: transform;
}
@keyframes rays {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: .5; }
  50%      { transform: translate3d(-40px, 20px, 0) rotate(1.5deg); opacity: .25; }
}

/* ── 3 · Floating botanicals ─────────────────────────────────────────── */

.decor-float { position: absolute; inset: 0; }

/* Each item is positioned and timed from inline custom properties written by
   js/decor.js, so no two runs look identical. */
.petal {
  position: absolute;
  left: var(--x);
  bottom: -14vh;
  width: var(--size);
  height: var(--size);
  opacity: 0;
  will-change: transform, opacity;
  animation: rise var(--dur) linear var(--delay) infinite;
}
.petal svg { width: 100%; height: 100%; display: block; }

/* Colour is assigned by class so the palette stays inside the token system. */
.petal.c-brand  { color: var(--brand); }
.petal.c-accent { color: var(--accent); }
.petal.c-soft   { color: color-mix(in srgb, var(--brand) 55%, var(--accent)); }

@keyframes rise {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg);                    opacity: 0; }
  6%   {                                                                  opacity: var(--peak); }
  25%  { transform: translate3d(var(--sway), -28vh, 0) rotate(90deg); }
  50%  { transform: translate3d(calc(var(--sway) * -0.7), -56vh, 0) rotate(190deg); }
  75%  { transform: translate3d(var(--sway), -84vh, 0) rotate(280deg); }
  94%  {                                                                  opacity: var(--peak); }
  100% { transform: translate3d(0, -118vh, 0) rotate(var(--spin));        opacity: 0; }
}

/* Sparkles stay put and twinkle instead of travelling. */
.sparkle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  color: var(--brand);
  opacity: 0;
  will-change: transform, opacity;
  animation: twinkle var(--dur) ease-in-out var(--delay) infinite;
}
.sparkle svg { width: 100%; height: 100%; display: block; }
.sparkle.c-accent { color: var(--accent); }

@keyframes twinkle {
  0%, 100% { transform: scale(.35) rotate(0deg);   opacity: 0; }
  50%      { transform: scale(1) rotate(90deg);    opacity: var(--peak); }
}

/* ── 4 · Corner flourishes ───────────────────────────────────────────── */

.decor-flourish {
  position: absolute;
  width: clamp(180px, 26vw, 340px);
  color: var(--brand);
  opacity: .26;
}
.decor-flourish svg { width: 100%; height: auto; display: block; }
.decor-flourish.tl { top: -12px;  left: -26px; }
.decor-flourish.br { bottom: -18px; right: -26px; transform: rotate(180deg); }
:root[data-theme="dark"] .decor-flourish { opacity: .3; }

@media (max-width: 720px) {
  .decor-flourish { opacity: .1; width: clamp(140px, 40vw, 200px); }
  .decor-rays { display: none; }         /* the least visible layer, first to go */
}

/* ── Off switches ────────────────────────────────────────────────────── */

/* The Settings toggle. Aurora and veil stay — they are static colour, not
   motion — so turning animations off still leaves a designed page. */
:root[data-motion="off"] .decor-float,
:root[data-motion="off"] .decor-rays { display: none; }
:root[data-motion="off"] .decor-aurora i { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .decor-float, .decor-rays { display: none; }
  .decor-aurora i { animation: none; }
}