/* Ufer-Mixer auf /schmiede. Palette/Fonts via globale Variablen (site.css). */
:root { --c-water: #5B8CC2; }            /* Blauton für die Tiefe */

/* === Vollbild-Bühne: Punkte liegen auf dem Bild === */
.mx-hero {
  position: relative;
  width: 100%;
  height: 100svh;            /* Vollbild — voller Fokus auf die Schmiede */
  min-height: 540px;
  overflow: hidden;
  background: var(--c-black);
}
.mx-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.mx-hero__wash {                          /* dämpft das Bild für Lesbarkeit/Glühen */
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(13,36,48,.30), transparent 55%),
    linear-gradient(180deg, rgba(6,15,14,.45), rgba(6,15,14,.20) 40%, rgba(6,15,14,.70));
}
.mx-hero__fog { position: absolute; inset: 0; pointer-events: none; }

.mx-hero__head {
  /* Mitte des Titels liegt auf dem oberen Horizont (22%): obere Hälfte klar,
     untere Hälfte taucht unters Glas. z-index < .mx-stage(3), damit das
     Glas-Band die untere Hälfte verschwimmen lässt. Etwas nach rechts gerückt. */
  position: absolute; top: var(--mx-top, 22%); right: clamp(1.5rem, 12vw, 12rem);
  transform: translateY(-50%); text-align: right;
  pointer-events: none; z-index: 2;
}
.mx-hero__title {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .05em;
  color: var(--c-creme); font-size: clamp(34px, 7vw, 66px); margin: 0;
}

/* === Die interaktive Bühne (füllt den Hero) === */
.mx-stage {
  position: absolute; inset: 0; z-index: 3;
  touch-action: none; user-select: none;
}

/* Geometrie: Linie bei 58%, Band ± 36% -> oben 22%, unten 94%
   (muss zu LINE_FRAC/MAXDIST_FRAC in ufer-mixer.js passen). */
.mx-hero { --mx-line: 58%; --mx-top: 22%; --mx-bot: 94%; }

/* Das leichte Glas-Band zwischen den Horizonten: macht den Hintergrund
   ein klein wenig diffus + zeigt das „Kraftfeld" (warm oben, kühl unten). */
.mx-band {
  position: absolute; left: 0; right: 0; top: var(--mx-top);
  height: calc(var(--mx-bot) - var(--mx-top));
  pointer-events: none; z-index: 1;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  background: linear-gradient(180deg,
    rgba(199,167,101,.12) 0%,
    rgba(199,167,101,.03) 32%,
    rgba(6,15,14,0)       50%,
    rgba(91,140,194,.05)  68%,
    rgba(91,140,194,.15)  100%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* Drei Horizonte: Himmel (oben), Stille (Mitte), Grund (unten) */
.mx-h {
  position: absolute; left: 0; right: 0; height: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(199,167,101,.7), transparent);
}
.mx-h--top    { top: var(--mx-top); }
.mx-h--mid    { top: var(--mx-line); height: 2px;
                box-shadow: 0 0 18px rgba(199,167,101,.45); }
.mx-h--bottom { top: var(--mx-bot);
                background: linear-gradient(90deg, transparent, rgba(91,140,194,.7), transparent); }
.mx-h--top, .mx-h--bottom { animation: mxBreath 6s ease-in-out infinite; }
@keyframes mxBreath { 0%,100% { opacity:.5; } 50% { opacity:.9; } }

/* Glut-Aufblühen, wenn ein Punkt seinen Horizont erreicht (volle Lautstärke) */
.mx-bloom {
  position: absolute; width: 48px; height: 48px; transform: translate(-50%,-50%);
  border-radius: 50%; pointer-events: none; z-index: 5;
  mix-blend-mode: screen;                 /* additiv -> leuchtet übers Bild */
  background: radial-gradient(circle,
    rgba(255,240,205,.85) 0%, rgba(231,204,151,.6) 26%, rgba(199,167,101,0) 70%);
  animation: mxBloom 1050ms ease-out forwards;
}
.mx-bloom--cool {
  background: radial-gradient(circle,
    rgba(222,240,255,.85) 0%, rgba(150,196,240,.6) 26%, rgba(91,140,194,0) 70%);
}
@keyframes mxBloom {
  0%   { opacity: .9; transform: translate(-50%,-50%) scale(.3); }
  100% { opacity: 0;  transform: translate(-50%,-50%) scale(4.2); }
}

/* Der getroffene Horizont blitzt kurz auf */
.mx-h.is-struck { animation: mxStruck 700ms ease-out; }
@keyframes mxStruck {
  0%   { opacity: 1; filter: brightness(1.7); }
  100% { opacity: .5; filter: brightness(1); }
}
.mx-zone {
  position: absolute; right: 22px; font-family: var(--font-text);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  pointer-events: none;
}
.mx-zone--air  { top: calc(58% - 30px); color: var(--c-brass); }
.mx-zone--deep { top: calc(58% + 14px); color: var(--c-water); }
.mx-line-cap {
  position: absolute; left: 22px; top: calc(58% - 26px);
  font-family: var(--font-text); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--c-patina); pointer-events: none;
}

/* Punkte: nur Lichtpunkte, KEINE Textlabels */
.mx-pt {
  position: absolute; width: 54px; height: 54px; z-index: 4;
  transform: translate(-50%, -50%); cursor: grab; touch-action: none;
}
.mx-pt:active { cursor: grabbing; }
.mx-pt__core {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--c-brass);
  box-shadow: 0 0 0 4px rgba(199,167,101,.15),
              0 0 var(--glow, 8px) rgba(199,167,101,.7);
}
.mx-pt--water .mx-pt__core {
  background: var(--c-water);
  box-shadow: 0 0 0 4px rgba(91,140,194,.18),
              0 0 var(--glow, 8px) rgba(91,140,194,.85);
}
.mx-pt:focus-visible { outline: 2px solid var(--c-creme); outline-offset: 6px; }

/* „Gehärtet": Punkt am Horizont, volle Lautstärke — hellste Glut + Ring, pulsiert */
.mx-pt.is-forged .mx-pt__core {
  box-shadow: 0 0 0 2px rgba(243,238,225,.9),
              0 0 0 7px rgba(199,167,101,.28),
              0 0 44px 4px rgba(199,167,101,.95);
  animation: mxForge 1.8s ease-in-out infinite;
}
.mx-pt--water.is-forged .mx-pt__core {
  box-shadow: 0 0 0 2px rgba(207,224,242,.9),
              0 0 0 7px rgba(91,140,194,.32),
              0 0 44px 4px rgba(91,140,194,.95);
}
@keyframes mxForge { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }

/* Onboarding-Funke (Erstbesuch) */
.mx-pt.is-hint .mx-pt__core { animation: mxPulse 2.4s ease-in-out infinite; }
@keyframes mxPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(199,167,101,.15), 0 0 10px rgba(199,167,101,.6); }
  50%     { box-shadow: 0 0 0 7px rgba(199,167,101,.25), 0 0 26px rgba(199,167,101,.9); }
}

/* Steuer-Leiste unten Mitte: Zur Stille · Teilen */
.mx-controls {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 5; display: flex; gap: 14px; align-items: center;
}
.mx-share, .mx-reset, .mx-random {
  font-family: var(--font-text); font-size: 14px; letter-spacing: .12em;
  border-radius: 999px; padding: 10px 22px; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* Alle drei gleich: dezenter Rahmen, glänzt erst beim Hover ins Messing */
.mx-share, .mx-reset, .mx-random {
  color: var(--c-sand); background: rgba(6,15,14,.25);
  border: 1px solid rgba(199,167,101,.3);
}
.mx-share:hover, .mx-reset:hover, .mx-random:hover {
  color: var(--c-creme); border-color: var(--c-brass);
}
.mx-share.is-copied { color: var(--c-champagne); border-color: var(--c-champagne); }

/* sanftes Zurückgleiten zur Stille-Linie */
.mx-pt.is-settling { transition: left .6s ease, top .6s ease, opacity .6s ease; }

.mx-fallback {
  position: absolute; left: 50%; top: 55%; transform: translate(-50%,-50%);
  color: var(--c-sand); font-family: var(--font-text);
}

@media (prefers-reduced-motion: reduce) {
  .mx-pt.is-hint .mx-pt__core { animation: none; }
  .mx-pt.is-forged .mx-pt__core { animation: none; }
  .mx-h--top, .mx-h--bottom { animation: none; opacity: .7; }
  .mx-h.is-struck { animation: none; }
}