/* Startseite: Wolken-Loop, Hund, beschnittene Zahn-Ebenen, Ende-Übergang, Hilfe */

body.start { height: var(--vh, 100dvh); overflow: hidden; }

/* ------------------------------ Hintergrund ------------------------------- */
.bg { position: fixed; inset: 0; z-index: 0; background: var(--cloud-bg, #c3ccd4); }
#loop {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s linear;
}
#loop.bereit { opacity: 1; }        /* erst zeigen, wenn ein Bild da ist — kein Weißblitzen */
body.novideo #loop { display: none; }
/* Fallback, falls das Video im Browser nicht will: weicher Himmel-Verlauf */
body.novideo .bg {
  background: radial-gradient(120% 90% at 50% 100%, #cfd7e6 0%, #8f9bb3 45%, #2b3040 100%);
}

/* --------------------------------- Hund ----------------------------------- */
.stage { position: absolute; z-index: 10; margin: 0; }
#dog, #dogHover {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  user-select: none; -webkit-user-drag: none; -webkit-user-select: none;
}
/* Fassung ohne Titel wird nur für den Hover-Moment eingeblendet */
#dogHover { opacity: 0; }
.stage.swap #dogHover { opacity: 1; }
.stage.swap #dog { opacity: 0; }

/* ------------------------------ Zähne ------------------------------------- */
#teeth { position: absolute; inset: 0; }

/* Eine Ebene = nur der Zahn (Ausschnitt wird in JS berechnet) -> wächst am Ort. */
.tooth {
  position: absolute;
  background-repeat: no-repeat;            // background-size/-position kommen aus JS
  pointer-events: none;                    // nur die .hit-Fläche reagiert
  transform-origin: 50% 50%;               // Zahnmitte
  transition: transform var(--speed, 320ms) cubic-bezier(.2,.9,.25,1);
  will-change: transform;
}
.tooth.on { transform: scale(var(--s, 1.28)) rotate(var(--tilt, 0deg)); z-index: 60; }

.hit {
  position: absolute; display: block;
  pointer-events: auto; cursor: pointer;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Nur markieren statt wachsen */
body.mode-highlight .tooth { display: none; }
body.mode-highlight .hit:hover,
body.mode-highlight .hit:focus-visible {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* --------------------------- Ende-Video ----------------------------------- */
#endwrap {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg); opacity: 0; pointer-events: none;
}
#endv { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------- Editier-Hilfe (Taste E) ------------------------ */
body.edit .stage { outline: 1px dashed color-mix(in oklab, var(--accent) 70%, transparent); }
body.edit .hit {
  outline: 1px dashed var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
}
body.edit #teeth::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: linear-gradient(to right, rgba(255,90,43,.35) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,90,43,.35) 1px, transparent 1px);
  background-size: 10% 10%;
}
#hud {
  position: fixed; z-index: 70; top: var(--edge); right: var(--edge); display: none;
  max-width: 46vw; padding: 10px 12px;
  border: 1px solid #3a3d44; border-radius: 8px; background: #0b0c0ee6;
  font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre; color: #cfe;
}
body.edit #hud { display: block; }

/* ------------------------------- Diagnose --------------------------------- */
#diag {
  position: fixed; z-index: 75; left: var(--edge); bottom: var(--edge);
  padding: 10px 12px; border: 1px solid #3a3d44; border-radius: 8px;
  background: #0b0c0ee6; color: #9fe;
  font: 11.5px/1.45 ui-monospace, Consolas, monospace; white-space: pre;
}
#diag[hidden] { display: none; }