/* =========================================================
   SuperTraxs.com One-Page Radio Landing Page
   v1.00.08 — hyphen-separated now-playing titles split to two lines; custom positioning preserved.
   ========================================================= */

:root{
  --black:#030303;
  --soft-blue:#8feaff;
  --hot-blue:#3aa8ff;
  --hot-pink:#ff4d9d;
}

*{box-sizing:border-box}

html{
  min-height:100%;
}

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:var(--black);
  font-family:Inter,Arial,sans-serif;
  color:#fff;
}

.page-shell{
  min-height:100vh;
  display:grid;
  place-items:start center;
  padding:0;
  background:var(--black);
}

.artboard{
  position:relative;
  width:min(100vw,1448px);
  line-height:0;
  isolation:isolate;
  transform:translateY(-54px);
}

.artboard::before{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  width:100%;
  height:7.25%;
  pointer-events:none;
  background:
    linear-gradient(180deg, #030303 0%, rgba(3,3,3,.96) 72%, rgba(3,3,3,0) 100%);
}
.site-art{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  pointer-events:none;

  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.45) 5%,
    rgba(0,0,0,1) 12%,
    rgba(0,0,0,1) 88%,
    rgba(0,0,0,.45) 95%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.45) 5%,
    rgba(0,0,0,1) 12%,
    rgba(0,0,0,1) 88%,
    rgba(0,0,0,.45) 95%,
    rgba(0,0,0,0) 100%
  );

  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}

/* Live text placed only in the open area beneath NOW PLAYING */
.now-playing-live {
  position: absolute;
  z-index: 3;
  left: 51%;
  top: 56%;
  width: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  pointer-events: none;
  line-height: 1;
}

.now-playing-live h1{
  margin:0;
  font:400 clamp(26px,3vw,48px)/.95 "Bebas Neue",Impact,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--soft-blue);
  text-shadow:
    0 0 5px rgba(143,234,255,.95),
    0 0 13px rgba(58,168,255,.72),
    0 0 28px rgba(58,168,255,.45);
}

#now-playing-title br{
  display:block;
  content:"";
}

#now-playing-title{
  display:block;
}

.stream-status{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Invisible clickable layer over the baked Listen Live button */
.listen-button {
  position: absolute;
  z-index: 5;
  left: 34.2%;
  top: 69%;
  width: 37.2%;
  height: 9.15%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.listen-button .button-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.listen-button:focus-visible{
  outline:3px solid rgba(255,77,157,.9);
  outline-offset:4px;
  box-shadow:0 0 18px rgba(255,77,157,.75);
}

.is-off-air #now-playing-title{
  color:#ff7aa9;
  text-shadow:
    0 0 5px rgba(255,77,157,.95),
    0 0 14px rgba(255,77,157,.68),
    0 0 30px rgba(255,77,157,.42);
}

@media (max-width:700px){
  .now-playing-live{
    top:53.35%;
    width:42%;
  }

  .now-playing-live h1{
    font-size:clamp(18px,4.7vw,30px);
    letter-spacing:.11em;
  }

  .listen-button{
    left:31.8%;
    top:66%;
    width:39.5%;
    height:9.7%;
  }
}

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