/* 3D-Bilderspirale „Bisherige Projekte" — dunkle Bühne im Stil der Vorlage
   (LENA VOSS / pacomepertant.com), in unsere Palette übersetzt:
   Tiefgrün statt Schwarz, Elfenbein statt Weiß, Gold als Akzent. */

.sp-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  background: #0F2721;
  overflow: hidden;
}

.sp-canvas, .sp-canvas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.sp-canvas canvas { cursor: grab; }
.sp-greift .sp-canvas canvas { cursor: grabbing !important; }

/* Großer Titel über dem Canvas — mix-blend-mode: difference wie in der
   Vorlage: die Karten scheinen durch die Schrift hindurch. */
.sp-titel {
  position: absolute;
  left: 50%; bottom: 4vh;
  transform: translateX(-50%);
  display: flex;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: difference;
  color: var(--ivory, #FAF7F0);
  font: 500 clamp(4.2rem, 13vw, 11rem)/0.95 var(--serif);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;               /* Buchstaben steigen aus der Unterkante auf */
  padding-top: .08em;
}
.sp-titel span {
  display: inline-block;
  /* Startlage (unten, verdeckt) setzt spirale.js per gsap.set(yPercent) —
     ein CSS-translateY(%) würde GSAP als Pixelwert lesen und nie auflösen. */
}
.sp-titel .ar {
  font-size: .5em;
  align-self: center;
  margin-left: .35em;
}

.sp-unterzeile {
  position: absolute;
  left: 50%; bottom: 2.2vh;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  font: 500 .62rem var(--mono);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, .55);
  opacity: 0;
  white-space: nowrap;
}

/* Kopfleiste: Zähler links, Umschalter rechts */
.sp-kopf {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Oben Platz lassen: die klebende Hauptnavigation liegt beim Pinnen
     über der Bühne und würde Zähler und Umschalter sonst verdecken. */
  padding: clamp(5.4rem, 7rem, 12vh) clamp(1.2rem, 4vw, 3rem) 0;
  z-index: 4;
  opacity: 0;
}
.sp-zaehler {
  font: 500 .72rem var(--mono);
  letter-spacing: .18em;
  color: rgba(250, 247, 240, .6);
}
.sp-zaehler b { color: var(--ivory, #FAF7F0); font-weight: 600; }

.sp-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(250, 247, 240, .22);
  border-radius: 999px;
}
.sp-toggle button {
  border: 0;
  background: transparent;
  color: rgba(250, 247, 240, .6);
  font: 600 .68rem var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .3s, background .3s;
}
.sp-toggle button.on {
  background: var(--ivory, #FAF7F0);
  color: #0F2721;
}

/* Laufendes Etikett: die Karte, die gerade vorn steht */
.sp-label {
  position: absolute;
  left: clamp(1.2rem, 4vw, 3rem);
  bottom: 2.2vh;
  z-index: 4;
  font: 400 .82rem var(--sans);
  color: rgba(250, 247, 240, .78);
  opacity: 0;
  max-width: 34ch;
}

.sp-hint {
  position: absolute;
  right: clamp(1.2rem, 4vw, 3rem);
  bottom: 2.2vh;
  z-index: 4;
  font: 500 .62rem var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, .45);
  opacity: 0;
}

/* Ladezähler, weich gezählt */
.sp-lade {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 5;
  background: #0F2721;
  font: 500 clamp(2rem, 5vw, 3.4rem) var(--serif);
  color: var(--ivory, #FAF7F0);
  font-variant-numeric: tabular-nums;
}
.sp-lade small {
  font-size: .35em;
  color: rgba(250, 247, 240, .5);
  margin-left: .3em;
}

/* Filmkorn über allem — animiertes Rauschen, sehr dezent */
.sp-korn {
  position: absolute;
  inset: -80px;
  z-index: 6;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)'/%3E%3C/svg%3E");
  animation: spKorn .45s steps(3) infinite;
}
@keyframes spKorn {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-38px, 22px); }
  66% { transform: translate(24px, -30px); }
  100% { transform: translate(0, 0); }
}

/* Rückfall ohne WebGL / bei reduzierter Bewegung: ruhiges Raster */
.sp-still { height: auto; min-height: 0; }
.sp-still .sp-titel, .sp-still .sp-kopf, .sp-still .sp-hint,
.sp-still .sp-lade, .sp-still .sp-korn, .sp-still .sp-label, .sp-still .sp-unterzeile { display: none; }
.sp-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  padding: clamp(1.2rem, 4vw, 3rem);
}
.sp-raster figure { margin: 0; }
.sp-raster img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.sp-raster figcaption {
  font: 400 .72rem var(--sans);
  color: rgba(250, 247, 240, .65);
  padding: 6px 2px 0;
}

@media (max-width: 700px) {
  .sp-label { max-width: 46vw; font-size: .72rem; }
  .sp-hint { display: none; }
  .sp-titel { bottom: 6vh; }
}