@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap');

@font-face {
  font-family: "digital7";
  src: url("./fonts/digital-7.ttf") format("truetype");
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(112, 46, 25);
}

/* Blurred background element */
.radioBlurredBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url(./images/placeholder.jpg) no-repeat center center;
    background-size: cover;
    filter: blur(10px); /* Apply blur only to this element */
    z-index: -1; /* Push it behind everything */
}

.radio {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: auto;
}

.radioImage {
    height: 100vh; /* Fill the screen vertically */
    width: auto; /* Maintain aspect ratio */
    display: block;
    filter: blur(10px); /* Initial blur effect */
    transition: filter 0.5s ease-in-out; /* Smooth transition */
    position: relative; /* Ensure it stays above the blurred background */
}

.radioImage.loaded {
    filter: blur(0); /* Remove blur when high-res image loads */
}

#radioStream {
  display: none;
}

.stationContainer {
  position: relative;
  width: 78%;
  margin: 0px;
  overflow: hidden;
  text-align: center;
}

.stationName,
.stationStatus {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: opacity 0.5s ease;
  position: absolute;
  width: 100%;
}

.stationStatus.scrolling{
  position: absolute;
  text-overflow: unset;
  overflow: visible;
  animation: scroll 10s linear infinite;
  color: black;
  left: 100%;
}

@keyframes scroll {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}

.radioControl {
    position: absolute;
    top: 44%; /* Adjust based on image proportions */
    right: 21%; /* Keep it aligned with the image */
    border: 1px solid black;
    width: 60%; /* Adjust size relative to image */
    height: 26%; /* Fixed height */
}

.screen {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 10%;
    right: 35.5%;
    width: 32.5%;
    height: 13%;
    border: 1px solid rgb(0, 0, 0);
    background-color: rgb(192, 139, 39);
    border-radius: 1px;
}

.screen p {
    font-family: "digital7", sans-serif;
    font-size: 12px;
    margin: 4px 2px;
}

.screen .status {
    font-size: 8px;
    margin: 2px;
}

.screen > * {
  transition: opacity 0.4s ease;
}

.power {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 9.5%;
    left: 20%;
    width: 1.9%;
    height: 5.5%;
    border-radius: 1px;
    background-color: rgb(92, 60, 24);
    font-size: 6px;
    border: 1px solid rgba(0, 0, 0, 0);
    cursor: pointer;
}

.power i {
    position: relative;
    top: 18%;
}

.power:active {
    background-color: rgb(65, 40, 13);
}

.powerIndicator {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 24%;
    left: 19.5%;
    width: 3%;
    height: 2%;
    border-radius: 1px;
    font-size: 6px;
    border: 1px solid rgb(0, 0, 0);
    /* background-color: rgb(165, 0, 0);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);  */
    transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* Glow yellow (active) */
.powerIndicator.on {
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
    background-color: rgb(255, 215, 0); /* Gold/yellow tone */
}


.frequencySwitch {
    background-color: rgb(14, 14, 14);
    display: flex;
    justify-content: center;
    position: absolute;
    top: 10%;
    left: 8.95%;
    width: 5%;
    height: 16%;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: inset 0px 1px 4px rgba(255, 255, 255, 0.2), inset 0px -1px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s ease;
    cursor: pointer;
}

.frequencySwitch::before {
    content: "";
    position: absolute;
    top: 7.5%;
    width: 85%;
    height: 85%;
    border-radius: 50%;
    background: rgb(82, 55, 25);
}

.volumeSwitch {
    background-color: rgb(14, 14, 14);
    display: flex;
    justify-content: center;
    position: absolute;
    top: 12.5%;
    right: 24.1%;
    width: 4.9%;
    height: 16%;
    border-radius: 20px;
    box-shadow: inset 0px 3px 4px rgba(255, 255, 255, 0.2), inset 0px -2px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s ease;
    cursor: pointer;
}

.volumeSwitch::before {
    content: "";
    position: absolute;
    top: 11%;
    left: 11%;
    width: 80%;
    height: 77%;
    border-radius: 50%;
    background: rgb(238, 122, 27);
}

.play {
    position: absolute;
    top: 42%;
    right: 40.3%;
    width: 2.7%;
    height: 4.5%;
    border-radius: 15px;
    background-color: rgb(243, 146, 36);
    background: linear-gradient(190deg, rgb(243, 146, 36) 20%, rgb(82, 55, 25) 100%);
    border: 1px solid rgb(0, 0, 0);
    cursor: pointer;
}

.play i {
    position: absolute;
    top: 0%;
    left: 35%;
    font-size: 8px;
}

.stop {
    position: absolute;
    top: 42%;
    right: 35.5%;
    width: 2.7%;
    height: 4.5%;
    border-radius: 15px;
    background-color: rgb(243, 146, 36);
    background: linear-gradient(190deg, rgb(243, 146, 36) 20%, rgb(82, 55, 25) 100%);
    border: 1px solid black;
    cursor: pointer;
}

.stop i {
    position: absolute;
    top: 0%;
    left: 35%;
    font-size: 8px;
}

.cdSwitchBack {
    position: absolute;
    top: 42%;
    right: 31%;
    width: 2.7%;
    height: 4.5%;
    border-radius: 15px;
    background-color: rgb(243, 146, 36);
    background: linear-gradient(190deg, rgb(243, 146, 36) 20%, rgb(82, 55, 25) 100%);
    border: 1px solid black;
    cursor: pointer;
}

.cdSwitchBack i {
    position: absolute;
    top: 0%;
    left: 25%;
    font-size: 8px;
}

.cdSwitchForward {
    position: absolute;
    top: 42%;
    right: 26.2%;
    width: 2.7%;
    height: 4.5%;
    border-radius: 15px;
    background-color: rgb(243, 146, 36);
    background: linear-gradient(190deg, rgb(243, 146, 36) 20%, rgb(82, 55, 25) 100%);
    border: 1px solid black;
    cursor: pointer;
}

.cdSwitchForward i {
    position: absolute;
    top: 0%;
    left: 25%;
    font-size: 8px;
}

.play:active, .stop:active, .cdSwitchForward:active, .cdSwitchBack:active {
    background-color: rgb(243, 146, 36);
    background: linear-gradient(20deg, rgb(243, 146, 36) 20%, rgb(82, 55, 25) 100%);
    font-size: 5px;
}

.radioCDSwitch {
    position: absolute;
    top: 42%;
    left: 31%;
    width: 2.7%;
    height: 5%;
    border: 1px solid black;
    background: rgb(165, 101, 27);
    background: linear-gradient(177deg, rgb(165, 101, 27) 0%, rgb(82, 55, 25) 100%);
    cursor: pointer;
    transition: background 0.1s;
    border-radius: 1px;
}

.radioCDSwitch:active {
    background: rgb(165, 101, 27);
    background: linear-gradient(0deg, rgb(165, 101, 27) 0%, rgb(82, 55, 25) 100%);
}

.radioIndicator {
    position: absolute;
    top: 42%;
    left: 26.1%;
    width: 2.7%;
    height: 5%;
    border: 1px solid black;
    border-radius: 1px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.radioIndicator::before {
    content: "";
    position: absolute;
    left: 45%;
    border: 1px solid black;
    height: 90%;
}

.cdIndicator {
    position: absolute;
    top: 42%;
    left: 36.3%;
    width: 2.7%;
    height: 5%;
    border: 1px solid black;
    border-radius: 1px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.cdIndicator::before {
    content: "";
    position: absolute;
    left: 45%;
    border: 1px solid black;
    height: 90%;
}

.radioIndicator.active,
.cdIndicator.active {
  background: #ff0;
  box-shadow:
    0 0 5px #ff0,
    0 0 10px #ff0,
    0 0 15px #ff0;
}

.light {
    position: relative;
    top: 15%;
    width: 2px;
    height: 2px;
    border-radius: 15px;
    background-color: rgb(255, 251, 0); 
    box-shadow: 0 0 15px 3px rgb(255, 230, 0);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.light.dim {
  background: rgb(65, 40, 13);
  box-shadow: none;
}

/* Redirect area */

.article {
    position: absolute;
    top: 27%;
    right: 0%;
    width: 17%;
    height: 50%;
    border: 1px solid black;
    cursor: pointer;
}

.floatingDetail {
    position: absolute;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: none; /* Prevents interaction issues */
    opacity: 0;
}