/* Bewegung und Effekte. Alles aus, wenn jemand weniger Bewegung eingestellt hat. */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Fortschrittsbalken oben */
.scroll-progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  background: #ff5a1f;
  transform-origin: 0 50%;
  scale: 0 1;
  z-index: 60;
  pointer-events: none;
}

/* Kopfzeile bleibt oben und bekommt beim Scrollen Glas-Hintergrund */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color 0.35s, box-shadow 0.35s, padding 0.35s;
}
.site-head::before {
  content: '';
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: rgba(243, 243, 239, 0);
  transition: background-color 0.35s, box-shadow 0.35s;
  z-index: -1;
  pointer-events: none;
}
.site-head.is-scrolled { padding-top: 12px !important; padding-bottom: 12px !important; }
.site-head.is-scrolled::before {
  background: rgba(243, 243, 239, 0.82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 rgba(20, 20, 20, 0.08);
}
.site-head nav a:not(.btn-shine) { position: relative; }
.site-head nav a:not(.btn-shine)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: #ff5a1f;
  scale: 0 1;
  transform-origin: 0 50%;
  transition: scale 0.3s var(--ease-out);
}
.site-head nav a:not(.btn-shine):hover::after { scale: 1 1; }

/* Glanz auf den Haupt-Buttons */
.btn-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: translate 0.25s var(--ease-out), box-shadow 0.25s;
}
.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  translate: 0 0;
  transition: translate 0.7s var(--ease-out);
  z-index: 1;
  pointer-events: none;
}
.btn-shine:hover { translate: 0 -2px; box-shadow: 0 10px 24px rgba(255, 90, 31, 0.28); }
.btn-shine:hover::after { translate: 360% 0; }
.btn-shine:active { translate: 0 0; }

/* Einblenden beim Scrollen */
.motion .rv {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.8s var(--ease-out), translate 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.motion .rv.in { opacity: var(--o, 1); translate: 0 0; }

/* Hero beim Laden */
.motion .hero-in {
  opacity: 0;
  translate: 0 22px;
  animation: hero-in 0.9s var(--ease-out) forwards;
  animation-delay: calc(120ms + var(--i, 0) * 90ms);
}
@keyframes hero-in { to { opacity: 1; translate: 0 0; } }

.motion .hero-phone {
  opacity: 0;
  translate: 0 70px;
  animation: phone-in 1.1s var(--ease-out) 0.25s forwards, phone-float 7s ease-in-out 1.6s infinite;
}
@keyframes phone-in { to { opacity: 1; translate: 0 0; } }
@keyframes phone-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

.motion .hero-stamp {
  opacity: 0;
  scale: 2.1;
  animation: stamp-down 0.55s var(--ease-spring) 1.05s forwards;
}
@keyframes stamp-down {
  0% { opacity: 0; scale: 2.1; }
  60% { opacity: var(--o, 1); scale: 0.94; }
  100% { opacity: var(--o, 1); scale: 1; }
}

.motion .hero-duel {
  opacity: 0;
  translate: 60px 20px;
  animation: duel-in 0.9s var(--ease-out) 1.35s forwards;
}
@keyframes duel-in { to { opacity: 1; translate: 0 0; } }
.motion .hero-duel .bar {
  scale: 0 1;
  transform-origin: 0 50%;
  animation: bar-grow 1.1s var(--ease-out) forwards;
  animation-delay: 1.8s;
}
.motion .hero-duel .bar:nth-of-type(1) { animation-delay: 1.8s; }
@keyframes bar-grow { to { scale: 1 1; } }

/* Stempel werden aufgedrückt */
.motion .stamp-hit { opacity: 0; scale: 1.9; }
.motion .stamp-hit.in {
  animation: stamp-down 0.5s var(--ease-spring) forwards;
  animation-delay: calc(var(--i, 0) * 140ms);
}
.motion .stamp-ghost { opacity: 0; transition: opacity 0.8s; transition-delay: calc(400ms + var(--i, 0) * 90ms); }
.motion .stamp-ghost.in { opacity: var(--o, 1); }

/* Karte: Wege und Orte */
.motion .map-line { opacity: 0; transition: opacity 0.6s; transition-delay: calc(var(--i, 0) * 160ms); }
.motion .map-dot { scale: 0; transform-box: fill-box; transform-origin: center; }
.motion .map-on .map-line { opacity: 0.6; }
.motion .map-on .map-dot { animation: pop 0.5s var(--ease-spring) forwards; animation-delay: calc(250ms + var(--i, 0) * 160ms); }
.motion .map-on .map-home { animation-delay: 0ms; }
@keyframes pop { to { scale: 1; } }

/* Linien (Stimmungskurve) zeichnen sich */
.motion .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .draw.in { transition: stroke-dashoffset 1.6s var(--ease-out); stroke-dashoffset: 0; }

/* Poster-Kacheln */
.motion .tile { opacity: 0; scale: 0.3; }
.motion .tiles-on .tile {
  transition: opacity 0.35s, scale 0.45s var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 18ms);
  scale: 1;
}
.motion .tiles-on .tile { opacity: var(--o, 1); }

/* Tickets flattern in den Stapel */
.motion .ticket-drop { opacity: 0; translate: 0 -80px; rotate: -6deg; }
.motion .ticket-drop.in {
  transition: opacity 0.6s, translate 0.9s var(--ease-spring), rotate 0.9s var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 180ms);
  opacity: var(--o, 1);
  translate: 0 0;
  rotate: 0deg;
}

/* Karten kippen leicht zur Maus */
.tilt {
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  will-change: transform;
}
.tilt:hover { box-shadow: 0 22px 44px rgba(20, 20, 20, 0.18); }

/* Laufband hält beim Drüberfahren an */
.dabei-band-track:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .btn-shine::after { display: none; }
  .tilt { transition: none; }
}