/* Geometrie-Animationen */

.geo-anim {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.geo-anim canvas {
  display: block;
  width: 100%;
  height: var(--geo-h, 420px);
  touch-action: none;
  border-radius: var(--radius);
}
.geo-anim--framed canvas {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--line);
}
.geo-anim figcaption {
  font-size: .9rem;
  color: var(--muted);
}
.geo-anim figcaption strong { color: var(--text); font-weight: 600; }
.geo-anim.is-error canvas { display: none; }

.geo-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font: 500 .8rem/1.2 var(--font-mono);
  color: var(--muted);
}
.geo-ctl--range { display: inline-flex; align-items: center; gap: 8px; }
.geo-ctl--range input { width: 150px; accent-color: var(--ink); }
.geo-ctl--range output { min-width: 3.5em; color: var(--text); }
.geo-ctl--seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ink-line); border-radius: var(--radius); overflow: hidden; }
.geo-ctl--seg button, .geo-ctl--btn {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 0; padding: 7px 11px; cursor: pointer; min-height: 32px;
}
.geo-ctl--seg button + button { border-left: 1px solid var(--ink-line); }
.geo-ctl--seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.geo-ctl--btn { border: 1px solid var(--ink-line); border-radius: var(--radius); }
.geo-ctl--seg button:hover, .geo-ctl--btn:hover { background: var(--ink-soft); }
.geo-ctl--seg button[aria-pressed="true"]:hover { background: var(--ink-strong); }
.geo-ctl--seg button:focus-visible, .geo-ctl--btn:focus-visible, .geo-ctl--range input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.geo-ctl--note { font-family: var(--font-sans); font-weight: 400; }

/* Hero-Animationen sind Dekoration: Scrollen auf Touch-Geräten nicht blockieren */
.hero__art .geo-anim canvas, .archive-head__art .geo-anim canvas, .error-page__art .geo-anim canvas { touch-action: auto; pointer-events: none; }

/* „Vom Riss zum Raum“: gerendertes Video/Standbild unter der Linienzeichnung */
.geo-anim .raum-media {
  position: absolute; z-index: 0; display: block; pointer-events: none;
  object-fit: fill; background: transparent;
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, #000 62%, transparent 100%);
  transition: opacity .2s linear;
}
.geo-anim[data-anim="raum"] canvas { position: relative; z-index: 1; }
.geo-anim .raum-paper { background: var(--paper); }