.hero { --a: 0; --z: 0; --w: 0; --t: 0; --p: 0; position: relative; min-height: min(100svh, 1000px); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 120px var(--gutter) 90px; text-align: center; overflow: hidden; }
.hero__title { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .82; letter-spacing: -.01em; font-size: clamp(64px, 15.3vw, 220px); display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.5vw, 36px); }
.hero__word { display: block; }
.hero__title .dot { color: var(--gelb); }
.hero__ballwrap { display: block; line-height: 0; }
.hero__ball { width: clamp(150px, 18vw, 260px); height: auto; animation: hero-spin 18s linear infinite; }
.hero__foot { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 28px; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); color: var(--ink-muted); }
.hero__scroll { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.hero__scroll::after { content: ""; width: 1px; height: 28px; background: var(--ink-muted); animation: hero-cue 2.2s ease-in-out infinite; transform-origin: top; }
.hero__wipe, .hero__progress { display: none; }
@keyframes hero-spin { to { transform: rotate(360deg); } }
@keyframes hero-cue { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* Einlauf beim Laden */
.motion .hero__word--a, .motion .hero__word--b, .motion .hero__ballwrap { animation: hero-in .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.motion .hero__ballwrap { animation-delay: .06s; }
.motion .hero__word--b { animation-delay: .12s; }
.motion .hero__foot { animation: hero-fade .6s .3s ease backwards; }
@keyframes hero-in { from { opacity: 0; translate: 0 18%; scale: .96; } }
@keyframes hero-fade { from { opacity: 0; } }

/* Gepinnter Zoom beim Scrollen */
.motion .hero-stage { position: relative; height: 250vh; height: 250svh; }
.motion .hero-stage .hero { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
.motion .hero__word--a { transform: translate3d(calc(var(--a) * -60vw), calc(var(--a) * -22vh), 0) rotate(calc(var(--a) * -6deg)); opacity: calc(1 - var(--a) * 1.3); }
.motion .hero__word--b { transform: translate3d(calc(var(--a) * 60vw), calc(var(--a) * 22vh), 0) rotate(calc(var(--a) * 6deg)); opacity: calc(1 - var(--a) * 1.3); }
.motion .hero__ballwrap { transform: scale(calc(1 + var(--z) * 11)) rotate(calc(var(--z) * 140deg)); }
.motion .hero__foot { opacity: calc(1 - var(--p) * 5); }
.motion .hero__wipe { display: flex; position: absolute; inset: 0; z-index: 3; align-items: center; justify-content: center; background: var(--gelb); color: var(--on-gelb); clip-path: circle(calc(var(--w) * 75vmax) at 50% 50%); pointer-events: none; }
.hero__after { margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .85; font-size: clamp(56px, 13vw, 200px); display: flex; flex-direction: column; align-items: center; opacity: var(--t); transform: translate3d(0, calc((1 - var(--t)) * 60px), 0); }
.hero__after span:last-child { transform: translate3d(calc((1 - var(--t)) * 12vw), 0, 0); }
.motion .hero__progress { display: block; position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); top: auto; bottom: 0; height: 3px; background: rgba(255, 255, 255, .08); }
.motion .hero__progress span { display: block; height: 100%; background: var(--gelb); transform-origin: left; transform: scaleX(var(--p)); }

@media (prefers-reduced-motion: reduce) { .hero__ball, .hero__scroll::after { animation: none; } }
@media (max-width: 760px) {
  .hero { padding-top: 110px; padding-bottom: 120px; }
  .hero__foot { flex-direction: column; gap: 6px; bottom: 20px; }
  .hero__foot > span:last-child { display: none; }
  .motion .hero-stage { height: 210vh; height: 210svh; }
  .motion .hero__ballwrap { transform: scale(calc(1 + var(--z) * 13)) rotate(calc(var(--z) * 140deg)); }
}