@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --night: #17100b;
  --den: #24170f;
  --orange: #f57a0d;
  --orange-bright: #ff9a3d;
  --cream: #fbeedd;
  --muted: #bda58e;
  --line: #4a3122;
  --live: #ff4b2b;
  --pink: #ff3d8b;
  --cyan: #2bd9e8;
  --yellow: #ffd23d;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: radial-gradient(120% 80% at 50% 38%, var(--den) 0%, var(--night) 68%);
  background-color: var(--night);
  color: var(--cream);
  font-family: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  text-align: center;
  overflow-x: clip;
}

/* Status-Plakette */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(14px, 3vh, 26px);
  padding: 6px 14px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.badge-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}

body:not([data-state="offline"]) .badge {
  border-color: color-mix(in srgb, var(--live) 55%, transparent);
  color: var(--cream);
}

body:not([data-state="offline"]) .badge-dot {
  background: var(--live);
  animation: blink 1.6s ease-in-out infinite;
}

/* Fuchs im Bau */
.burrow {
  position: relative;
  width: min(68vw, 38vh, 320px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.arcs {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.arc {
  fill: none;
  stroke: var(--line);
  stroke-linecap: round;
  transform-origin: 200px 200px;
  transition: stroke .5s ease;
}

.arc-outer { stroke-width: 5; }
.arc-inner { stroke-width: 3; }

.fox {
  width: 66%;
  filter: saturate(.72) brightness(.82);
  transition: filter .6s ease, transform .6s ease;
  transform: translateY(5%) rotate(-3deg);
}

.eyes-open { display: none; }
.ear { transform-box: fill-box; }
.ear-left { transform-origin: 70% 100%; }
.ear-right { transform-origin: 30% 100%; }

body:not([data-state="offline"]) .fox {
  filter: none;
  transform: none;
}

body:not([data-state="offline"]) .eyes-open { display: inline; }
body:not([data-state="offline"]) .eyes-closed { display: none; }
body:not([data-state="offline"]) .arc { stroke: var(--orange); }

/* Party, solange wirklich Ton laeuft. Alles im selben Takt: 120 BPM, also .5s pro Schlag */
.burrow::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: conic-gradient(var(--pink) 0 12%, transparent 12% 33%, var(--cyan) 33% 45%, transparent 45% 66%, var(--yellow) 66% 78%, transparent 78%);
  filter: blur(26px);
  opacity: 0;
  transition: opacity .8s ease;
}

body[data-state="playing"] .burrow::before {
  opacity: .34;
  animation: turn 6s linear infinite;
}

body[data-state="playing"] .arc-outer { animation: turn 12s linear infinite, party-stroke 4s linear infinite; }
body[data-state="playing"] .arc-inner { animation: turn 8s linear infinite reverse, party-stroke 4s linear -2s infinite; }
body[data-state="playing"] .fox {
  transform-origin: 50% 90%;
  animation: headbang 1s ease-in-out infinite;
}
body[data-state="playing"] .ear { animation: flap .5s ease-in-out infinite alternate; }
body[data-state="playing"] .play { animation: pulse-ring 1s ease-out infinite; }

.shades {
  opacity: 0;
  transform: translateY(-70px);
  transition: transform .55s cubic-bezier(.3, 1.6, .5, 1), opacity .2s ease;
}

body[data-state="playing"] .shades {
  opacity: 1;
  transform: none;
}

.notes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.notes span {
  position: absolute;
  top: 40%;
  left: var(--left);
  font-size: var(--size);
  line-height: 1;
  color: var(--tint);
  opacity: 0;
}

body[data-state="playing"] .notes span { animation: note-rise 4s ease-out var(--delay) infinite; }

.notes span:nth-child(1) { --left: 12%; --size: 10cqw; --x: -5cqw; --y: -36cqw; --tint: var(--pink);   --delay: 0s; }
.notes span:nth-child(2) { --left: 80%; --size: 12cqw; --x: 6cqw;  --y: -38cqw; --tint: var(--cyan);   --delay: -.66s; }
.notes span:nth-child(3) { --left: 22%; --size: 8cqw;  --x: 4cqw;  --y: -32cqw; --tint: var(--yellow); --delay: -1.33s; }
.notes span:nth-child(4) { --left: 70%; --size: 9cqw;  --x: -4cqw; --y: -34cqw; --tint: var(--pink);   --delay: -2s; }
.notes span:nth-child(5) { --left: 6%;  --size: 9cqw;  --x: 3cqw;  --y: -30cqw; --tint: var(--cyan);   --delay: -2.66s; }
.notes span:nth-child(6) { --left: 88%; --size: 8cqw;  --x: -3cqw; --y: -32cqw; --tint: var(--yellow); --delay: -3.33s; }

/* Schlaf-Zzzz, nur solange keine Sendung laeuft */
.burrow { container-type: inline-size; }

body[data-state="offline"] .fox { animation: breathe 5s ease-in-out infinite; }

.zzz {
  position: absolute;
  top: 28%;
  left: 60%;
  font-weight: 800;
  line-height: 1;
}

.zzz span {
  position: absolute;
  font-size: var(--size);
  color: var(--orange-bright);
  text-shadow: 0 0 .25em color-mix(in srgb, var(--orange) 35%, transparent);
  opacity: 0;
  animation: snooze 9s ease-in-out var(--delay) infinite;
  will-change: transform, opacity;
}

.zzz span:nth-child(1) { --size: 7cqw;  --x: 22cqw; --y: -28cqw; --tilt: 10deg;  --delay: 0s; }
.zzz span:nth-child(2) { --size: 9cqw;  --x: 26cqw; --y: -32cqw; --tilt: -8deg;  --delay: -1.8s; }
.zzz span:nth-child(3) { --size: 6cqw;  --x: 18cqw; --y: -30cqw; --tilt: 12deg;  --delay: -3.6s; }
.zzz span:nth-child(4) { --size: 11cqw; --x: 30cqw; --y: -30cqw; --tilt: -10deg; --delay: -5.4s; }
.zzz span:nth-child(5) { --size: 8cqw;  --x: 24cqw; --y: -34cqw; --tilt: 8deg;   --delay: -7.2s; }

body:not([data-state="offline"]) .zzz { display: none; }

/* Text */
h1 {
  margin: clamp(10px, 2.4vh, 22px) 0 6px;
  font-size: clamp(2.3rem, 9vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--orange);
}

.status {
  max-width: 34ch;
  min-height: 2.8em;
  margin: 0 0 clamp(14px, 2.6vh, 24px);
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.4;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* Play-Button */
.play {
  position: relative;
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: var(--night);
  cursor: pointer;
  transition: transform .15s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.play:hover:not(:disabled) { background: var(--orange-bright); transform: scale(1.05); }
.play:active:not(:disabled) { transform: scale(.96); }
.play:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }

.play:disabled {
  background: var(--den);
  color: var(--line);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: not-allowed;
}

.icon { grid-area: 1 / 1; width: 38px; height: 38px; fill: currentColor; }
.icon-stop, .spinner { display: none; }

body[data-state="playing"] .icon-play,
body[data-state="connecting"] .icon-play { display: none; }
body[data-state="playing"] .icon-stop { display: block; }

body[data-state="connecting"] .spinner {
  display: block;
  grid-area: 1 / 1;
  width: 34px;
  height: 34px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes blink { 50% { opacity: .35; } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes headbang {
  0%, 100% { transform: rotate(-7deg); }
  25%, 75% { transform: translateY(5%) rotate(0); }
  50% { transform: rotate(7deg); }
}
@keyframes flap { to { transform: rotate(5deg); } }
@keyframes party-stroke {
  0%, 100% { stroke: var(--orange); }
  33% { stroke: var(--pink); }
  66% { stroke: var(--cyan); }
}
@keyframes pulse-ring {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--orange) 55%, transparent); }
  to { box-shadow: 0 0 0 20px transparent; }
}
@keyframes note-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.6) rotate(-14deg); }
  15% { opacity: 1; }
  50% { transform: translate(calc(var(--x) * -.6), calc(var(--y) * .5)) scale(.9) rotate(12deg); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.1) rotate(-10deg); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes snooze {
  0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(calc(var(--tilt) * -1)) skewX(-8deg); }
  14% { opacity: 1; }
  38% { transform: translate(calc(var(--x) * .46), calc(var(--y) * .38)) scale(.62) rotate(var(--tilt)) skewX(-8deg); }
  66% { opacity: .85; transform: translate(calc(var(--x) * .6), calc(var(--y) * .72)) scale(.86) rotate(calc(var(--tilt) * -.6)) skewX(-8deg); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.1) rotate(var(--tilt)) skewX(-8deg); }
}
@keyframes breathe {
  0%, 100% { transform: translateY(5%) rotate(-3deg) scale(1); }
  50% { transform: translateY(4%) rotate(-3deg) scale(1.02); }
}
@keyframes twitch {
  0%, 82%, 100% { transform: rotate(0); }
  88% { transform: rotate(-6deg); }
  94% { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .zzz span {
    opacity: .75;
    transform: translate(calc(var(--x) * .7), calc(var(--y) * .7)) rotate(var(--tilt));
  }

  .zzz span:nth-child(n+4) { display: none; }
}