/*
  style.css — shared hybrid-reskin styles for soonspins.

  Structure borrowed from artw.ae's index.html (parallax layering, glitch/
  drift keyframe patterns, Rethink Sans). Palette is SOONSPINS' own
  orange/black (kept per Davon's explicit "keep the color theme" call,
  July 3, 2026) with real logo assets now in place (frontend/assets/) —
  vinyl-badge logo + a separate hand-drawn wordmark, both from KP's brand.

  Cloud background (July 3, 2026, updated same day): now uses the REAL
  bg.png cloud texture — the exact same file artw.ae's homepage uses
  (frontend/assets/bg.png). Ported artw.ae's actual technique instead of
  the earlier pure-CSS gradient approximation: a fixed #bg div with a
  tiled, panned .cloud-bg background-image, plus a slow hue-rotate on
  #bg itself and a translucent color-wash ::after layer. artw.ae tints
  its wash blue (rgba(30,60,120,...)); soonspins tints orange to match
  the brand per Davon's "keep the color theme" call.
*/

@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');

:root {
  /* orange/black brand accent, structured like artw.ae's blue trio */
  --bg-black: #0e0b09;
  --panel-black: #1a1310;
  --ink: #ffb27a;        /* was artw.ae's #abc */
  --ink-bright: #ffe0c2;  /* was artw.ae's #e7efff */
  --accent-orange: #ff6a1a;
}

@keyframes pan {
  from { background-position: 0 0; }
  to { background-position: 1024px 0; }
}

@keyframes drift {
  from { background-position: 0 bottom; }
  to { background-position: 1200px bottom; }
}

@keyframes glitchShake {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(1px, -2px); }
  100% { transform: translate(0); }
}

@keyframes hazePulse {
  0%   { opacity: 0.85; }
  50%  { opacity: 1; }
  100% { opacity: 0.85; }
}

@keyframes discSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

html, body {
  margin: 0;
  height: 100%;
}

/* ----- cloud parallax background ----- */
/* Third pass (July 3, evening): the flat mix-blend-mode:color version
   fixed the rainbow drift but read as a washed-out uniform brown — no
   depth, no real black. Switched to a multiply-based duotone instead:
   grayscale the photo, then multiply a radial gradient (orange in the
   center, fading to near-black at the edges) over it. Multiply crushes
   shadows toward true black and lets highlights read as vivid orange,
   which gives actual depth/contrast instead of a flat wash — and the
   built-in edge-darkening doubles as a vignette that frames the page
   content without needing a separate layer or extra markup. */
#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #050403;
}

#bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 100%),
    var(--accent-orange);
  background-blend-mode: multiply;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.cloud-bg {
  width: 100%;
  height: 100%;
  background-image: url("/assets/bg.png");
  background-repeat: repeat;
  animation: pan 45s linear infinite;
  filter: grayscale(1) brightness(0.85) contrast(1.2) blur(0.4px);
}

/* Mobile gets a flat fallback, same reasoning as artw.ae's — dropping
   the tiled/animated image on small/low-power devices in favor of a
   plain dark background. */
@media (max-width: 700px) {
  .cloud-bg { display: none; }
  #bg { background: var(--bg-black); animation: none; }
}

body {
  background: transparent;
  color: var(--ink);
  font-family: "Rethink Sans", sans-serif;
  font-weight: bold;
  padding: 14px;
  /* Room for the fixed #radio-player bar at the bottom of every page
     (KP feedback, July 4 2026: "the player should stay pinned on every
     page ... makes the whole site feel like a radio station"). Sized a
     bit above the player's own height so nothing sits flush behind it. */
  padding-bottom: 92px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  /* Small dark shadow keeps text readable over the busier textured
     background without needing a solid box behind it. */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* ----- logo ----- */
.site-logo {
  height: 40px;
  width: auto;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(255, 106, 26, 0.35));
}

a {
  color: var(--ink);
  text-decoration: none;
}

a:hover {
  color: var(--ink-bright);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 16px;
  text-transform: lowercase;
  margin-bottom: 24px;
}

.glitch-header {
  font-size: 28px;
  letter-spacing: 1px;
  text-transform: lowercase;
}

.glitch-header:hover {
  animation: glitchShake 0.3s;
}

.accent-btn {
  background: var(--accent-orange);
  color: var(--bg-black);
  border: none;
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

.panel {
  background: var(--panel-black);
  border-radius: 6px;
  padding: 16px;
}

/* ----- radio player bar ----- */
/* Direct port of artw.ae's #radio-player structure/styling — cover art
   + title/status on the left, plae/pop buttons on the right — recolored
   to the orange/black brand instead of artw.ae's navy/blue. */

@keyframes logoGlow {
  0% {
    filter:
      drop-shadow(0 0 6px rgba(255, 178, 122, 0.45))
      drop-shadow(0 0 14px rgba(255, 106, 26, 0.25));
  }
  50% {
    filter:
      drop-shadow(0 0 14px rgba(255, 224, 194, 0.7))
      drop-shadow(0 0 28px rgba(255, 106, 26, 0.5));
  }
  100% {
    filter:
      drop-shadow(0 0 6px rgba(255, 178, 122, 0.45))
      drop-shadow(0 0 14px rgba(255, 106, 26, 0.25));
  }
}

/* Pinned to the bottom of every page (July 4 2026 redesign pass) — same
   markup/IDs as before, now fixed instead of sitting in document flow.
   Every page includes this component so the radio always reads as "the
   station," not just an audio tag that happens to live on some pages.
   Note: this is a visual/branding fix, not gapless cross-page playback —
   each page load still tears down and rebuilds its own <audio> element,
   so navigating restarts the stream same as before. The pop-out player
   (homepage's "pop ↗") is still the way to keep one uninterrupted
   session going while browsing. */
#radio-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  background: rgba(14, 11, 9, 0.96);
  border: 1px solid var(--accent-orange);
  border-left: none;
  border-right: none;
  border-bottom: none;
  padding: 10px 16px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 0;
  backdrop-filter: blur(4px);
}

#radio-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

#radio-cover {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
  background: transparent;
  flex: 0 0 auto;
  border-radius: 50%;
  filter:
    drop-shadow(0 0 4px rgba(255, 178, 122, 0.35))
    drop-shadow(0 0 10px rgba(255, 106, 26, 0.18));
  transition: filter 0.25s ease, transform 0.25s ease;
}

#radio-cover:hover {
  transform: scale(1.04);
}

#radio-cover.playing {
  animation: logoGlow 1.6s ease-in-out infinite, discSpin 3s linear infinite;
}

#radio-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

#radio-title {
  color: var(--ink-bright);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#radio-status {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.1;
  margin-top: 3px;
}

#radio-play {
  background: var(--accent-orange);
  border: 1px solid var(--accent-orange);
  color: var(--bg-black);
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
  border-radius: 4px;
}

#radio-play:hover {
  background: var(--ink-bright);
}

#radio-popout {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
  letter-spacing: 0.04em;
  border-radius: 4px;
}

#radio-popout:hover {
  color: var(--ink-bright);
  border-color: var(--ink-bright);
}

@media (max-width: 700px) {
  #radio-player { gap: 10px; padding: 10px; }
  #radio-play { padding: 8px 10px; }
}

/* ----- chat messages (plain, artw.ae-style) ----- */

#messages .msg-name-member {
  color: var(--ink-bright);
  font-weight: bold;
}

#messages .msg-name-admin {
  color: gold;
  font-weight: bold;
}

#messages .msg-name-anon {
  font-weight: bold;
}