/* =============================================================
   05 · ANIMATIONS
   Ausgangszustände für GSAP-Reveals, Preloader, Keyframes.
   Ohne JS (oder bei reduzierter Bewegung) bleibt alles sichtbar.
   ============================================================= */
html.js [data-reveal] { opacity: 0; }
html.js [data-reveal="stagger"] { opacity: 1; }
html.js [data-reveal="stagger"] > * { opacity: 0; }
html.js [data-clip] { clip-path: inset(0 0 100% 0); }
html.js [data-split] { visibility: hidden; }
html.js .step { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js [data-reveal="stagger"] > *, html.js .step { opacity: 1 !important; }
  html.js [data-clip] { clip-path: none !important; }
  html.js [data-split] { visibility: visible !important; }
}

/* Parallax-Container */
.parallax { overflow: hidden; position: relative; }
/* Medien überhoch und nach oben versetzt, damit die Parallax-Verschiebung nie einen Rand freilegt */
.parallax img, .parallax video { position: relative; top: -17.5%; width: 100%; height: 135%; object-fit: cover; will-change: transform; }
html:not(.js) .parallax img, html:not(.js) .parallax video { height: 100%; top: 0; }

/* Preloader */
.preloader { position: fixed; inset: 0; z-index: 2000; background: var(--c-ink); color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.25rem; }
.preloader__logo { width: clamp(110px, 16vw, 160px); opacity: 0; }
.preloader__bar { width: clamp(110px, 16vw, 160px); height: 1px; background: rgba(255,255,255,0.15); overflow: hidden; }
.preloader__bar i { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
html:not(.js) .preloader { display: none; }

/* SplitText-Zeilenmasken */
.split-line { display: block; overflow: hidden; padding-inline: 0.12em; margin-inline: -0.12em; padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* Standort-Puls */
@keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3.4); opacity: 0; } }

/* Scroll-Hinweis */
@keyframes scrollHint { 0% { transform: translateY(-100%); } 50% { transform: translateY(0); } 100% { transform: translateY(100%); } }
.scroll-hint { position: relative; width: 1px; height: 3rem; overflow: hidden; background: rgba(255,255,255,0.2); }
.scroll-hint::after { content: ""; position: absolute; inset: 0; background: #fff; animation: scrollHint 2.2s var(--ease-in-out) infinite; }

/* Hero-Video-Crossfade */
.hero__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.hero__video video.is-active { opacity: 1; }

/* ---------- Bilder: laden erst im Sichtbereich (loading="lazy") und blenden weich ein ---------- */
html.js img[loading="lazy"] { opacity: 0; transition: opacity 0.7s ease; }
html.js img[loading="lazy"].is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.js img[loading="lazy"] { opacity: 1; transition: none; } }