/* ---------- 1. Smooth Scroll ---------- */
html.has-smooth-scroll, html.has-smooth-scroll body { height: auto; }
html.has-smooth-scroll { scroll-behavior: auto !important; }
html.has-smooth-scroll [data-scroll-prevent] { overscroll-behavior: contain; }
html.scroll-stopped { overflow: hidden; }
html.is-scrolling iframe { pointer-events: none; }

/* ---------- Easing ---------- */
:root {
  --ease-hero: cubic-bezier(.12, .23, .5, 1);
  --ease-spring: cubic-bezier(.22, 1.2, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Nur animieren, wenn JS läuft – ohne JS bleibt alles sichtbar */
.js-motion [data-appear],
.js-motion [data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}

/* ---------- 2. Page-Load Appear ---------- */
.js-motion [data-appear]          { transform: translateY(24px); }
.js-motion [data-appear="title"]  { transform: translateY(-20px) scale(1.2); }
.js-motion [data-appear="pop"]    { transform: scale(.8); }
.js-motion [data-appear="rise"]   { transform: translateY(85px); }
.js-motion [data-appear="phone"]  { transform: perspective(1200px) translateY(150px); }

.js-motion [data-appear].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .6s var(--ease-out),
    transform .6s var(--ease-spring);
  transition-delay: var(--delay, 0s);
}
.js-motion [data-appear="title"].is-in {
  transition-duration: 1.5s;
  transition-timing-function: var(--ease-hero);
}
.js-motion [data-appear="phone"].is-in { transition-duration: 1s; }

/* ---------- 3. Scroll Reveal ---------- */
.js-motion [data-reveal="up"]      { transform: translateY(75px); }
.js-motion [data-reveal="up-lg"]   { transform: translateY(200px); }
.js-motion [data-reveal="left"]    { transform: translateX(-80px); }
.js-motion [data-reveal="right"]   { transform: translateX(100px); }
.js-motion [data-reveal="scale"]   { transform: scale(.8); }
.js-motion [data-reveal="zoom"]    { transform: scale(.5); }
.js-motion [data-reveal="card"]    { transform: translateY(45px) scale(.9); }

.js-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s var(--ease-out),
    transform 1s var(--ease-out);
  transition-delay: var(--delay, 0s);
}

/* ---------- 4. Word-by-Word Text Reveal ---------- */
.split-word {
  display: inline-block;
  opacity: 0.001;
  transform: translateY(20px);
  transition:
    opacity .5s var(--ease-out),
    transform .7s var(--ease-out);
  transition-delay: calc(var(--i) * 45ms + var(--delay, 0s));
}
[data-split].is-in .split-word { opacity: 1; transform: none; }
.split-word.grad-text { padding-bottom: .08em; }

/* ---------- 5. Infinite Logo Ticker ---------- */
.ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: var(--ticker-gap, 64px);
  width: max-content;
  animation: ticker var(--ticker-speed, 30s) linear infinite;
}
.ticker__track > * { flex: none; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker {
  to { transform: translateX(calc(-50% - var(--ticker-gap, 64px) / 2)); }
}

/* ---------- 6. Sticky Stacking Cards ---------- */
.stack { display: flex; flex-direction: column; gap: 32px; }
.stack__card {
  position: sticky;
  top: calc(180px + var(--i, 0) * 60px);   /* 180 / 240 / 300px */
  transform-origin: center top;
  will-change: transform;
}
@media (max-width: 809px) {
  .stack__card { top: calc(100px + var(--i, 0) * 24px); }
}

/* ---------- 8. Glass Blur ---------- */
.glass {
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: 8px;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-appear],
  .js-motion [data-reveal],
  .split-word { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ticker__track { animation: none; }
  .stack__card { position: relative; top: auto; transform: none !important; }
}