:root{
  --bg: #0f1216;
  --panel: #141922;
  --text: #e9eef6;
  --muted: #93a0b4;

  /* Accent palette (pedal-friendly) */
  --accent: #ffd166;     /* warm highlight */
  --accent2: #77d4ff;    /* cool glow */
  --ring: rgba(255, 209, 102, 0.35);

  /* Pedal color (DS-1 inspired, not identical branding) */
  --pedal: #ff8a2b;
  --pedalShadow: rgba(0,0,0,0.55);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);

  background:
    /* vignette (keep this for focus) */
    radial-gradient(
      1200px 700px at 50% 35%,
      rgba(0,0,0,0.10),
      rgba(0,0,0,0.55)
    ),

    /* MUCH lighter tonal wash */
    linear-gradient(
      180deg,
      rgba(10,12,14,0.35),
      rgba(10,12,14,0.60)
    ),

    /* amp image */
    url("images/Vox.JPEG");

  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}





/* Center everything */
main{
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* Splash container */
.splash{
  width: min(780px, 92vw);
  padding: 24px 16px;
  text-align: center;
}


/* Top “system online” line */
.kicker{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: rgba(147,160,180,0.95);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(255,209,102,0.6);
}

/* Title + subtitle */
h1{
  margin: 0 0 10px;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.02em;
  font-weight: 800;
}

.sub{
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* Footer strip */
.footer{
  margin-top: 22px;
  color: rgba(147,160,180,0.80);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* =========================
   Clickable Pedal (SVG Button)
   ========================= */

.pedal{
  display: inline-grid;
  gap: 14px;
  place-items: center;
  width: min(340px, 78vw);
  margin: 6px auto 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pedal svg{
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 40px var(--pedalShadow));
  transform: translateY(0);
  transition: transform 140ms ease, filter 140ms ease;
}

.pedal:hover svg{
  transform: translateY(-2px);
  filter: drop-shadow(0 22px 52px rgba(0,0,0,0.60));
}

.pedal:active svg{
  transform: translateY(0px) scale(0.995);
}

.pedal:focus-visible{
  outline: none;
}

.pedal:focus-visible svg{
  box-shadow: 0 0 0 4px var(--ring);
  border-radius: 18px;
}

/* Text hint under pedal */
.pedalHint{
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(147,160,180,0.95);
}

/* Optional: when audio is ON, add class .isOn to body or pedal */
.pedal.isOn .pedalHint{
  color: rgba(255, 209, 102, 0.95);
}

/* Smaller screens */
@media (max-width: 420px){
  .splash{ padding: 34px 20px; }
  .sub{ font-size: 14px; }
}
/* Pedal “engaged” state */
.pedal.isOn svg{
  filter: drop-shadow(0 20px 55px rgba(0,0,0,0.60));
}

/* Footswitch press illusion using SVG targeting */
.pedal.isOn #switchInner{
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(2px) scale(0.985);
}

.pedal.isOn #switchOuter{
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(1px);
}

/* Smooth transforms for SVG elements */
#switchInner, #switchOuter{
  transition: transform 120ms ease;
}

/* LED glow (works because fill changes in JS) */
.pedal.isOn #led{
  filter: drop-shadow(0 0 12px rgba(255, 60, 60, 0.75));
}