/* ==========================================================================
   Vista City — Hero mit Lamellen-Slider
   Ebenen je Slide (außen nach innen):
     .slide            Sichtbarkeit + Stapelreihenfolge
     .slide__parallax  Maus-Parallaxe
     .slide__zoom      Ken-Burns während der Standzeit
     .slice            gestaffelte Lamellen-Bewegung
     .slice__img       Gegenbewegung, trägt den Bildausschnitt
   Animiert wird ausschließlich transform / opacity / filter.
   Der Hero liegt auf Bildmaterial, seine Textfarben sind darum
   themeunabhängig hell.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  isolation: isolate;
  overflow: hidden;
  background: var(--fade);

  --hero-ink: oklch(99% 0 0);
  --hero-ink-soft: oklch(86% 0.004 300);
  --hero-ink-mute: oklch(68% 0.006 300);
}

/* --- Bühne + Slides ------------------------------------------------------ */

.hero__stage { position: absolute; inset: 0; z-index: 0; }

.slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  visibility: hidden;
}
.slide.is-leaving { z-index: 1; visibility: visible; }
.slide.is-active  { z-index: 2; visibility: visible; }

.slide__parallax {
  position: absolute;
  inset: -4%;
  transform: translate3d(calc(var(--px, 0) * 1.2%), calc(var(--py, 0) * 1.2%), 0);
  transition: transform 700ms var(--ease-out-expo);
  will-change: transform;
}

.slide__zoom { position: absolute; inset: 0; transform: scale(1.04); }
.slide.is-active .slide__zoom { animation: kenburns var(--kenburns) linear forwards; }

/* Der abtretende Slide weicht in die Tiefe zurück, statt nur zu verschwinden. */
.slide.is-leaving .slide__zoom {
  transform: scale(1.12);
  filter: brightness(0.55) blur(4px);
  transition:
    transform var(--dur-slide) var(--ease-in-out-quart),
    filter var(--dur-slide) var(--ease-in-out-quart);
}

@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(-1%, -1.4%, 0); }
}

/* --- Lamellen ------------------------------------------------------------- */

.slice {
  position: absolute;
  top: 0;
  height: 100%;
  /* +1px Ueberlappung gegen Subpixel-Haarlinien zwischen den Lamellen */
  width: calc(100% / var(--slices) + 1px);
  left: calc(var(--i) * 100% / var(--slices));
  overflow: hidden;
  transform: translate3d(0, 112%, 0);
  transition: transform var(--dur-slide) var(--ease-in-out-quart);
  transition-delay: calc(var(--i) * var(--stagger));
  will-change: transform;
}

.slice__img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--i) * -100%);
  width: calc(100% * var(--slices));
  background-image: var(--src);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Gegenläufig zur Lamelle: erzeugt Tiefe statt flachem Schieben. */
  transform: translate3d(0, -18%, 0);
  transition: transform var(--dur-slide) var(--ease-in-out-quart);
  transition-delay: calc(var(--i) * var(--stagger));
}

.slide.is-active .slice,
.slide.is-active .slice__img { transform: translate3d(0, 0, 0); }

/* Rückwärts blättern: Lamellen kommen von oben, Versatz läuft gespiegelt. */
[data-dir='prev'] .slide:not(.is-active) .slice { transform: translate3d(0, -112%, 0); }
[data-dir='prev'] .slide:not(.is-active) .slice__img { transform: translate3d(0, 18%, 0); }
[data-dir='prev'] .slide .slice,
[data-dir='prev'] .slide .slice__img {
  transition-delay: calc((var(--slices) - 1 - var(--i)) * var(--stagger));
}

/* Ruhende Slides springen ohne Animation in die Ausgangslage zurück —
   sie sind zu diesem Zeitpunkt bereits vollständig verdeckt. */
.slide:not(.is-active):not(.is-leaving) .slice,
.slide:not(.is-active):not(.is-leaving) .slice__img { transition: none; }

/* --- Abdunklung über dem Bildmaterial -------------------------------------
   Bewusst neutral: ein farbiger Schleier über jedem Foto lässt die
   Aufnahmen wie eingefärbte Vorlagen aussehen statt wie Screenshots.

   Die Textzone unten bleibt in BEIDEN Themes dunkel. Blendete sie zur
   Seitenfarbe über, stünde die weiße Schrift im hellen Theme auf
   nahezu weißem Grund. Der Hero ist damit immer eine dunkle Bühne, die
   unten mit einer klaren Kante gegen die Seite abschließt.
   -------------------------------------------------------------------------- */

.slide__grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--fade) 60%, transparent) 0%,
      color-mix(in oklab, var(--fade) 10%, transparent) 24%,
      color-mix(in oklab, var(--fade) 62%, transparent) 56%,
      color-mix(in oklab, var(--fade) 88%, transparent) 78%,
      /* Ab hier volldeckend: die letzten Prozent dürfen kein Bild mehr
         durchlassen, sonst variiert die Farbe an der Naht horizontal und
         die Kante zum nächsten Abschnitt wird sichtbar. */
      var(--fade) 92%,
      var(--fade) 100%),
    /* minimaler Farbstich, nur unten links, als Verbindung zur Marke */
    radial-gradient(90% 60% at 10% 95%,
      color-mix(in oklab, var(--accent) calc(var(--media-veil) * 100%), transparent),
      transparent 70%);
}

/* --- Kantenblitz beim Wechsel ---------------------------------------------
   Ersetzt den früheren Farb-Glitch: nur eine helle Kante wandert mit den
   Lamellen durch. Fällt auf, ohne nach Effektfilter auszusehen.
   -------------------------------------------------------------------------- */

.hero__flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg,
    transparent 42%,
    oklch(100% 0 0 / 0.16) 50%,
    transparent 58%);
}
.hero.is-switching .hero__flash { animation: sweep 700ms var(--ease-out-expo); }

@keyframes sweep {
  0%   { opacity: 0; transform: translate3d(-30%, 0, 0); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(30%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero.is-switching .hero__flash { animation: none; }
}

/* --- Inhalt --------------------------------------------------------------- */

.hero__content {
  position: relative;
  z-index: 4;
  align-self: end;
  width: 100%;
  color: var(--hero-ink);
  padding-block: 0 clamp(6rem, 4rem + 7vw, 9rem);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.5rem);
  color: var(--hero-ink-soft);
}
.hero__eyebrow::before {
  content: '';
  width: clamp(2rem, 5vw, 4.5rem);
  height: 2px;
  background: var(--accent);
}

/* Ohne jeden Schatten. Ein weich auslaufender Schatten hinter einer sehr
   breiten Zeile dunkelt einen Streifen ein, der an den Zeilenenden abrupt
   endet — genau das las sich als Kasten hinter der Schrift. Den Kontrast
   liefert stattdessen die Abdunklung des Slides. */
.hero__title {
  font-size: var(--text-hero);
  margin-bottom: clamp(1.25rem, 2.5vw, 2.25rem);
  color: var(--hero-ink);
}

.hero__lede {
  max-width: 42ch;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
  color: var(--hero-ink-soft);
  font-size: var(--text-lg);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.hero__actions .chip {
  color: var(--hero-ink);
  border-color: oklch(100% 0 0 / 0.2);
  background: oklch(6% 0.004 300 / 0.55);
}
.hero__actions .chip__num { color: var(--hero-ink); }
.hero__actions .chip__max { color: var(--hero-ink-mute); }
.hero__actions .btn--ghost {
  background: transparent;
  border-color: oklch(100% 0 0 / 0.35);
  color: var(--hero-ink);
  backdrop-filter: none;
}
.hero__actions .btn--ghost:hover {
  background: var(--hero-ink);
  border-color: var(--hero-ink);
  color: oklch(12% 0.008 300);
}

/* --- Steuerung ------------------------------------------------------------
   Statt einer beschrifteten Kapitelliste nur noch eine Segmentleiste:
   ablesbar, wie viele Bilder es gibt und wo man steht — ohne Textblock,
   der neben dem Hero-Inhalt um Aufmerksamkeit konkurriert.
   -------------------------------------------------------------------------- */

.hero__progress {
  position: absolute;
  z-index: 6;
  left: var(--gutter);
  bottom: 2.75rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.seg {
  position: relative;
  width: clamp(1.75rem, 3.5vw, 3.25rem);
  height: 2px;
  padding: 0;
  background: oklch(100% 0 0 / 0.24);
  overflow: hidden;
  transition: background-color var(--dur-fast) linear;
}
.seg:hover { background: oklch(100% 0 0 / 0.5); }
.seg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.seg[aria-current='true']::after { animation: fill var(--autoplay) linear forwards; }
.hero.is-paused .seg::after { animation-play-state: paused; }

@keyframes fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .seg[aria-current='true']::after { animation: none; transform: scaleX(1); }
}

/* Zähler neben der Leiste — klein, ohne Kapitelnamen. */
.hero__count {
  margin-left: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--hero-ink-mute);
  font-variant-numeric: tabular-nums;
}
.hero__count b { color: var(--hero-ink); font-weight: 700; }

/* --- Pfeile --------------------------------------------------------------- */

.hero__arrows {
  position: absolute;
  z-index: 6;
  right: var(--gutter);
  bottom: 2.5rem;
  display: flex;
  gap: 0.5rem;
}

.arrow {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid oklch(100% 0 0 / 0.28);
  background: transparent;
  color: var(--hero-ink);
  transition:
    background-color var(--dur-fast) linear,
    border-color var(--dur-fast) linear,
    color var(--dur-fast) linear;
}
.arrow:hover {
  background: var(--hero-ink);
  border-color: var(--hero-ink);
  color: oklch(12% 0.008 300);
}
.arrow svg { width: 1rem; height: 1rem; }

/* --- Verdichtung auf kleinen Viewports ------------------------------------ */

@media (max-width: 62rem) {
  :root { --slices: 5; }

  .hero__arrows { display: none; }
  .hero__progress { bottom: 2rem; }
  .hero__content { padding-block-end: 7rem; }
}

@media (max-width: 32rem) {
  :root { --slices: 4; }
  .hero__count { display: none; }
}