/* The living scene behind the sign-in and sign-up cards and the portal hero (task P11-07; owner
   references: github.com/signup and the Manabi sign-in page).

   A fixed layer behind the page: a twinkling starfield (a dot grid in light), a soft crimson glow,
   a crimson pulse among the stars and three glossy floating objects of the ecosystem (a key for the
   account, a board block for InfraCanvas, a kanji tile for Manabi; static/scene/*.svg). CSS and SVG
   only: no script, no inline style (CSP). Cheap on phones: the stars are background images of four
   layers whose opacity animates, the objects are pre-drawn images that only move (transform), so the
   browser composites both without repainting. It never carries meaning (aria-hidden, decorative
   images with empty alternative text), never takes focus, never moves the layout (fixed, sizes
   given), and is still under prefers-reduced-motion. Colours: the stars and glows are mixed from the
   Qizil tokens, so both themes follow the theme switch; the objects use the Qizil crimson family. */

:root {
  --scene-star: color-mix(in srgb, var(--q-fg) 26%, transparent);
  --scene-accent: color-mix(in srgb, var(--q-accent) 70%, transparent);
  --scene-glow: color-mix(in srgb, var(--q-accent) 13%, transparent);
  --scene-halo: color-mix(in srgb, var(--q-accent) 6%, transparent);
  --scene-object-opacity: 0.9;
}
:root[data-theme="dark"] {
  --scene-star: color-mix(in srgb, var(--q-fg) 62%, transparent);
  --scene-glow: color-mix(in srgb, var(--q-accent) 26%, transparent);
  --scene-halo: color-mix(in srgb, var(--q-accent) 9%, transparent);
  --scene-object-opacity: 0.95;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --scene-star: color-mix(in srgb, var(--q-fg) 62%, transparent);
    --scene-glow: color-mix(in srgb, var(--q-accent) 26%, transparent);
    --scene-halo: color-mix(in srgb, var(--q-accent) 9%, transparent);
    --scene-object-opacity: 0.95;
  }
}

.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
/* The portal hero: the same scene inside the hero section only. */
.scene--hero {
  position: absolute;
}

.scene__glow,
.scene__halo,
.scene__stars {
  position: absolute;
  inset: 0;
}
.scene__glow {
  background: radial-gradient(70% 55% at 50% 105%, var(--scene-glow), transparent 72%);
  animation: scene-breathe 9s ease-in-out infinite alternate;
  will-change: opacity;
}
.scene__halo {
  background: radial-gradient(34rem 26rem at 50% 46%, var(--scene-halo), transparent 70%);
}

/* Four star layers: a few dots per tile, tiles of different sizes, so the field looks random. */
.scene__stars {
  inset: -2rem;
  opacity: 0.6;
  will-change: opacity;
  animation: scene-twinkle 5.5s ease-in-out infinite alternate;
}
.scene__stars--a {
  background-image:
    radial-gradient(circle at 8% 14%, var(--scene-star) 0 1px, transparent 1.6px),
    radial-gradient(circle at 34% 62%, var(--scene-star) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 71% 27%, var(--scene-star) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 88% 81%, var(--scene-star) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 52% 93%, var(--scene-star) 0 0.8px, transparent 1.4px);
  background-size: 230px 210px;
}
.scene__stars--b {
  background-image:
    radial-gradient(circle at 19% 41%, var(--scene-star) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 63% 9%, var(--scene-star) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 81% 55%, var(--scene-star) 0 1px, transparent 1.6px),
    radial-gradient(circle at 42% 84%, var(--scene-star) 0 1.1px, transparent 1.7px);
  background-size: 310px 290px;
  animation-duration: 7.5s;
  animation-delay: -2.5s;
}
.scene__stars--c {
  background-image:
    radial-gradient(circle at 27% 21%, var(--scene-star) 0 1.6px, transparent 2.3px),
    radial-gradient(circle at 74% 70%, var(--scene-star) 0 1.4px, transparent 2.1px),
    radial-gradient(circle at 92% 12%, var(--scene-star) 0 1px, transparent 1.6px),
    radial-gradient(circle at 6% 77%, var(--scene-star) 0 1.2px, transparent 1.8px);
  background-size: 410px 370px;
  animation-duration: 9.5s;
  animation-delay: -5s;
}
/* The crimson pulse: a sparse layer of accent dots that lights up and fades. */
.scene__stars--accent {
  opacity: 0;
  background-image:
    radial-gradient(circle at 23% 31%, var(--scene-accent) 0 1.8px, transparent 2.6px),
    radial-gradient(circle at 79% 64%, var(--scene-accent) 0 1.5px, transparent 2.3px);
  background-size: 560px 520px;
  animation: scene-pulse 6s ease-in-out infinite;
}

.scene__sparkle,
.scene__object {
  position: absolute;
  display: block;
  will-change: transform;
}
.scene__sparkle img,
.scene__object img {
  display: block;
  width: 100%;
  height: 100%;
}
.scene__sparkle {
  width: 18px;
  height: 18px;
  opacity: 0;
  animation: scene-sparkle 5s ease-in-out infinite;
}
.scene__sparkle--1 {
  top: 22%;
  left: calc(50% - 22rem);
}
.scene__sparkle--2 {
  top: 72%;
  left: calc(50% + 20rem);
  width: 14px;
  height: 14px;
  animation-delay: -1.8s;
}
.scene__sparkle--3 {
  top: 84%;
  left: calc(50% - 17rem);
  width: 12px;
  height: 12px;
  animation-delay: -3.4s;
}

/* The objects sit beside the card (it is 25rem wide and centred), never behind its text. */
.scene__object {
  opacity: var(--scene-object-opacity);
  animation: scene-float 9s ease-in-out infinite;
}
.scene__object--key {
  top: 16%;
  right: calc(50% + 16rem);
  width: 9.5rem;
  height: 9.5rem;
}
.scene__object--board {
  top: 11%;
  left: calc(50% + 15.5rem);
  width: 11rem;
  height: 9.75rem;
  animation-duration: 11s;
  animation-delay: -3s;
}
.scene__object--kanji {
  top: 60%;
  left: calc(50% + 18rem);
  width: 8.5rem;
  height: 8.5rem;
  animation-duration: 13s;
  animation-delay: -6s;
}

/* The portal hero: the objects frame the headline (about 44rem wide). */
.scene--hero .scene__object--key {
  top: 18%;
  right: calc(50% + 24rem);
}
.scene--hero .scene__object--board {
  top: 8%;
  left: calc(50% + 23rem);
}
.scene--hero .scene__object--kanji {
  top: 58%;
  left: calc(50% + 26rem);
}
.scene--hero .scene__sparkle--1 {
  left: calc(50% - 28rem);
}
.scene--hero .scene__sparkle--2 {
  left: calc(50% + 30rem);
}

/* Narrow screens: smaller objects peek in from the edges, fainter, out of the form's way. */
@media (max-width: 959.98px) {
  .scene__object--key {
    top: 7%;
    right: auto;
    left: -2.25rem;
    width: 5.5rem;
    height: 5.5rem;
  }
  .scene__object--board {
    top: auto;
    bottom: 13%;
    left: auto;
    right: -2.5rem;
    width: 6.5rem;
    height: 5.75rem;
  }
  .scene__object--kanji {
    top: auto;
    bottom: 4%;
    left: -1.75rem;
    width: 5rem;
    height: 5rem;
  }
  .scene--hero .scene__object--key {
    top: 4%;
    right: auto;
  }
  .scene--hero .scene__object--board {
    top: auto;
    left: auto;
  }
  .scene--hero .scene__object--kanji {
    top: auto;
    left: -1.75rem;
  }
  .scene__object {
    opacity: calc(var(--scene-object-opacity) * 0.7);
  }
  .scene__sparkle--1,
  .scene--hero .scene__sparkle--1 {
    left: 8%;
  }
  .scene__sparkle--2,
  .scene--hero .scene__sparkle--2 {
    left: 88%;
  }
  .scene__sparkle--3 {
    left: 78%;
  }
}

/* The card floats over the scene: a hairline and the kit's float shadow lift it off the stars. */
body:has(> .scene) .q-card,
body:has(> .scene) .auth-aside {
  box-shadow: var(--q-shadow-float);
}

@keyframes scene-twinkle {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
@keyframes scene-pulse {
  0%,
  100% {
    opacity: 0;
  }
  45%,
  55% {
    opacity: 1;
  }
}
@keyframes scene-breathe {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}
@keyframes scene-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -14px, 0) rotate(2.5deg);
  }
}
@keyframes scene-sparkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.4) rotate(0deg);
  }
  50% {
    opacity: 0.85;
    transform: scale(1) rotate(45deg);
  }
}

/* Still under reduced motion: every layer at a fixed, readable state. */
@media (prefers-reduced-motion: reduce) {
  .scene *,
  .scene *::before,
  .scene *::after {
    animation: none !important;
    transition: none !important;
  }
  .scene__stars {
    opacity: 0.6;
  }
  .scene__stars--accent {
    opacity: 0.8;
  }
  .scene__sparkle {
    opacity: 0.6;
  }
}

@media (forced-colors: active), print {
  .scene {
    display: none;
  }
}