/* Deeby Essef Records — Experiential Site */
:root{
  --bg:#0a0b0d;
  --fg:#e6e6e6;
  --muted:#9aa0a6;
  --accent:#76ffb5;
  --accent-2:#ff4d6d;
  --line:#14161a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color:var(--fg);
  background: radial-gradient(1200px 800px at 50% 20%, #101218, var(--bg));
  overflow:hidden;
}

#stage{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  background: radial-gradient(1200px 800px at 50% 20%, #0d0f14, #040506);
}

.hud{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  justify-content:space-between;
  pointer-events:none;
  padding:20px;
}

.brand{pointer-events:auto; user-select:none;}
.brand img{width:64px; height:64px; opacity:.9; filter:drop-shadow(0 0 12px rgba(118,255,181,.25));}
.brand .tag{margin:.25rem 0 0; color:var(--muted); letter-spacing:.12em; font-size:.78rem}

h1{margin:.25rem 0 0; font-size: clamp(1.6rem, 3.5vw, 3rem); letter-spacing:.06em}

.glitch{
  position:relative; display:inline-block;
  text-shadow: -2px 0 var(--accent), 2px 0 var(--accent-2);
  animation:glow 2.5s ease-in-out infinite alternate;
}
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%; overflow:hidden;
}
.glitch::before{ clip-path: inset(0 0 50% 0); transform: translate(-1px, -1px); color:var(--accent); mix-blend-mode:screen; opacity:.6}
.glitch::after{ clip-path: inset(50% 0 0 0); transform: translate(1px, 1px); color:var(--accent-2); mix-blend-mode:screen; opacity:.6}
@keyframes glow{
  from{ filter: drop-shadow(0 0 0 rgba(118,255,181,.0)); }
  to{ filter: drop-shadow(0 0 18px rgba(118,255,181,.35)); }
}

.controls{
  align-self:center; text-align:center; margin-top:6vh; pointer-events:auto;
  background: linear-gradient(180deg, rgba(7,9,12,.6), rgba(7,9,12,.2));
  border:1px solid var(--line);
  border-radius:14px;
  backdrop-filter: blur(6px);
  padding:16px 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.controls .row{margin:.6rem 0}
.controls .row.small{opacity:.9}
button{
  appearance:none; border:none; border-radius:999px; padding:.7rem 1.1rem;
  background:#0f1216; color:var(--fg);
  border:1px solid var(--line);
  cursor:pointer; transition: transform .08s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
button:hover{ transform: translateY(-1px); border-color:#1e232b;}
button:active{ transform: translateY(0); }
button.primary{ background:linear-gradient(180deg, #10151c, #0a0d12); border-color:#202833; box-shadow: inset 0 0 0 1px #2c3645 }
button.primary:hover{ box-shadow: inset 0 0 0 1px #3a475a; }
.mode{ margin:0 .25rem }
.mode.active{ color:#0e1a13; background:var(--accent); border-color:transparent; }

.hint{font-size:.8rem; color:var(--muted); margin:.25rem 0 0}

footer{
  pointer-events:auto;
  font-size:.85rem; color:var(--muted);
}
.links a{ color:var(--muted); margin-right:14px; text-decoration:none; border-bottom:1px dotted transparent; }
.links a:hover{ color:var(--fg); border-color:var(--fg); }

.noscript{
  position:fixed; bottom:0; left:0; right:0;
  background:#111; color:#fff; padding:10px 14px; text-align:center;
  border-top:1px solid #222;
}

/* Responsive */
@media (max-width: 720px){
  .controls{width:calc(100% - 24px); margin-top:4vh}
  .brand img{width:48px; height:48px}
}