/*
 * Dunkler Kontext (dev-wp.progiton.com component.scss:
 * .pg-component--dark) -- dieselbe Vereinfachung wie bei pg-hero/
 * pg-timeline: kein generisches Kontext-Token-System, Werte lokal
 * gesetzt.
 */
.pg-gallery-scrollytelling {
  --component-background: var(--color-dark);
  --component-text: var(--color-text-inverse);
  --component-muted: rgba(255, 255, 255, 0.72);
  --component-accent: var(--color-primary);
  --component-border: rgba(255, 255, 255, 0.14);
  --component-shadow: var(--shadow-lg);

  position: relative;
  padding-block: var(--space-section);
  color: var(--component-text);
  background:
    radial-gradient(circle at 50% 32%, var(--color-primary-glow), transparent 30rem),
    var(--component-background);
}

.pg-gallery-scrollytelling::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  content: "";
  pointer-events: none;
}

.pg-gallery-scrollytelling__container {
  position: relative;
  z-index: 1;
  width: min(var(--container-width), calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
}

.pg-gallery-scrollytelling__header {
  max-width: 46rem;
  margin-bottom: var(--space-xl);
}

.pg-gallery-scrollytelling__eyebrow {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  margin: 0 0 var(--space-sm);
  color: var(--component-accent);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.pg-gallery-scrollytelling__eyebrow::before {
  width: 2.5rem;
  height: 0.1875rem;
  border-radius: var(--radius-pill);
  background: var(--component-accent);
  content: "";
}

.pg-gallery-scrollytelling__heading {
  max-width: 26ch;
  margin: 0;
  color: var(--component-text);
  font-family: var(--font-family-heading);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: var(--font-weight-black);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.pg-gallery-scrollytelling__introduction {
  max-width: 40rem;
  margin-top: var(--space-sm);
  color: var(--component-muted);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.6;
}

.pg-gallery-scrollytelling__layout {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.pg-gallery-scrollytelling__steps {
  padding-block: 12vh;
}

.pg-gallery-scrollytelling__step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 82vh;
}

.pg-gallery-scrollytelling__step-number {
  align-self: flex-start;
  margin-bottom: var(--space-sm);
  border: 1px solid var(--component-border);
  border-radius: 0.5625rem;
  padding: 0.3125rem 0.625rem;
  color: var(--component-muted);
  font-size: 0.9375rem;
  font-weight: 800;
}

.pg-gallery-scrollytelling__step-title {
  margin-bottom: var(--space-sm);
  color: var(--component-text);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 700;
}

.pg-gallery-scrollytelling__step-text {
  max-width: 44ch;
  margin: 0;
  color: var(--component-muted);
}

.pg-gallery-scrollytelling__stage-col {
  position: relative;
}

.pg-gallery-scrollytelling__stage {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.pg-gallery-scrollytelling__scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(1.125rem) scale(0.98);
  transition:
    opacity var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-standard);
  pointer-events: none;
}

.pg-gallery-scrollytelling__scene.is-active {
  opacity: 1;
  transform: none;
}

/*
 * BUG_0006: Reveal-/Loop-Effekte der SVG-Medien (.pg-fx-*, siehe z. B.
 * haltung-scene-*.svg, service-icon-*.svg). Referenz (about.scss)
 * definiert diese Klassen als reine "dumme" Hooks ohne eigene
 * Animation -- die komplette Trigger-Logik sitzt im Theme-CSS,
 * gekoppelt an .is-active der Szene. Unsere importierten SVG-Dateien
 * tragen stattdessen einen eigenen <style>-Block mit vollständiger,
 * vom DOM-Einfügen (nicht vom Scroll-Zustand) getriggerter Animation
 * -- läuft unsynchronisiert zur Crossfade-Aktivierung durch und wird
 * beim späteren Erreichen der Szene nur noch mitten in der
 * Endlosschleife gesehen. Fix ohne SVG-Datei-Änderung: dieselben
 * Klassen hier mit höherer Selektor-Spezifität (zwei Klassen statt
 * einer im SVG) neu definieren; `animation: none` neutralisiert die
 * im SVG eingebettete Variante per CSS-Kaskade, `transition` +
 * `.is-active`-Gate übernehmen stattdessen die Reveal-Logik --
 * 1:1 aus about.scss portiert.
 */
.pg-gallery-scrollytelling__scene .pg-fx-pop,
.pg-gallery-scrollytelling__scene .pg-fx-halo,
.pg-gallery-scrollytelling__scene .pg-fx-pulse,
.pg-gallery-scrollytelling__scene .pg-fx-float {
  transform-box: fill-box;
  transform-origin: center;
}

.pg-gallery-scrollytelling__scene .pg-fx-draw {
  animation: none;
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  transition: stroke-dashoffset 1.5s var(--ease-standard);
}

.pg-gallery-scrollytelling__scene .pg-fx-pop {
  animation: none;
  opacity: 0;
  transition:
    opacity 0.55s var(--ease-standard),
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pg-gallery-scrollytelling__scene .pg-fx-pop.pg-fx-zoom {
  transform: scale(0.35);
}

.pg-gallery-scrollytelling__scene .pg-fx-pop.pg-fx-from-l {
  transform: translateX(-3rem) scale(0.45);
}

.pg-gallery-scrollytelling__scene .pg-fx-pop.pg-fx-from-r {
  transform: translateX(3rem) scale(0.45);
}

.pg-gallery-scrollytelling__scene .pg-fx-pop.pg-fx-from-t {
  transform: translateY(-3rem) scale(0.45);
}

.pg-gallery-scrollytelling__scene .pg-fx-pop.pg-fx-from-b {
  transform: translateY(3rem) scale(0.45);
}

.pg-gallery-scrollytelling__scene .pg-fx-flow {
  animation: none;
  stroke-dasharray: 2 10;
  opacity: 0;
  transition: opacity 0.5s ease 0.9s;
}

.pg-gallery-scrollytelling__scene .pg-fx-halo,
.pg-gallery-scrollytelling__scene .pg-fx-pulse {
  animation: none;
  opacity: 0;
}

@keyframes pg-fx-flow-dash {
  to {
    stroke-dashoffset: -48;
  }
}

@keyframes pg-fx-halo-pulse {
  0% {
    transform: scale(0.7);
    opacity: 0.55;
  }

  70% {
    opacity: 0;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes pg-fx-ring {
  0% {
    transform: scale(0.4);
    opacity: 0.75;
  }

  100% {
    transform: scale(3);
    opacity: 0;
  }
}

@keyframes pg-fx-floaty {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.4375rem);
  }
}

.pg-gallery-scrollytelling__scene.is-active .pg-fx-draw {
  stroke-dashoffset: 0;
}

.pg-gallery-scrollytelling__scene.is-active .pg-fx-pop {
  opacity: 1;
  transform: none;
}

.pg-gallery-scrollytelling__scene.is-active .pg-fx-flow {
  opacity: 0.95;
  animation: pg-fx-flow-dash 1.05s linear infinite;
}

.pg-gallery-scrollytelling__scene.is-active .pg-fx-halo {
  animation: pg-fx-halo-pulse 2.6s ease-out infinite;
}

.pg-gallery-scrollytelling__scene.is-active .pg-fx-halo.pg-fx-d2 {
  animation-delay: 0.65s;
}

.pg-gallery-scrollytelling__scene.is-active .pg-fx-halo.pg-fx-d3 {
  animation-delay: 1.3s;
}

/*
 * d4/d5 sind in der Referenz nicht vorhanden (dortige Beispiel-SVGs
 * haben weniger Knoten) -- eigene Erweiterung nach demselben
 * 0,65s-Rhythmus, da unser "oekosystem"-Szenenbild 5 Halo-Kreise hat.
 */
.pg-gallery-scrollytelling__scene.is-active .pg-fx-halo.pg-fx-d4 {
  animation-delay: 1.95s;
}

.pg-gallery-scrollytelling__scene.is-active .pg-fx-halo.pg-fx-d5 {
  animation-delay: 2.6s;
}

.pg-gallery-scrollytelling__scene.is-active .pg-fx-pulse {
  animation: pg-fx-ring 2.8s ease-out infinite;
}

.pg-gallery-scrollytelling__scene.is-active .pg-fx-float {
  animation: pg-fx-floaty 4s ease-in-out infinite;
}

.pg-gallery-scrollytelling__scene.is-active .pg-fx-d1 {
  transition-delay: 0.15s;
}

.pg-gallery-scrollytelling__scene.is-active .pg-fx-d2 {
  transition-delay: 0.35s;
}

.pg-gallery-scrollytelling__scene.is-active .pg-fx-d3 {
  transition-delay: 0.55s;
}

.pg-gallery-scrollytelling__scene.is-active .pg-fx-d4 {
  transition-delay: 0.75s;
}

.pg-gallery-scrollytelling__scene.is-active .pg-fx-d5 {
  transition-delay: 0.95s;
}

.pg-gallery-scrollytelling__scene.is-active .pg-fx-d6 {
  transition-delay: 1.15s;
}

@media (prefers-reduced-motion: reduce) {
  .pg-gallery-scrollytelling__scene .pg-fx-draw,
  .pg-gallery-scrollytelling__scene .pg-fx-pop,
  .pg-gallery-scrollytelling__scene .pg-fx-flow,
  .pg-gallery-scrollytelling__scene .pg-fx-halo,
  .pg-gallery-scrollytelling__scene .pg-fx-pulse,
  .pg-gallery-scrollytelling__scene .pg-fx-float {
    transition: none;
    animation: none !important;
  }

  .pg-gallery-scrollytelling__scene.is-active .pg-fx-draw {
    stroke-dashoffset: 0;
  }

  .pg-gallery-scrollytelling__scene.is-active .pg-fx-pop {
    opacity: 1;
    transform: none;
  }

  .pg-gallery-scrollytelling__scene.is-active .pg-fx-flow {
    opacity: 0.95;
  }

  .pg-gallery-scrollytelling__scene .pg-fx-halo,
  .pg-gallery-scrollytelling__scene .pg-fx-pulse {
    opacity: 0;
  }
}

/*
 * Gemeinsame Medien-Größenregeln -- werden sowohl von der gepinnten
 * Desktop-Bühne (__scene > __media) als auch vom Pro-Step-Medium auf
 * schmalem Viewport (__step-media > __media, siehe BUG_0001) genutzt.
 * Positionierung/Sichtbarkeit ist bewusst NICHT hier geregelt, das
 * bleibt Sache von __scene bzw. __step-media.
 */
.pg-gallery-scrollytelling__media {
  width: min(100%, 30rem);
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  filter: drop-shadow(var(--component-shadow));
}

.pg-gallery-scrollytelling__media--svg {
  display: flex;
}

.pg-gallery-scrollytelling__media--svg svg {
  width: min(100%, 30rem);
  height: auto;
  max-height: 60vh;
  filter: drop-shadow(var(--component-shadow));
}

.pg-gallery-scrollytelling__media--file {
  width: min(100%, 22rem);
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.pg-gallery-scrollytelling__media--embed {
  position: relative;
  overflow: hidden;
  width: min(100%, 30rem);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background-color: var(--color-dark);
  background-size: cover;
  background-position: center;
  box-shadow: var(--component-shadow);
}

.pg-gallery-scrollytelling__media--embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
 * Pro-Step-Medium (BUG_0001): auf breitem Viewport unsichtbar (die
 * gepinnte gemeinsame Bühne __stage-col übernimmt dort), auf
 * schmalem Viewport sichtbar und direkt unter dem zugehörigen Text
 * -- siehe @media (max-width: 61.9375rem) unten für den Umschalter
 * mit __stage-col.
 */
.pg-gallery-scrollytelling__step-media {
  display: none;
  justify-content: center;
  margin-top: var(--space-md);
}

@media (min-width: 62rem) {
  .pg-gallery-scrollytelling__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 61.9375rem) {
  /*
   * BUG_0001: die gepinnte, gemeinsame Bühne ergibt ohne
   * position: sticky keinen Sinn mehr (kein Pin-Effekt während des
   * Text-Scrollens) -- komplett ausgeblendet, jeder Step zeigt
   * stattdessen sein eigenes Medium direkt unter dem Text
   * (__step-media, siehe oben).
   */
  .pg-gallery-scrollytelling__stage-col {
    display: none;
  }

  .pg-gallery-scrollytelling__step-media {
    display: flex;
  }

  .pg-gallery-scrollytelling__steps {
    padding-block: 0;
  }

  .pg-gallery-scrollytelling__step {
    min-height: auto;
    padding-block: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-gallery-scrollytelling__scene {
    transition: none;
  }
}

@media (scripting: none) {
  .pg-gallery-scrollytelling__scene {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    display: none;
  }

  .pg-gallery-scrollytelling__scene.is-active {
    display: flex;
  }
}