/*
 * Die spielbare Demo im Hero.
 *
 * Diese Regeln lagen in public/css/experience.css — dem Stylesheet des
 * **vorherigen** Home-Layouts (.experience-home). Beim Umbau auf .orbit-home
 * wurde jenes Stylesheet aus dem Head genommen, die Demo-Regeln darin waren
 * aber ungescoped und damit die einzigen, die das neue Layout noch brauchte.
 * Ergebnis: die Demo rendert als roher Text, das Telefon als leerer Rahmen,
 * und weil die Kanalknoepfe und der Startknopf ihre absolute Lage verloren,
 * war sie nicht mehr spielbar. Das zugehoerige public/js/experience.js war die
 * ganze Zeit eingebunden — es fand nur nichts Bedienbares vor.
 *
 * Deshalb stehen sie jetzt hier, in einer Datei, die zum aktuellen Layout
 * gehoert und im Head steht.
 */

:root {
  --void: #04030c;
  --frost: #eef7ff;
  --cyan: #7ad8ff;
  --solar: #ff7a2d;
}

.hero-demo { position: relative; align-self: center; width: min(100%, 360px); justify-self: end; perspective: 1200px; z-index: 4; }
.demo-meta {
  display: flex; justify-content: space-between; margin: 0 10px 12px;
  color: rgba(238, 247, 255, 0.7);
  font: 600 10px/1 'Chakra Petch', sans-serif; letter-spacing: 0.18em;
}
.demo-meta span:first-child { display: flex; align-items: center; gap: 7px; }
.demo-meta i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
  animation: demoBlink 1.6s ease-in-out infinite;
}
.demo-phone {
  position: relative; width: 100%; aspect-ratio: 9 / 18.7; padding: 11px;
  border: 1px solid rgba(200, 230, 255, 0.38);
  border-radius: 42px;
  background: linear-gradient(160deg, #1a2436, #04030c 58%);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.65),
    0 0 40px rgba(122, 216, 255, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.22);
  transform: rotateY(calc(var(--tilt-x, 0) * 1deg)) rotateX(calc(var(--tilt-y, 0) * 1deg));
  transition: transform 0.25s ease, box-shadow 0.4s ease;
}
.demo-phone::before {
  content: '';
  position: absolute; inset: -10px; z-index: -1;
  border-radius: 50px;
  border: 1px solid rgba(255, 122, 45, 0.18);
}
.demo-phone__speaker {
  position: absolute; z-index: 4; top: 19px; left: 50%;
  width: 66px; height: 5px; border-radius: 8px;
  transform: translateX(-50%); background: #020407;
}
.demo-phone__screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 32px; background: #04030c;
}
.demo-phone__screen img,
.demo-phone__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.demo-phone__screen img { opacity: 0.86; }
.demo-phone__screen iframe { z-index: 2; opacity: 0; pointer-events: none; background: #06040f; transition: opacity 0.35s ease; }
.hero-demo.is-active iframe { opacity: 1; pointer-events: auto; }
/* Der Akzent folgt dem gewaehlten Level. Ohne eigene Regel liefe Leerenbluete
   auf dem Aurora-Cyan des Standards und passte nicht zur violetten Welt. */
.hero-demo { --demo-accent: var(--cyan); --demo-orb: var(--solar); }
.hero-demo:has(.demo-level[data-demo-choice="w9-l08"].is-selected) { --demo-accent: #a86bff; --demo-orb: #ff6bd5; }
.hero-demo:has(.demo-level[data-demo-choice="w2-l03"].is-selected) { --demo-accent: #ff7a2f; --demo-orb: #ffd27a; }
.hero-demo:has(.demo-level[data-demo-choice="w3-l03"].is-selected) { --demo-accent: #ff5ee5; --demo-orb: #61eaff; }
.hero-demo.is-active .demo-launch-panel,
.hero-demo.is-active .demo-phone__screen img { opacity: 0; pointer-events: none; }
.demo-launch-panel {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 46px 18px 28px;
  background: radial-gradient(circle, rgba(6, 20, 34, 0.12), rgba(4, 3, 12, 0.72));
  transition: opacity 0.25s;
}
.demo-launch {
  display: flex; width: 100%; min-height: 58px; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  border: 1px solid color-mix(in srgb, var(--demo-accent) 55%, transparent);
  border-radius: 999px;
  background: linear-gradient(110deg, rgba(255, 122, 45, 0.18), rgba(61, 159, 216, 0.16));
  box-shadow: 0 0 24px color-mix(in srgb, var(--demo-accent) 16%, transparent);
}
.demo-launch:hover, .demo-launch:focus-visible { border-color: var(--demo-accent); }
.demo-launch strong { font: 700 14px/1 'Chakra Petch', sans-serif; letter-spacing: 0.19em; color: var(--frost); }
.demo-launch small { color: rgba(237, 248, 255, 0.68); font-size: 12px; }
.demo-launch__orbit {
  position: relative; width: 72px; height: 72px; margin-bottom: 2px;
  border: 1px solid color-mix(in srgb, var(--demo-accent) 60%, transparent);
  border-radius: 50%; animation: demoSpin 5s linear infinite;
}
.demo-launch__orbit::after { content: ''; position: absolute; inset: 12px; border: 1px dashed rgba(255, 122, 45, 0.45); border-radius: 50%; }
.demo-launch__orbit i { position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%; transform: translateY(-50%); box-shadow: 0 0 22px currentColor; }
.demo-launch__orbit i:first-child { left: -7px; color: var(--demo-accent); background: var(--demo-accent); }
.demo-launch__orbit i:last-child { right: -7px; color: var(--demo-orb); background: var(--demo-orb); }
.demo-levels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; width: 100%; }
.demo-level {
  min-width: 0; min-height: 55px; padding: 8px 4px;
  border: 1px solid rgba(171, 210, 235, 0.18); border-radius: 14px;
  background: rgba(4, 3, 12, 0.76); color: rgba(237, 248, 255, 0.58); text-align: center;
}
.demo-level span, .demo-level small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-level span { font: 700 11px/1.15 'Chakra Petch', sans-serif; letter-spacing: 0.1em; }
.demo-level small { margin-top: 5px; font: 600 7px/1 'Chakra Petch', sans-serif; }
.demo-level.is-selected {
  border-color: var(--demo-accent); color: var(--frost);
  background: color-mix(in srgb, var(--demo-accent) 13%, rgba(4, 3, 12, 0.9));
}
.demo-level:focus-visible { outline: 2px solid var(--frost); outline-offset: 2px; }
@media (max-width: 360px) {
  .demo-level { padding: 8px 2px; }
  .demo-level span { font-size: 9px; letter-spacing: 0.04em; }
  .demo-levels { gap: 5px; }
}
.demo-status {
  margin-top: 14px; text-align: center; color: rgba(237, 248, 255, 0.54);
  font: 600 10px/1.4 'Chakra Petch', sans-serif; letter-spacing: 0.15em; text-transform: uppercase;
}
.demo-close {
  position: absolute; z-index: 5; top: 34px; right: 18px; display: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(4, 3, 12, 0.86); border: 1px solid rgba(122, 216, 255, 0.32); font-size: 22px;
}
.hero-demo.is-active .demo-close { display: grid; place-items: center; }
@keyframes demoSpin { to { transform: rotate(360deg); } }
@keyframes demoBlink { 50% { opacity: 0.28; } }