/*
  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%;
  /* Mobile cleanup (July 6, 2026, Davon's ask): a few elements (the nav,
     some flex rows) were wider than the viewport on narrow screens,
     forcing an ugly horizontal scroll. This is the blanket safety net —
     the actual per-element fixes below (site-nav wrapping, flex children
     allowed to shrink) are what stop content from getting clipped by it. */
  overflow-x: hidden;
  max-width: 100vw;
}

/* ----- 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 used to get a flat fallback here (dropped the tiled/animated
   image on small/low-power devices). Davon's call July 6 2026: bring the
   cloud background back on mobile too — it's part of the site's identity
   and the flat fallback read as a downgrade. Keeping the animation; it's
   a cheap background-position tween, not a perf concern. */

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;
  flex-wrap: wrap;
}

.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; }
}

/* ----- mobile cleanup (July 6, 2026, Davon's ask) ----- */
@media (max-width: 700px) {
  /* .site-nav already wraps at all widths now (see above); tighten the
     gap on narrow screens so it wraps to 2 short lines instead of 1 tall
     one with awkward spacing. */
  .site-nav {
    gap: 8px 14px;
    font-size: 15px;
  }

  body {
    padding: 10px;
    padding-bottom: 92px;
  }
}

/* iOS Safari auto-zooms the whole page when a focused text input's
   computed font-size is under 16px. Several pages set smaller font-sizes
   on their own inputs/textareas (chat box, upload form, admin panel),
   which is what was causing the "zooms in when you type" behavior.
   Scoped to mobile widths only, and only to elements that actually take
   text entry (selects/buttons/checkboxes don't trigger it), so desktop
   and non-text controls keep whatever sizing each page already set. */
@media (max-width: 700px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input:not([type]),
  textarea {
    font-size: 16px !important;
  }
}

/* ----- 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;
}