/* ============ Aufgefächerter Kartenstapel (gemeinsam) ============
   Genutzt von der About-Seite (js/about.js) und den Case Studies (Karten
   direkt im HTML, gebaut von js/fan.js). Hier ändern wirkt überall.
   Vorbild: xhulia.co/about. */

/* ---------- Der Fächer ----------
   Die Karten liegen absolut übereinander und werden per Transform an ihren
   Platz geschoben. Die Werte --x (seitlich), --y (Bogen nach unten), --r
   (Drehung) und --z rechnet js/about.js aus der ANZAHL der Karten aus — so
   sieht der Fächer mit 5, 7 oder 9 Karten gleich sauber aus.

   Warum absolut und nicht ein Flex-Row mit negativen Abständen? Weil der
   Einstiegs-Effekt genau davon lebt: Am Anfang stehen alle Karten exakt
   aufeinander in der Mitte (alle Werte 0), und erst beim Hereinscrollen
   fahren sie auseinander. Mit Flex ginge das nicht ohne Layout-Sprung. */

.fan-wrap {
  position: relative;
  /* Eigener Stapel-Kontext: Die Beschriftungs-Pillen liegen intern auf z-index
     100, damit sie über den Karten stehen. Ohne isolation gilt dieser Wert im
     Wurzel-Kontext und schlägt die Nav-Leiste (z-index 40) — das offene
     Burger-Menü hatte die gelbe Pille sonst quer darüberliegen. */
  isolation: isolate;
  margin: clamp(48px, 8vw, 96px) auto 0;
  padding: 0 24px;
  max-width: 1180px;
}

.fan {
  position: relative;
  height: var(--fan-h, 300px);
  margin: 0 auto;
}

.fan-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--cw, 150px);
  height: var(--ch, 190px);
  margin-left: calc(var(--cw, 150px) / -2);
  z-index: var(--z, 1);
  /* Ausgangslage = alle Karten mittig aufeinander */
  transform: translate3d(0, 0, 0) rotate(0deg);
  opacity: 0;
  transition:
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;
  transition-delay: var(--d, 0ms);
}

/* Aufgefächert: setzt js/about.js per IntersectionObserver */
.fan.is-open .fan-card {
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--r, 0deg));
  opacity: 1;
}

.fan-shot {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--g, #d8d8d6);
  box-shadow: 0 10px 30px rgba(20, 20, 30, 0.13);
}

.fan-card img,
.fan-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Wie auf der Landing: kein Einzelbild lässt sich herausziehen */
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Beim Überfahren richtet sich die Karte auf und kommt nach vorn.
   Nur mit echtem Zeiger — auf dem Handy gibt es kein Hover. */
@media (hover: hover) and (pointer: fine) {
  .fan.is-open .fan-card:hover {
    transform: translate3d(var(--x, 0px), calc(var(--y, 0px) - 16px), 0)
               rotate(calc(var(--r, 0deg) * 0.35));
    z-index: 99;
    transition-delay: 0ms;
    transition-duration: 0.3s;
  }
  .fan.is-open .fan-card:hover .fan-shot {
    box-shadow: 0 22px 50px rgba(20, 20, 30, 0.22);
  }
  /* Die Pille gehoert zum Bild und erscheint nur beim Hovern darueber */
  .fan.is-open .fan-card:hover .fan-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0) rotate(calc(var(--r, 0deg) * -0.35));
  }
}

/* Platzhalter: verschiedene Grautöne, damit die Karten unterscheidbar sind,
   solange in assets/about/ noch keine Bilder liegen. */
.fan-card.is-placeholder .fan-shot::after {
  content: attr(data-n);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.28);
}

/* ---------- Beschriftungs-Pille an der Karte ----------
   Sitzt seit v38 IM Kartenelement und erscheint nur beim Hovern (Nicklas'
   Wunsch). Deshalb liegt der Beschnitt nicht mehr auf .fan-card, sondern auf
   .fan-shot — sonst wuerde die Pille, die oberhalb der Karte schwebt,
   abgeschnitten.

   Die Karte ist gedreht, die Pille wird gegengedreht, damit sie gerade steht.
   Beim Hovern richtet sich die Karte auf 35 % ihrer Drehung auf, die
   Gegendrehung folgt demselben Faktor. */
.fan-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 5;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  color: #1a1a1a;
  background: #fff;
  box-shadow: 0 4px 14px rgba(20, 20, 30, 0.16);
  opacity: 0;
  transform: translateX(-50%) translateY(6px) rotate(calc(var(--r, 0deg) * -1));
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

/* Case Studies: der Fächer sitzt zwischen Absätzen, die Karten sind größer
   und alle gleich groß (Nicklas' Wunsch: gleiche Bildgröße hat Vorrang). */
.fan-wrap.fan-case {
  margin: 60px 0 34px;
  padding: 0;
  max-width: none;
}
/* Deck-Variante (Case Studies): Karten sind von Anfang an sichtbar und liegen
   leicht versetzt aufeinander (--sx/--sy/--sr aus js/fan.js). Beim Öffnen
   fahren sie von dort in die Fächerposition, nichts blendet ein. Beim Deck
   liegt die letzte Karte oben, deshalb darf die Karte unter der Maus die
   Reihenfolge nicht wechseln, solange nicht geöffnet ist. */
.fan.fan-deck .fan-card {
  opacity: 1;
  transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0) rotate(var(--sr, 0deg));
}
.fan.fan-deck.is-open .fan-card {
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--r, 0deg));
}

.fan-case .fan-label {
  white-space: normal;
  max-width: 300px;
  text-align: center;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .fan-label { font-size: 10px; padding: 4px 9px; }
  /* Deck-Variante (Case Studies): Karten sind von Anfang an sichtbar und liegen
   leicht versetzt aufeinander (--sx/--sy/--sr aus js/fan.js). Beim Öffnen
   fahren sie von dort in die Fächerposition, nichts blendet ein. Beim Deck
   liegt die letzte Karte oben, deshalb darf die Karte unter der Maus die
   Reihenfolge nicht wechseln, solange nicht geöffnet ist. */
.fan.fan-deck .fan-card {
  opacity: 1;
  transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0) rotate(var(--sr, 0deg));
}
.fan.fan-deck.is-open .fan-card {
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--r, 0deg));
}

.fan-case .fan-label { max-width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .fan-card,
  .fan-label {
    transition: none;
    transition-delay: 0ms !important;
  }
}