/* ============================================
   LIL RAWKERS RADIO — NEON ROCK THEME
   Podbean Podcast Website
   ============================================ */

:root {
  --lrr-bg: #080910;
  --lrr-panel: #141520;
  --lrr-red: #ff294f;
  --lrr-purple: #a64dff;
  --lrr-text: #f7f7fc;
  --lrr-muted: #abb0c3;
  --lrr-border: rgba(255,255,255,.11);
}

/* GLOBAL */
html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(ellipse at 15% 5%,
      rgba(255,41,79,.16),transparent 36%),
    radial-gradient(ellipse at 90% 30%,
      rgba(166,77,255,.13),transparent 40%),
    #080910 !important;
  color: var(--lrr-text) !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  line-height: 1.65;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px);
  background-size: 45px 45px;
}

body > * {
  position: relative;
}

h1, h2, h3, h4 {
  color: #fff !important;
  letter-spacing: -.025em;
}

h1 {
  font-size: clamp(2rem,5vw,4rem);
  font-weight: 900 !important;
  line-height: 1.15;
  text-shadow: 0 0 35px rgba(255,41,79,.25);
}

h2 {
  font-weight: 850 !important;
}

h3 {
  font-weight: 750 !important;
}

p {
  line-height: 1.8;
}

a {
  color: #ff647f;
  transition: color .25s ease,
              transform .25s ease,
              box-shadow .25s ease;
}

a:hover {
  color: #fff;
}

/* NAVIGATION */
header,
nav,
[class*="navbar"],
[class*="header-wrap"] {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

header,
[class*="navbar"] {
  border-bottom: 1px solid
    rgba(255,41,79,.22);
}

nav a,
header a {
  font-weight: 700;
  letter-spacing: .035em;
}

nav a:hover,
header a:hover {
  color: var(--lrr-red) !important;
}

/* HERO / PODCAST INTRO */
[class*="hero"],
[class*="banner"],
[class*="featured"] {
  position: relative;
}

[class*="hero"],
[class*="banner"] {
  background-image:
    radial-gradient(circle at 80% 15%,
      rgba(166,77,255,.19),transparent 42%),
    linear-gradient(135deg,
      rgba(255,41,79,.11),
      rgba(8,9,16,.12)) !important;
}

[class*="hero"] h1,
[class*="banner"] h1 {
  background: linear-gradient(
    110deg,#fff 10%,#ff8a9d 55%,#d5b5ff
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* EPISODE SECTIONS */
[class*="episode-list"],
[class*="episode-grid"],
[class*="episodes"] {
  position: relative;
}

article,
[class*="episode-card"],
[class*="episode-item"],
[class*="episode-list-item"] {
  border-radius: 18px !important;
  border: 1px solid var(--lrr-border) !important;
  background: linear-gradient(
    145deg,
    rgba(29,30,45,.96),
    rgba(13,14,24,.96)
  ) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,.24);
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

article:hover,
[class*="episode-card"]:hover,
[class*="episode-item"]:hover,
[class*="episode-list-item"]:hover {
  transform: translateY(-4px);
  border-color: rgba(255,41,79,.55) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.4),
    0 0 24px rgba(255,41,79,.12);
}

/* EPISODE IMAGES */
article img,
[class*="episode"] img {
  border-radius: 12px;
  transition: transform .35s ease,
              filter .35s ease;
}

article img:hover,
[class*="episode"] img:hover {
  filter: saturate(1.2) contrast(1.06);
}

/* TEXT INSIDE EPISODE PANELS */
article h2,
article h3,
[class*="episode"] h2,
[class*="episode"] h3 {
  color: #fff !important;
}

article p,
[class*="episode"] p {
  color: #c5c8d5;
}

time,
[class*="episode-date"],
[class*="publish-date"] {
  color: #aeb4c9 !important;
  font-size: .88rem;
}

/* BUTTONS */
button,
a[class*="button"],
a[class*="btn"],
button[class*="play"] {
  border-radius: 999px !important;
  font-weight: 800 !important;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

button:hover,
a[class*="button"]:hover,
a[class*="btn"]:hover {
  transform: translateY(-2px);
}

button[class*="play"],
a[class*="play"],
[class*="primary-btn"],
[class*="btn-primary"] {
  background: linear-gradient(
    135deg,#ff294f,#bb245f
  ) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 22px rgba(255,41,79,.25);
}

button[class*="play"]:hover,
a[class*="play"]:hover,
[class*="btn-primary"]:hover {
  box-shadow: 0 8px 30px rgba(255,41,79,.5);
}

/* AUDIO PLAYER */
audio {
  width: 100%;
  border-radius: 14px;
  accent-color: var(--lrr-red);
}

[class*="player-wrap"],
[class*="audio-player"],
[class*="player-container"] {
  border-radius: 18px !important;
  overflow: hidden;
}

/* SOCIAL AND SUBSCRIBE LINKS */
[class*="subscribe"] a,
[class*="social"] a {
  transition: transform .25s ease,
              filter .25s ease;
}

[class*="subscribe"] a:hover,
[class*="social"] a:hover {
  transform: translateY(-3px);
  filter: drop-shadow(
    0 0 9px rgba(255,41,79,.4)
  );
}

/* INPUTS */
input,
textarea,
select {
  border-radius: 10px !important;
  accent-color: var(--lrr-red);
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid rgba(255,41,79,.5);
  outline-offset: 2px;
}

/* FOOTER */
footer {
  border-top: 1px solid
    rgba(255,41,79,.25) !important;
  background: rgba(5,6,12,.9) !important;
  color: #aeb2c5 !important;
}

footer a {
  color: #ff7089 !important;
}

/* SELECTION AND SCROLLBAR */
::selection {
  background: #ff294f;
  color: white;
}

::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: #090a11;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    #ff294f,#7532b7
  );
  border-radius: 12px;
}

/* ANIMATION */
@keyframes lrrFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

article,
[class*="episode-card"] {
  animation: lrrFadeUp .55s ease both;
}

/* MOBILE */
@media(max-width:768px) {
  h1 {
    font-size: 2.15rem !important;
  }

  article,
  [class*="episode-card"],
  [class*="episode-item"] {
    border-radius: 14px !important;
  }

  body {
    background-color: #080910 !important;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}