/* Living sky behind the whole site (home, every page and the login page), with frosted surfaces on top.
   In /public/ because the login page is served without a session. Loaded after app.css / login.css. */

/* Colors animate through registered properties: a change of moment fades instead of jumping. */
@property --sky-bg { syntax: "<color>"; inherits: true; initial-value: #0b1420; }
@property --g1 { syntax: "<color>"; inherits: true; initial-value: #0000; }
@property --g2 { syntax: "<color>"; inherits: true; initial-value: #0000; }
@property --g3 { syntax: "<color>"; inherits: true; initial-value: #0000; }

:root {
  /* Frost tokens. --panel stays opaque (dropdowns, dialogs, consoles, dense tables); --glass is for the shell and cards. */
  --glass: rgba(17, 30, 45, .72);
  --glass-side: rgba(7, 16, 26, .78);
  --glass-line: rgba(255, 255, 255, .10);
  --frost: blur(16px) saturate(1.3);
  --glow-alpha: 28%;
  --star: #fff;
  --star-op: 1;
  /* Lighter muted text: it sits straight on the sky outside the cards. */
  --muted: #d0dce6;
}
:root[data-theme="light"] {
  --glass: rgba(255, 255, 255, .66);
  --glass-side: rgba(11, 26, 43, .80);
  --glass-line: rgba(255, 255, 255, .55);
  --glow-alpha: 44%;
  --muted: #3b4f60;
}

/* --- The sky --- */
.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: var(--sky-bg);
  transition: --sky-bg 3s ease, --g1 3s ease, --g2 3s ease, --g3 3s ease;
}
/* Dark theme palettes: background / three glows. */
.sky[data-moment="morning"] { --sky-bg: #3a2a4f; --g1: #ff9d5c; --g2: #ffcf70; --g3: #e8638f; }
.sky[data-moment="day"]     { --sky-bg: #0d4a66; --g1: #2ad4c8; --g2: #3b8cff; --g3: #7be3b0; }
.sky[data-moment="evening"] { --sky-bg: #241a4d; --g1: #8a4fff; --g2: #e8508a; --g3: #3b5cff; }
.sky[data-moment="night"]   { --sky-bg: #060c18; --g1: #0f2f5e; --g2: #123f58; --g3: #231a55; }
/* Light theme: pale washes of the same hues. */
:root[data-theme="light"] .sky[data-moment="morning"] { --sky-bg: #fbe8da; --g1: #ffab76; --g2: #ffd98a; --g3: #f59bbd; }
:root[data-theme="light"] .sky[data-moment="day"]     { --sky-bg: #d6eff6; --g1: #5fdcd3; --g2: #79b0ff; --g3: #a5ebc8; }
:root[data-theme="light"] .sky[data-moment="evening"] { --sky-bg: #e3dbf6; --g1: #b08cff; --g2: #f59ac0; --g3: #8fa8ff; }
:root[data-theme="light"] .sky[data-moment="night"]   { --sky-bg: #d3dbee; --g1: #8fa8d8; --g2: #86bccd; --g3: #a596d8; }

/* The day glows are bright (teal, blue, mint): weaker, to keep the text on the sky readable. */
.sky[data-moment="day"] { --glow-alpha: 18%; }
:root[data-theme="light"] .sky[data-moment="day"] { --glow-alpha: 44%; }
/* The night glows are deep colors: stronger so they show. */
.sky[data-moment="night"] { --glow-alpha: 85%; }
:root[data-theme="light"] .sky[data-moment="night"] { --glow-alpha: 55%; }
.sky-glow {
  position: absolute; width: 75vmax; height: 75vmax; border-radius: 50%; will-change: transform;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g) var(--glow-alpha), transparent), transparent);
  animation: sky-drift 70s ease-in-out infinite alternate;
}
.sky .sky-glow.g1 { --g: var(--g1); left: -22vmax; top: -26vmax; }
.sky .sky-glow.g2 { --g: var(--g2); right: -26vmax; top: 18vh; animation-duration: 90s; animation-delay: -30s; }
.sky .sky-glow.g3 { --g: var(--g3); left: 14vw; bottom: -40vmax; animation-duration: 110s; animation-delay: -55s; }
@keyframes sky-drift {
  from { transform: translate(0, 0) scale(1); }
  50% { transform: translate(7vmax, 4vmax) scale(1.12); }
  to { transform: translate(-5vmax, 8vmax) scale(.94); }
}

/* Stars, at night only. */
.sky-stars { position: absolute; inset: 0; opacity: 0; transition: opacity 3s ease; }
.sky[data-moment="night"] .sky-stars { opacity: var(--star-op); }
.sky-stars i { position: absolute; border-radius: 50%; background: var(--star); animation: sky-twinkle 5s ease-in-out infinite; }
@keyframes sky-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
:root[data-theme="light"] { --star: #fff; --star-op: .95; }

.sky.paused .sky-glow, .sky.paused .sky-stars i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .sky-glow, .sky-stars i { animation: none; }
  .sky { transition: none; }
}

/* --- The page lets the sky through --- */
body { background: transparent; }

/* --- Frosted surfaces --- */
.sidebar { background: var(--glass-side); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); border-right: 1px solid var(--glass-line); }
.chat { background: var(--glass); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); border-left-color: var(--glass-line); }
/* The blur sits on a pseudo-element: a backdrop-filter on the bar itself would turn it into the containing
   block of the fixed notification and user panels it holds. */
.topbar { background: none; border-bottom-color: var(--glass-line); }
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--glass);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
}
.tile, .card, .mag-feat, .mag-card, .post-toc, .tr-agent, .tri-card, .b-block, .ct-card {
  background: var(--glass); border-color: var(--glass-line);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
}
.bt { background: var(--glass); border-color: var(--glass-line); }
.bt.big { background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent), var(--glass); }
.b-block { background: color-mix(in srgb, var(--glass) 70%, transparent); }
.tile:hover, .mag-card:hover { border-color: var(--accent); }
.tile-dot, .pip, .notif-badge { border-color: transparent; }
.chat-tabs, .msg-text, .announce { background: color-mix(in srgb, var(--bg) 45%, transparent); }
.msg.me .msg-text { background: color-mix(in srgb, var(--accent-soft) 85%, transparent); }

/* Drawers sit over the page text on small screens: opaque there. */
@media (max-width: 1100px) {
  .chat { background: var(--panel); }
}
@media (max-width: 860px) {
  .sidebar { background: var(--side); }
}