/* =========================================================================
   HyperVision by Erik – Bewegungs-Ebene (motion.css), gehört zu js/motion.js.
   Alles läuft über --p / --q aus dem Scroll-Motor (js/main.js), vorwärts wie
   rückwärts. Keine @keyframes, keine Zeit-Animation.
   Ohne JavaScript: kein Hintergrund, alles steht fertig da.
   ========================================================================= */

:root {
  /* Seitwärts-Galerien */
  --hg-card-w: clamp(160px, min(calc((100svh - 340px) * 9 / 16), 78vw), 360px);
  --hg-h: clamp(240px, calc(100svh - 300px), 600px);
}

/* Der Hintergrund liegt hinter dem Inhalt: body muss dafür durchsichtig sein (html behält --bg) */
.js body { background: transparent; }

/* ---------- (1) Hintergrund: Farbglühen + Drahtgitter-Boden ---------- */
.hv-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

/* Zwei Ebenen A/B mischen die Farben benachbarter Sektionen (--c = r g b, --o = Stärke) */
.hv-glow {
  position: absolute;
  inset: 0;
  opacity: var(--o, 0);
}
.hv-glow i {
  position: absolute;
  width: 95vmax;
  height: 95vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--c, 25 211 255)) 0%, rgb(var(--c, 25 211 255) / .45) 45%, rgb(var(--c, 25 211 255) / 0) 100%);
}
.hv-glow i:nth-child(1) {
  left: -42vmax;
  top: -44vmax;
  transform: translate3d(calc(var(--sy, 0) * 38vw), calc(var(--sy, 0) * 34vh), 0);
}
.hv-glow i:nth-child(2) {
  right: -46vmax;
  bottom: -50vmax;
  transform: translate3d(calc(var(--sy, 0) * -30vw), calc(var(--sy, 0) * -26vh), 0);
}

/* Boden wie im Blender-Viewport: Raster in Cyan, Mittelachse in Magenta.
   Er kippt mit dem Seitenfortschritt (--sy) und fährt mit dem Scrollen (--off). */
.hv-floorwrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50vh;
  perspective: 380px;
  perspective-origin: 50% 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .35) 38%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .35) 38%, #000 100%);
}
.hv-floor {
  position: absolute;
  left: -150%;
  width: 400%;
  bottom: 0;
  height: 4200px;
  transform-origin: 50% 100%;
  transform: rotateX(calc(75deg - var(--sy, 0) * 11deg)) translate3d(0, var(--off, 0px), 0);
  background-image:
    linear-gradient(90deg, transparent calc(50% - 1px), rgb(255 79 208 / var(--axis, .6)) calc(50% - 1px), rgb(255 79 208 / var(--axis, .6)) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(rgba(25, 211, 255, .34) 2px, transparent 2px),
    linear-gradient(90deg, rgba(25, 211, 255, .34) 2px, transparent 2px),
    linear-gradient(rgba(25, 211, 255, .15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 211, 255, .15) 1px, transparent 1px);
  background-size: 100% 100%, 320px 320px, 320px 320px, 80px 80px, 80px 80px;
  background-position: 0 0, 50% 100%, calc(50% - 1px) 0, 50% 100%, calc(50% - .5px) 0;
}
/* Handy: Text läuft über die Bildmitte, darum Mittelachse leiser */
@media (max-width: 767.98px) {
  .hv-floor { --axis: .32; }
}
/* Horizont: weiches Band in Cyan und Magenta über dem Boden */
.hv-horizon {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: calc(50vh - 9vh);
  height: 18vh;
  background:
    radial-gradient(50% 50% at 35% 50%, rgba(25, 211, 255, .10), transparent 70%),
    radial-gradient(50% 50% at 65% 50%, rgba(255, 79, 208, .10), transparent 70%);
}

/* Fortschritt der Seite: Linie unter der Navigation */
.hv-progress {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 98;
  height: 2px;
  background: var(--grad);
  transform-origin: 0 50%;
  transform: scaleX(var(--sy, 0));
  pointer-events: none;
}

/* ---------- Kräftigeres Einblenden für alle Reveal-Elemente ---------- */
.js [data-scroll="reveal"] {
  transform: translate3d(0, calc((1 - var(--p, 1)) * 56px), 0) scale(calc(.95 + .05 * var(--p, 1)));
}

/* ---------- (2) Wort für Wort ---------- */
.words .w {
  display: inline-block;
  --wp: clamp(0, calc((var(--p, 1) * (var(--n, 1) + 4) - var(--i, 0)) / 4), 1);
  opacity: var(--wp);
  transform: translate3d(0, calc((1 - var(--wp)) * .6em), 0) rotate(calc((1 - var(--wp)) * 5deg));
  transform-origin: 0 100%;
  filter: blur(calc((1 - var(--wp)) * 12px));
}
/* Verlauf pro Wort (der Rahmen trägt ihn nicht mehr) */
.words .w.grad-text { padding-right: .04em; }

/* ---------- (3) Tiefe: Wisch, Zoom, Parallaxe ---------- */
.js .depth-card[data-scroll="reveal"] {
  opacity: clamp(0, calc(var(--p, 1) * 1.8), 1);
  transform: translate3d(0, calc((1 - var(--p, 1)) * 90px), 0);
}
/* Wisch von unten nach oben */
.js .depth-card .gallery-frame {
  clip-path: inset(calc((1 - var(--p, 1)) * 100%) 0 0 0 round var(--r-img));
}
.js .depth-card .tile-media {
  clip-path: inset(calc((1 - var(--p, 1)) * 100%) 0 0 0);
}
.js .depth-card:not(.is-playing) .video-frame {
  clip-path: inset(calc((1 - var(--p, 1)) * 100%) 0 0 0 round var(--r-tile));
}
/* Bild: zoomt beim Wisch heran, danach Parallaxe über die ganze Durchfahrt (--q) */
.js .depth-frame img {
  transform: translate3d(0, calc((var(--q, .5) - .5) * -9%), 0) scale(calc(1.12 + (1 - var(--p, 1)) * .3));
  transform-origin: 50% 50%;
}
.js .depth-card:not(.is-playing) .video-frame video {
  transform: scale(calc(1 + (1 - var(--p, 1)) * .3));
}

/* ---------- (4) Seitwärts-Galerien ----------
   Ohne JS, bei wenig Höhe und bei «Bewegung reduzieren»: normale Wisch-Reihe.
   .is-active (js/motion.js): Sektion steht, die Reihe fährt mit dem Scrollen. */
.hg { position: relative; }
.hg-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 3vw, 2rem);
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2));
  padding-bottom: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
}
.hg-item { flex: none; scroll-snap-align: center; }
.hg .video-card { width: min(78vw, 300px); }   /* Wisch-Reihe */
.hg.is-active .video-card { width: var(--hg-card-w); }
.hg-photo { width: min(calc(var(--hg-h) * var(--r, .667)), 86vw); }
.hg-photo .gallery-frame { width: 100%; height: var(--hg-h); }
.hg-photo .gallery-frame img { width: 100%; height: 100%; object-fit: cover; }
.hg-meter { display: none; }

.hg.is-active .hg-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  display: flex;
  flex-direction: column;
  padding-top: var(--nav-h);
}
/* Mittig über Auto-Ränder: wird es doch zu hoch, läuft nichts oben unter die Navigation */
.hg.is-active .hg-track { margin-top: auto; }
.hg.is-active .hg-meter { margin-bottom: auto; }
.hg.is-active .hg-track {
  overflow: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
  transform: translate3d(calc(var(--p, 0) * var(--hg-dist, 0px) * -1), 0, 0);
  will-change: transform;
}
/* Platz sparen, damit die Reihe auch in Safari mit Leisten (~650 px hoch) stehen bleibt:
   Kunde und Monat stehen schon im Sektionskopf */
.hg.is-active .video-card { gap: .75rem; }
.hg.is-active .video-body > .t-small { display: none; }
/* Karten neben der Mitte drehen weg und werden kleiner (--d −1 … 1, --ad = Betrag) */
.hg.is-active .hg-item {
  transform: perspective(1200px) rotateY(calc(var(--d, 0) * -16deg)) scale(calc(1 - var(--ad, 0) * .12));
}
.hg.is-active .hg-item img,
.hg.is-active .hg-item video {
  filter: brightness(calc(1 - var(--ad, 0) * .4));
}
.hg.is-active .hg-item.is-playing video { filter: none; }
.hg.is-active .hg-meter {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2));
  margin-top: clamp(.5rem, 2vh, 1.5rem);
}
.hg-bar {
  position: relative;
  flex: 0 1 240px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line-strong);
}
.hg-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}
.hg-count {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- Laufband: grosse Wörter, zwei Reihen gegenläufig ---------- */
.marquee {
  overflow: hidden;
  padding-block: clamp(1.25rem, 5vw, 3.5rem);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.marquee-row {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-size: clamp(3.25rem, 12vw, 10rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
}
.marquee-row > span { padding-right: .35em; }
.marquee-row-1 {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px rgba(245, 245, 247, .4);
  transform: translate3d(calc(var(--p, .5) * -32%), 0, 0);
}
.marquee-row-2 {
  transform: translate3d(calc(-32% + var(--p, .5) * 32%), 0, 0);
}
.marquee-row-2 > span {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-scroll="reveal"],
  .js .depth-card[data-scroll="reveal"] { transform: none; }
  .words .w { opacity: 1; transform: none; filter: none; }
  .js .depth-card .gallery-frame,
  .js .depth-card .tile-media,
  .js .depth-card .video-frame { clip-path: none; }
  .js .depth-frame img,
  .js .depth-card .video-frame video { transform: none; }
}

/* ---------- Windows-Kontrastmodus: nur Inhalt ---------- */
@media (forced-colors: active) {
  .hv-bg, .hv-progress, .marquee { display: none; }
  .words .w { filter: none; }
}