/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root{
  --main-color-one: #fb4B0e;
  --main-color-two: #000;
  
  /*Rojo tomate:    #fb4B0e*/
  /*Verde fosforo:  #dcfa14*/
  /*Azure:          #008cff*/
  /*Devilish red:   #ff0066*/
  /*Lunar lilac:    #ebc4ff*/
  /*Thermal orange: #ff9900*/
  /*Goldilocks:     #ffd400*/
  /*Off white:      #fff3d6*/
  /*Purpur:         #ad48ab*/
  /*Cherry blossom  #ff9bdc*/
  
  }


@font-face {
  font-family: 'Saiba-45'; 
  src: url('/fonts/SAIBA-45.woff') format('woff');
  }
@font-face {
  font-family: 'Saiba-45-Out'; 
  src: url('/fonts/SAIBA-45-Outline.woff') format('woff');
  }
@font-face {
  font-family: 'Jersey'; 
  src: url('/fonts/Jersey10-Regular.ttf') format('truetype');
  }
@font-face {
  font-family: 'Cascadia'; 
  src: url('/fonts/CascadiaCode-VariableFont_wght.ttf') format('truetype');
  }
@font-face {
  font-family: 'Barcode'; 
  src: url('/fonts/LibreBarcode128Text-Regular.ttf') format('truetype');
  }
@font-face {
  font-family: 'Unsteady'; 
  src: url('/fonts/Unsteady Oversteer.otf') format('opentype');
  }
@font-face {
  font-family: 'Bitcount'; 
  src: url('/fonts/BitcountSingle.ttf') format('truetype');
  }
@font-face {
  font-family: 'DotGothic'; 
  src: url('/fonts/DotGothic16-Regular.ttf') format('truetype');
  }
  
  
  
  


html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  }

body{
  text-transform: uppercase;
  cursor: default;
  }

.col{
  display: flex;
  flex-direction: column;
  justify-content: center;
  }
  
.row{
  padding-top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  }
  
.row-esp{
  position: absolute;
  padding-bottom: 1dvw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  }

.main-bgcolor{
  height: 100%;
  /*background: linear-gradient(135deg,  #ff00dc 0%,#9d00ff 30%,#ff0066 70%,#001ddb 100%);*/
  background-color: var(--main-color-one);
  }
  
.blank{
  width: 2dvw;
  }
  
.main-header{
  width: 100%;
  font-family: "Unsteady";
  background-color: var(--main-color-two);
  color: var(--main-color-one);
  height: 2.4dvw;
  font-size: 1.2dvw;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  
.main-header p{
  font-family: "Cascadia";
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  }
  
.highlight{
  background-color: var(--main-color-two);
  color: var(--main-color-one);
  }
  
.cursor{
  background-color: var(--main-color-two);
  color: var(--main-color-one);
  animation: cursor-blink 1s step-end infinite;
  }
  
@keyframes cursor-blink {
  0% {
    background-color: var(--main-color-two);
    color: var(--main-color-one);
  }
  51% {
    background-color: var(--main-color-one);
    color: var(--main-color-two);
  }
}

.main-barcode{
  font-family: "Barcode";
  color: var(--main-color-two);
  font-size: 3.1dvw;
  writing-mode: vertical-lr;
  display: grid;
  place-items: center;
  height: fit-content;
  transform: scalex(1) scaley(1);
  margin-top: -0.1dvw;
  margin-bottom: -0.3dvw;
  padding-left: 0.1dvw;
  }
  
.main-theta{
  font-family: "Cascadia";
  font-weight: 200;
  font-style: italic;
  color: var(--main-color-two);
  margin-top: 0dvw;
  margin-bottom: 0dvw;
  width: fit-content;
  height: 6.9dvw;
  line-height: 0.7;
  text-align: center;
  font-size: 10dvw;
  }
  
.main-devinfo{
  display: flex;
  flex-direction: column;
  height: 6.9dvw;
  justify-content: center;
  align-items: flex-start;
  font-family: "Cascadia";
  font-weight: 400;
  font-size: 0.9dvw;
  padding-left: 2dvw;
  }
  
.main-devinfo p{
  font-style: italic;
  color: var(--main-color-two);
  margin-top: 0.2dvw;
  margin-bottom: 0.2dvw;
  width: fit-content;
  text-align: right;
  }
  
.main-runes{
  font-family: "Saiba-45-Out";
  color: var(--main-color-two);
  font-size: 8dvw;
  line-height: 0.1;
  margin-top: -0.2dvw;
  padding-left: 5dvw;
  letter-spacing: -0.5dvw;
  }
  
.main-titlecard{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 0.5dvw;
  padding-left: 0.5dvw;
  height: 12dvw;
  width: 65dvw;
  }
  
.main-titleback{
  position: absolute;
  background-color: var(--main-color-two);
  height: 12dvw;
  width: 65dvw;
  clip-path: polygon(1dvw 0, 63dvw 0, 64.7dvw 1.7dvw, 64.7dvw 9dvw, 63.7dvw 10dvw, 43dvw 10dvw, 41dvw 12dvw, 3dvw 12dvw, 0 9dvw, 0 1dvw);
  z-index: -1;
  }

.main-title{
  font-family: "Saiba-45";
  color: var(--main-color-one);
  font-size: 10dvw;
  height: 10dvw;
  padding-top: 0.3dvw;
  padding-left: 0.5dvw;
  }
  
.main-arroba{
  font-family: "Saiba-45";
  color: var(--main-color-one);
  font-size: 10dvw;
  height: 10dvw;
  padding-top: 0.9dvw;
  padding-left: 1dvw;
  }

.main-subtitle{
  font-family: "Jersey";
  color: var(--main-color-one);
  font-size: 2.4dvw;
  line-height: 0.2dvw;
  height: 2dvw;
  padding-left: 1dvw;
  }

.main-runinfo{
  font-family: "Cascadia";
  margin: 0.5dvw 0.5dvw;
  border: 0.1dvw solid var(--main-color-two);
  background-color: var(--main-color-one);
  width: 26dvw;
  height: 10dvw;
  }
  
.main-runinfo p{
  color: var(--main-color-two);
  font-weight: 400;
  font-size: 0.9dvw;
  margin-top: 0.2dvw;
  margin-bottom: 0.5dvw;
  text-transform: none;
  margin-left: 0.5dvw;
  margin-right: 0.5dvw;
  }
  
.boxheader{
  display: flex;
  align-items: center;
  background-color: var(--main-color-two);
  color: var(--main-color-one);
  width: 100%dvw;
  height: 1.5dvw;
  font-weight: 700;
  font-size: 1dvw;
  padding-left: 0.5dvw;
  }
  
.main-separador{
  margin-top: 11dvw;
  clip-path: polygon(0dvw 2dvw, 
                    41.8dvw 2dvw, 43.8dvw 0dvw, 
                    100dvw 0dvw, 100dvw 1dvw, 
                    44.3dvw 1dvw, 42.3dvw 3dvw, 
                    0dvw 3dvw);
  width: 100%;
  height: 4dvw;
  background-color: var(--main-color-two);
  }
  
.main-links{
  position: absolute;
  top: 29dvw;
  left: -5.2dvw;
  display: flex;
  flex-direction: column;
  width: 32dvw;
  height: 16dvw;
  transform: rotate(-45deg);
  row-gap: 0dvw;
  }
  
.main-button{
  cursor: pointer;
  background-color: var(--main-color-two);
  color: var(--main-color-one);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: fit-content;
  }
  
a{
  text-decoration: none;
  }
  
.email-link{
  clip-path: polygon(0dvw 0, 23dvw 0, 23dvw 4.62dvw, 0dvw 4.62dvw);
  width: 23dvw;
  height: 4.62dvw;
  margin-left: 0.06dvw;
  margin-top: 0.19dvw;
  }

.atlas-link{
  clip-path: polygon(0dvw 0, 18dvw 0, 18dvw 4.62dvw, 0dvw 4.62dvw);
  width: 18dvw;
  height: 4.62dvw;
  margin-left: 0.17dvw;
  margin-top: 0.25dvw;
  }
  
.archive-link{
  clip-path: polygon(0dvw 0, 27dvw 0, 27dvw 4.62dvw, 0dvw 4.62dvw);
  width: 27dvw;
  height: 4.62dvw;
  margin-left: 0.9dvw;
  margin-top: 0.23dvw;
  }

.button-text, .button-text-alt{
  font-family: "Jersey";
  font-size: 2.5dvw;
  text-align: justify;
  margin-left: 2dvw;
  }
  
.main-button .button-text-alt{
  display: none;
  }
  
.main-button:hover .button-text{
  display: none;
  }

.main-button:hover .button-text-alt{
  display: inline;
  }
  
.main-buttonrunes{
  text-align: end;
  font-family: "Saiba-45";
  font-size: 2.5dvw;
  margin-right: 2dvw;
  margin-left: 2dvw;
  }
  
.main-colorcontrol{
  position: absolute;
  top: 31.9dvw;
  left: 29.6dvw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 9.48dvw;
  transform: rotate(-45deg);
  gap: 0.24dvw;
  }
  
.main-colorcontrol .main-button {
  width: 100%;
  aspect-ratio: 1;
  justify-content: center;
}

.color-button-text{
  font-family: "Jersey";
  font-size: 3dvw;
  text-align: center;
  }

.retro-grid-bg{
  margin-top: -1dvw;
  border-top: 0.24dvw solid var(--main-color-one);
  border-right: 0dvw solid var(--main-color-one);
  width: 42.24dvw;
  height: 26.4dvw;
}

.grid-square{
  fill: var(--main-color-two);
}

.grid-button{
  fill: var(--main-color-one);
}













.stereo-set{
  position: absolute;
  height: 30dvw;
  width: 60dvw;
  left: 42.4dvw;
  top: 24.3dvw;
  clip-path: polygon(2dvw 0dvw, 57.6dvw 0dvw, 57.6dvw 23.7dvw, 0dvw 23.7dvw, 0dvw 2dvw);
  background-color: var(--main-color-two);
  font-family: "Cascadia";
  display: flex;
  flex-direction: column;
  }

/* 2-Column Top Split Layout */
.deck-top-row{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0.5dvw;
  width: 100%;
  padding-top: 0.5dvw;
  padding-left: 1dvw;
}

/* Container 1: Display & Analyzer */
.display-container{
  font-family: "Bitcount";
  font-weight: 400;
  width: 55.6dvw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.meta-readout{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.1dvw dashed var(--main-color-one);
  padding-bottom: 0.3dvw;
  font-size: 1.1dvw;
}

.mixtape-badge{
  font-weight: 400;
  background-color: var(--main-color-one);
  color: var(--main-color-two);
  padding: 0dvw 0.3dvw;
  font-size: 1.3dvw;
  margin-left: 1dvw;
  margin-bottom: -0.1dvw;
  white-space: nowrap;
}

.track-info-single{
  font-family: "Bitcount", "DotGothic";
  color: var(--main-color-one);
  text-transform: none;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: -0.1dvw;
  font-variation-settings: "slnt" -8, "CRSV" 0, "ELSH" 0, "ELXP" 0;
  line-height: 1em;
}

#spectrum-canvas{
  width: 100%;
  height: 6dvw;
  display: block;
  margin: 0.3dvw 0;
}

.telemetry-readout{
  color: var(--main-color-one);
  display: flex;
  justify-content: space-between;
  font-size: 1dvw;
  margin-bottom: 0.3dvw;
}

.progress-container{
  width: 100%;
  height: 0.5dvw;
  border: 0.1dvw solid var(--main-color-one);
  cursor: pointer;
}

.progress-bar {
  width: 100%; /* Default to full width, we will shrink it with scaleX! */
  height: 100%;
  background-color: var(--main-color-one);
  
  /* THE GPU FIX: Anchors the scaling to the left and starts at 0 scale */
  transform-origin: left center;
  transform: scaleX(0);
  
  /* Promotes this element to its own dedicated GPU hardware layer */
  will-change: transform; 
}

/* Container 2: Controls & FX */
.controls-container{
  width: 20dvw;
  height: 10.9dvw;
  border: 0.1dvw double var(--main-color-one);
  padding-right: 0.5dvw;
  padding-left: 0.5dvw;
  padding-top: 0.2dvw;
  padding-bottom: 0.3dvw;
  margin-top: 0.5dvw;
  margin-left: 1dvw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.3dvw;
}

.ctrl-section-label{
  color: var(--main-color-one);
  opacity: 0.9;
  font-size: 0.7dvw;
  border-bottom: 0.05dvw solid var(--main-color-one);
  padding-top: 0.1dvw;
  padding-bottom: 0.1dvw;
}

.btn-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.3dvw;
}

.fx-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3dvw;
}

.stereo-button{
  font-family: "Cascadia";
  background: transparent;
  border: 0.1dvw solid var(--main-color-one);
  color: var(--main-color-one);
  padding: 0.35dvw 0.2dvw;
  font-size: 0.7dvw;
  font-weight: 400;
  cursor: pointer;
  text-align: center;
}

.stereo-button:hover, .stereo-button.fx-active{
  background-color: var(--main-color-one);
  color: var(--main-color-two);
}

.special-button{
  border-style: double;
  border-width: 0.2dvw;
}

/* Playback Speed Fader (Retro Slider) */
.slider-box{
  color: var(--main-color-one);
  padding-top: 0.4dvw;
  display: flex;
  flex-direction: column;
  font-size: 0.7dvw;
}

.retro-slider{
  -webkit-appearance: none;
  width: 19.7dvw;
  background: transparent;
}

.retro-slider::-webkit-slider-runnable-track{
  margin-left: -2px;
  margin-top: -0.1dvw;
  height: 0.5dvw;
  background: var(--main-color-two);
  border: 0.1dvw solid var(--main-color-one);
}

.retro-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  height: 1dvw;
  width: 0.5dvw;
  background: var(--main-color-one);
  cursor: pointer;
  margin-top: -0.3dvw;
}

/* Simplified Single-Column Tracklist */
.tracklist-container {
  height: 10.9dvw;
  width: 33dvw;
  border: 0.1dvw solid var(--main-color-one);
  padding-right: 0.5dvw;
  padding-left: 0.5dvw;
  padding-top: 0.2dvw;
  padding-bottom: 0.3dvw;
  margin-top: 0.5dvw;
  margin-left: 0.5dvw;
  display: flex;
  flex-direction: column;
  gap: 0.2dvw;
}

.tracklist-box{
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.tracklist-box::-webkit-scrollbar{
  width: 0.5dvw; 
  margin-right: 0.2dvw;
}

/* The dark background trough the scrollbar slides inside */
.tracklist-box::-webkit-scrollbar-track{
  background: var(--main-color-two);
}

.tracklist-box::-webkit-scrollbar-thumb{
  border-left: 0.3dvw solid var(--main-color-two);
  background: var(--main-color-one);
  /* Notice: Zero border-radius! This preserves the sharp, 
     blocky 90s hardware aesthetic instead of looking like a modern rounded pill. */
}

.track-item{
  font-size: 1dvw;
  padding: 0.1dvw 0.4dvw;
  border: 0.07dvw solid transparent;
  color: var(--main-color-one);
  font-family: "DotGothic";
  letter-spacing: 0.05dvw;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.track-item:hover {
  border-color: var(--main-color-one);
}

.track-item.active-track {
  background-color: var(--main-color-one);
  color: var(--main-color-two);
  font-weight: 400;
}




















/* 1. Base state of your arrow characters */
.rune-node {
  display: inline-block;
  color: var(--main-color-one);
  margin: -0.4dvw;
  opacity: 1; /* Fully visible when not hovered */
}

/* 2. THE HOVER TRIGGER: When the button container is hovered, 
   activate the runway-strobe animation on the arrow nodes */
.main-button:hover .rune-node {
  /* Runs the 'strobe' keyframes over 0.6 seconds, repeating infinitely */
  animation-duration: 0.75s;
  animation-timing-function: step-end; /* Instantly snaps between frames without sliding */
  animation-iteration-count: infinite;
}

/* 3. THE MAGIC SKEW: Stagger each node using animation-delay */
.main-button:hover .rune-node:nth-child(1) {
  animation-name: strobe-arrow-one;
}

.main-button:hover .rune-node:nth-child(2) {
  animation-name: strobe-arrow-two;
}

.main-button:hover .rune-node:nth-child(3) {
  animation-name: strobe-arrow-three;
}

/* 3. THE BINARY KEYFRAMES */
/* Notice how the values switch instantly (e.g., from 0% to 20%) 
   with no ramp-up, forcing an immediate hardware shut-off window. */

/* FIRST ARROW: Cuts off at 0%, snaps back at 20% */
@keyframes strobe-arrow-one {
  0%   { opacity: 0.17; } 
  10%  { opacity: 1; }
  100% { opacity: 1; }
}

/* SECOND ARROW: Cuts off at 20%, snaps back at 40% */
@keyframes strobe-arrow-two {
  0%   { opacity: 1; }
  10%  { opacity: 0.17; }
  20%  { opacity: 1; }
  100% { opacity: 1; }
}

/* THIRD ARROW: Cuts off at 40%, snaps back at 60% */
@keyframes strobe-arrow-three {
  0%   { opacity: 1; }
  20%  { opacity: 0.17; }
  30%  { opacity: 1; }
  100% { opacity: 1; }
}












/* The window that clips everything outside of it */
.ticker-wrapper {
  text-transform: none;
  width: 100%;
  overflow: hidden;
  background: var(--main-color-two);
  padding: 0.5dvw 0;
}

/* The conveyor belt track */
.ticker-track {
  display: flex;
  white-space: nowrap; /* Forces all time slots to stay in one long horizontal line */
  width: max-content;
  /* Runs the CSS animation called 'scroll', lasting 25 seconds, infinitely, linearly */
  animation: scroll 120s linear infinite; 
}

/* The individual time text units */
.time-slot {
  font-family: "Bitcount";
  font-weight: 400;
  font-variation-settings: "slnt" 0, "CRSV" 0, "ELSH" 0, "ELXP" 0;
  font-size: 1.7dvw;
  margin-bottom: -0.2dvw;
  color: var(--main-color-one);
  white-space: pre;
  padding-left: 0dvw;
  /* Runs the text blinking animation */
  animation: terminal-blink 2s step-end infinite;
}

/* --- ANIMATION 1: Infinite Conveyor Belt --- */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Moves the track exactly halfway. Because the second half mirrors the first, 
       the loop snaps back to 0% completely invisibly, creating an endless loop */
    transform: translateX(-50%);
  }
}

/* --- ANIMATION 2: Terminal Cursor Blink --- */
@keyframes terminal-blink {
  0% {
    opacity: 1.0; /* Visible for the first 1 second (0% to 49%) */
  }
  51% {
    opacity: 0.3; /* Dimmed for the second 1 second (50% to 99%) */
  }
}