/* ======================
   Base layout (sticky footer)
   ====================== */
html, body { height: 100%; }

body{
  margin:0;
  background:#0b0f14;
  color:#fff;
  font-family:Arial, Helvetica, sans-serif;

  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* main fills remaining height so footer sticks to bottom */
main{
  flex:1;
  position:relative;

  /* Fill unused space with the hero art so “empty” looks intentional */
  background: url("../img/hero-403.jpg") no-repeat center center;
  background-size: cover;
}

/* Optional dark edge vignette to keep footer readable */
main::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(1200px 700px at 50% 20%,
    rgba(0,0,0,0) 0%,
    rgba(11,15,20,.70) 70%);
}

/* ======================
   Header
   ====================== */
.header{
  padding:16px 20px;
  font-size:32px;
  letter-spacing:.2em;
}

/* Brand link styling */
.header a,
.header a:visited,
.header a:hover,
.header a:active{
  color:#fff;
  text-decoration:none;
}
.header a:hover{ opacity:.85; }

/* ======================
   Hero wrapper
   ====================== */
.hero{
  position:relative;
  text-align:center;
}

/* Desktop/tablet: cinematic crop */
.glitch-wrap{
  position:relative;
  overflow:hidden;
  height: clamp(320px, 55vh, 720px);
}

/* Base image fills hero area */
.glitch-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  position:relative;
  z-index:1;
}

/* Title overlay (desktop/tablet) */
.glitch-wrap h1{
  position:absolute;
  left:0;
  right:0;
  bottom:18px;
  margin:0;
  padding:0 16px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size: clamp(26px, 5vw, 48px);
  z-index:3;
  text-shadow: 0 10px 30px rgba(0,0,0,.6);
}

/* Fade behind title */
.glitch-wrap .hero-fade{
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
  z-index:2;
  pointer-events:none;
}

/* ======================
   Center Logo (on top of hero)
   ====================== */
.center-logo{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  pointer-events:none;
}

.center-logo img{
  width:min(78vw, 720px);
  height:auto;
  opacity:.92;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.65));
}

/* ======================
   Glitch layers (relative to /assets/css/site.css)
   ====================== */
.glitch-wrap::before,
.glitch-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background: url("../img/hero-403.jpg") no-repeat center / cover;
  pointer-events:none;
  z-index:2;
  opacity:0;
}

/* Red channel */
.glitch-wrap::before{
  mix-blend-mode: screen;
  filter: hue-rotate(-25deg) saturate(1.6);
  animation: glitch-red 2.2s infinite;
}

/* Blue channel + scanlines */
.glitch-wrap::after{
  mix-blend-mode: screen;
  filter: hue-rotate(185deg) saturate(1.8);
  animation: glitch-blue 3.1s infinite, scanlines 10s linear infinite;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 50%, rgba(0,0,0,0.03) 50%),
    url("../img/hero-403.jpg");
  background-size: 100% 3px, cover;
  background-position: 0 0, center;
  background-repeat: repeat, no-repeat;
}

/* Subtle always-on presence */
.glitch-wrap::before,
.glitch-wrap::after{ opacity:.35; }

/* Glitch keyframes */
@keyframes glitch-red{
  0%,70%,100%{ opacity:0; transform:none; }
  71%{ opacity:.35; transform:translate(-6px,2px); }
  72%{ opacity:.25; transform:translate(5px,-2px); }
  73%{ opacity:0; transform:none; }
}

@keyframes glitch-blue{
  0%,75%,100%{ opacity:0; transform:none; }
  76%{ opacity:.30; transform:translate(6px,-2px); }
  77%{ opacity:.20; transform:translate(-4px,2px); }
  78%{ opacity:0; transform:none; }
}

@keyframes scanlines{
  0%{ background-position:0 0, center; }
  100%{ background-position:0 100%, center; }
}

/* ======================
   Audio Dock (desktop/tablet)
   ====================== */
.audio-dock{
  position:absolute;
  right:18px;
  bottom:16px;
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(11,15,20,.55);
  backdrop-filter: blur(6px);
  border-radius:14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  max-width: 320px;
}

.audio-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(255,255,255,.75);
}

.audio-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(255,45,85,.9);
  box-shadow: 0 0 18px rgba(255,45,85,.55);
}

.audio-dock audio{
  width: 300px;
  height: 34px;
  display:block;
  opacity: .92;
}

/* ======================
   Statement / Footer
   ====================== */
.statement{
  padding:40px;
  text-align:center;
}

.footer{
  padding:20px;
  color:#999;
  text-align:center;
  font-size:12px;
}

/* ======================
   Mobile (single, non-conflicting block)
   - show whole hero image
   - stack title and audio below image
   ====================== */
@media (max-width: 600px){

  .header{
    padding:14px 16px;
    font-size:28px;
  }

  /* Let hero size to image */
  .glitch-wrap{
    height:auto;
  }

  .glitch-wrap img{
    height:auto;
    object-fit:contain;
    object-position:center;
  }

  /* Make overlays match contain */
  .glitch-wrap::before,
  .glitch-wrap::after{
    background-size: contain;
    background-position: center;
  }
  .glitch-wrap::after{
    background-size: 100% 3px, contain;
  }

  /* Title: move below the image */
  .glitch-wrap h1{
    position:relative;
    bottom:auto;
    margin: 14px 0 0;
    padding: 0 16px;
    font-size: 22px;
    letter-spacing:.18em;
  }

  /* Fade unnecessary when title is below */
  .hero-fade{ display:none; }

  /* Center logo: slightly smaller */
  .center-logo img{
    width:min(86vw, 520px);
  }

  /* Audio: move below content and center */
  .audio-dock{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    transform:none;
    margin: 14px auto 0;
    width: min(92vw, 360px);
  }
  .audio-dock audio{ width:100%; }
}

/* Queue */
.queue{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
  max-height: 140px;
  overflow:auto;
  padding-right: 4px;
}

.queue-item{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.85);
  border-radius:10px;
  padding:8px 10px;
  text-align:left;
  cursor:pointer;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.queue-item:hover{ opacity:.9; }

.queue-item.is-active{
  border-color: rgba(255,45,85,.35);
  background: rgba(255,45,85,.10);
  color:#fff;
}

/*
.queue::before{
  content:"scroll";
  position: sticky;
  bottom: 6px;
  margin-left: auto;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(11,15,20,.55);
  color: rgba(255,255,255,.65);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: none;
}
*/

/*BELOW HERO*/
.below-hero{
  padding: 26px 18px 10px;
  text-align:center;
}

.links{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom: 14px;
}

.pill{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.pill:hover{ opacity:.9; }

.tagline{
  margin: 8px 0 0;
  color: white;
  letter-spacing:.08em;
  text-transform:uppercase;
}