/* Celestial Sorting Station — subtle hero atmosphere (additive, non-destructive) */

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

.auth-bg-celestial--through {
  z-index: 1;
}

.auth-bg-celestial--exit {
  z-index: 5;
}

[data-theme="light"] .auth-bg-celestial--through {
  -webkit-mask-image: radial-gradient(ellipse 38% 46% at 72% 42%, black 22%, black 56%, transparent 74%);
  mask-image: radial-gradient(ellipse 38% 46% at 72% 42%, black 22%, black 56%, transparent 74%);
}

[data-theme="light"] .auth-bg-celestial--exit {
  -webkit-mask-image: none;
  mask-image: none;
}

[data-theme="light"] .auth-bg-scene {
  --crystal-cx: 72%;
  --crystal-rx: 19%;
  --crystal-exit-gap: clamp(-2px, 0vw, 2px);
}

html:not([data-theme="light"]) .auth-bg-celestial--inbound {
  display: none;
}

html:not([data-theme="light"]) .auth-bg-celestial--through,
html:not([data-theme="light"]) .auth-bg-celestial--exit {
  z-index: 4;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, black 58%, black 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, black 58%, black 100%);
}

.auth-bg-celestial--inbound {
  z-index: 2;
}

[data-theme="light"] .auth-bg-celestial--inbound {
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 78%, transparent 92%);
  mask-image: linear-gradient(90deg, black 0%, black 78%, transparent 92%);
}

[data-theme="light"] .auth-bg-celestial__zone--inbound {
  left: 0;
  right: calc(100% - var(--crystal-cx) + var(--crystal-rx));
  top: 30%;
  width: auto;
  height: min(52vh, 460px);
  transform: rotate(14deg);
  transform-origin: 100% 46%;
}

[data-theme="light"] .auth-bg-celestial__zone--through {
  top: 44%;
  right: 3%;
  width: min(58vw, 760px);
  height: min(66vh, 560px);
  transform: translateY(-50%) rotate(14deg);
  transform-origin: 72% 42%;
}

[data-theme="light"] .auth-bg-celestial__zone--exit {
  left: calc(var(--crystal-cx) + var(--crystal-rx) + var(--crystal-exit-gap));
  right: auto;
  width: clamp(200px, 24vw, 420px);
  top: 18%;
  height: min(62vh, 540px);
  transform: rotate(14deg);
  transform-origin: 0% 46%;
}

.auth-bg-celestial__zone {
  position: absolute;
  top: 50%;
  right: 6%;
  width: min(46vw, 640px);
  height: min(52vh, 420px);
  transform: translateY(-50%);
}

.auth-bg-micro-dust {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.auth-bg-micro-dust span {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--sz, 1.5px);
  height: var(--sz, 1.5px);
  border-radius: 50%;
  background: rgba(212, 188, 138, 0.55);
  box-shadow: 0 0 4px rgba(196, 165, 116, 0.2);
  opacity: 0;
  animation: stationDustDrift var(--d, 18s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
}

.auth-bg-micro-dust span.is-blue {
  background: rgba(90, 112, 136, 0.45);
  box-shadow: 0 0 3px rgba(61, 90, 128, 0.15);
}

@keyframes stationDustDrift {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 0.45; }
  50% { opacity: 0.28; transform: translate(var(--dx, 8px), var(--dy, -14px)); }
  85% { opacity: 0.12; }
}

.auth-bg-sort-glyphs {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.station-glyph {
  position: absolute;
  top: var(--y, 50%);
  width: var(--sz, 12px);
  height: var(--sz, 12px);
  opacity: 0;
  will-change: transform, opacity;
}

.station-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

.station-glyph--in {
  left: -4%;
  color: rgba(90, 112, 136, 0.42);
  animation: stationGlyphIn var(--d, 14s) linear infinite;
  animation-delay: var(--del, 0s);
}

.station-glyph--out {
  left: 0;
  color: rgba(196, 165, 116, 0.48);
  animation: stationGlyphOut var(--d, 13s) linear infinite;
  animation-delay: var(--del, 0s);
}

.station-glyph--exit {
  left: var(--x, 0%);
}

.station-glyph--out.is-star {
  color: rgba(212, 188, 138, 0.52);
}

@keyframes stationGlyphIn {
  0% { opacity: 0; transform: translateX(0) scale(0.88); }
  10% { opacity: 0.52; }
  46% { opacity: 0.36; transform: translateX(46%) scale(0.96); }
  50% { opacity: 0; transform: translateX(48%) scale(0.75); }
  100% { opacity: 0; transform: translateX(48%) scale(0.75); }
}

@keyframes stationGlyphOut {
  0%, 49% { opacity: 0; transform: translateX(0) scale(0.75); }
  53% { opacity: 0.48; transform: translateX(2%) scale(0.92); }
  90% { opacity: 0.3; transform: translateX(52%) scale(1); }
  100% { opacity: 0; transform: translateX(58%) scale(0.88); }
}

@media (max-width: 959px) {
  [data-theme="light"] .auth-bg-celestial--exit {
    -webkit-mask-image: none;
    mask-image: none;
  }

  [data-theme="light"] .auth-bg-celestial__zone--through {
    width: 58vw;
    right: 2%;
  }

  [data-theme="light"] .auth-bg-celestial__zone--inbound {
    right: calc(100% - 88%);
  }

  [data-theme="light"] .auth-bg-celestial__zone--exit {
    left: calc(88% - 2px);
    width: clamp(160px, 28vw, 300px);
  }

  @keyframes stationGlyphIn {
    0% { opacity: 0; transform: translateX(0) scale(0.88); }
    10% { opacity: 0.48; }
    46% { opacity: 0.32; transform: translateX(44%) scale(0.96); }
    50% { opacity: 0; transform: translateX(46%) scale(0.75); }
    100% { opacity: 0; transform: translateX(46%) scale(0.75); }
  }

  @keyframes stationGlyphOut {
    0%, 49% { opacity: 0; transform: translateX(0) scale(0.75); }
    53% { opacity: 0.42; transform: translateX(2%) scale(0.92); }
    90% { opacity: 0.26; transform: translateX(50%) scale(1); }
    100% { opacity: 0; transform: translateX(56%) scale(0.88); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .station-glyph--in,
  .station-glyph--out,
  .auth-bg-micro-dust span,
  .station-stream-line {
    animation: none !important;
    opacity: 0.2 !important;
  }
}

.auth-bg-sort-stream {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.station-stream-line {
  position: absolute;
  left: -8%;
  width: 115%;
  height: 1px;
  opacity: 0;
  animation: stationStreamFlow var(--d, 16s) linear infinite;
  animation-delay: var(--del, 0s);
}

.station-stream-line.is-blue {
  top: var(--y, 50%);
  background: linear-gradient(90deg, transparent 0%, rgba(61, 90, 128, 0) 8%, rgba(148, 163, 184, 0.35) 42%, rgba(61, 90, 128, 0.12) 52%, transparent 58%);
}

.station-stream-line.is-gold {
  top: var(--y, 50%);
  background: linear-gradient(90deg, transparent 48%, rgba(196, 165, 116, 0.08) 54%, rgba(184, 149, 106, 0.32) 78%, rgba(196, 165, 116, 0.06) 92%, transparent 100%);
}

@keyframes stationStreamFlow {
  0% { opacity: 0; transform: translateX(0); }
  12% { opacity: 0.45; }
  88% { opacity: 0.28; }
  100% { opacity: 0; transform: translateX(6%); }
}

.auth-bg-star-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

/* ── Light mode refinements ── */

[data-theme="light"] .auth-bg-star-dust {
  z-index: 2;
  opacity: 0.17;
  -webkit-mask-image: linear-gradient(90deg, transparent 58%, black 66%, black 100%);
  mask-image: linear-gradient(90deg, transparent 58%, black 66%, black 100%);
  background-image:
    radial-gradient(1.4px 1.4px at 66% 18%, rgba(212, 188, 138, 0.5), transparent),
    radial-gradient(1.6px 1.6px at 74% 32%, rgba(130, 165, 205, 0.46), transparent),
    radial-gradient(1.5px 1.5px at 69% 48%, rgba(212, 188, 138, 0.48), transparent),
    radial-gradient(1.7px 1.7px at 78% 22%, rgba(196, 210, 228, 0.44), transparent),
    radial-gradient(1.4px 1.4px at 82% 56%, rgba(212, 188, 138, 0.46), transparent),
    radial-gradient(1.6px 1.6px at 71% 68%, rgba(130, 165, 205, 0.42), transparent),
    radial-gradient(1.5px 1.5px at 88% 38%, rgba(212, 188, 138, 0.5), transparent),
    radial-gradient(1.4px 1.4px at 76% 74%, rgba(196, 165, 116, 0.44), transparent),
    radial-gradient(1.6px 1.6px at 92% 24%, rgba(196, 210, 228, 0.46), transparent),
    radial-gradient(1.5px 1.5px at 85% 62%, rgba(212, 188, 138, 0.48), transparent),
    radial-gradient(1.4px 1.4px at 68% 36%, rgba(120, 155, 195, 0.42), transparent),
    radial-gradient(1.6px 1.6px at 94% 52%, rgba(212, 188, 138, 0.46), transparent),
    radial-gradient(1.5px 1.5px at 73% 14%, rgba(196, 165, 116, 0.4), transparent),
    radial-gradient(1.7px 1.7px at 81% 44%, rgba(130, 165, 205, 0.44), transparent),
    radial-gradient(1.4px 1.4px at 90% 70%, rgba(212, 188, 138, 0.42), transparent),
    radial-gradient(1.5px 1.5px at 77% 58%, rgba(196, 210, 228, 0.4), transparent);
}

[data-theme="light"] .auth-bg-sort-stream {
  mix-blend-mode: normal;
}

[data-theme="light"] .station-stream-line.is-through {
  height: 1px;
  left: -18%;
  width: 92%;
  animation-name: stationStreamThroughCrystal;
  background: linear-gradient(90deg, transparent 8%, rgba(110, 145, 185, 0.068) 28%, rgba(160, 185, 210, 0.114) 46%, rgba(185, 200, 218, 0.083) 54%, rgba(210, 185, 120, 0.042) 62%, transparent 78%);
  filter: none;
}

[data-theme="light"] .station-glyph.is-through-in {
  position: absolute;
  left: -6%;
  mix-blend-mode: soft-light;
  opacity: 0.62;
}

@keyframes stationStreamThroughCrystal {
  0% { opacity: 0; transform: translateX(-4%); }
  14% { opacity: 0.11; }
  52% { opacity: 0.14; }
  78% { opacity: 0.065; }
  100% { opacity: 0; transform: translateX(6%); }
}

[data-theme="light"] .auth-bg-sort-stream--exit {
  mix-blend-mode: normal;
}

[data-theme="light"] .station-stream-line.is-gold.is-exit {
  left: 0;
  width: 88%;
  height: 1.5px;
  animation-name: stationStreamExitYellow;
  background: linear-gradient(90deg, rgba(210, 165, 70, 0.12) 0%, rgba(230, 185, 85, 0.42) 22%, rgba(255, 210, 90, 0.58) 48%, rgba(220, 175, 75, 0.38) 72%, transparent 100%);
  filter: none;
}

[data-theme="light"] .station-stream-line.is-gold.is-exit.is-prominent {
  height: 2px;
  background: linear-gradient(90deg, rgba(220, 175, 75, 0.15) 0%, rgba(255, 220, 100, 0.48) 20%, rgba(255, 215, 80, 0.62) 45%, rgba(230, 185, 85, 0.42) 70%, transparent 100%);
}

@keyframes stationStreamExitYellow {
  0% { opacity: 0; transform: translateX(0); }
  10% { opacity: 0.48; }
  85% { opacity: 0.36; }
  100% { opacity: 0; transform: translateX(10%); }
}

[data-theme="light"] .auth-bg-sort-glyphs {
  z-index: 3;
}

[data-theme="light"] .station-glyph--exit {
  animation-name: stationGlyphExitScatter !important;
  filter: none;
  top: var(--y, 50%);
}

[data-theme="light"] .station-glyph--exit.is-star {
  width: var(--sz, 22px);
  height: var(--sz, 22px);
}

[data-theme="light"] .station-glyph--exit.station-glyph--out:not(.is-star) {
  width: var(--sz, 24px);
  height: var(--sz, 24px);
}

[data-theme="light"] .station-glyph--inbound {
  left: -6%;
  animation-name: stationGlyphInboundLight !important;
  filter: none;
}

[data-theme="light"] .station-glyph--inbound.is-blue {
  color: rgba(96, 125, 165, 0.72);
}

[data-theme="light"] .station-glyph--inbound:not(.is-blue) {
  color: rgba(110, 118, 132, 0.68);
}

@keyframes stationGlyphInboundLight {
  0% { opacity: 0; transform: translateX(0) scale(0.9); }
  8% { opacity: 0.52; }
  72% { opacity: 0.42; transform: translateX(82%) scale(0.96); }
  88% { opacity: 0; transform: translateX(94%) scale(0.88); }
  100% { opacity: 0; transform: translateX(94%) scale(0.85); }
}

@keyframes stationGlyphExitScatter {
  0% { opacity: 0; transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(0.88); }
  5% { opacity: 0.92; transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1); }
  45% { opacity: 0.88; transform: translate(calc(var(--dx, 120px) * 0.18), calc(var(--dy, 0px) * 0.18)) rotate(var(--rot, 0deg)) scale(1); }
  78% { opacity: 0.72; transform: translate(calc(var(--dx, 120px) * 0.48), calc(var(--dy, 0px) * 0.48)) rotate(calc(var(--rot, 0deg) + 3deg)) scale(1.02); }
  100% { opacity: 0; transform: translate(var(--dx, 120px), var(--dy, 0px)) rotate(calc(var(--rot, 0deg) + 6deg)) scale(1.03); }
}

[data-theme="light"] .station-glyph--exit.station-glyph--out {
  color: rgba(158, 112, 32, 0.95);
}

[data-theme="light"] .station-glyph--exit.is-star {
  color: rgba(176, 128, 36, 0.96);
}

.auth-bg-micro-dust span.is-silver {
  background: rgba(196, 210, 228, 0.52);
  box-shadow: 0 0 4px rgba(148, 163, 184, 0.22);
}

[data-theme="light"] .auth-bg-micro-dust span.is-gold.is-exit {
  animation-name: stationDustDrift;
  background: rgba(212, 188, 138, 0.55);
  box-shadow: 0 0 4px rgba(196, 165, 116, 0.2);
}

[data-theme="light"] .auth-bg-micro-dust span.is-silver.is-exit {
  animation-name: stationDustDrift;
  background: rgba(196, 210, 228, 0.52);
  box-shadow: 0 0 4px rgba(148, 163, 184, 0.22);
}

[data-theme="light"] .station-glyph--in.is-through-in {
  display: none;
}