/*
 * Rompe Motion — zentrale Animations-Handschrift (verbindliche Motion-Spec).
 *
 * SICHERHEITSREGELN:
 * 1. Alle versteckenden Startzustände liegen AUSSCHLIESSLICH unter
 *    html.motion-ok (Inline-Script in inc/motion.php setzt die Klasse nur,
 *    wenn weder prefers-reduced-motion:reduce noch Data-Saver aktiv ist).
 *    Ohne JS ist die Seite vollständig sichtbar und nutzbar.
 * 2. prefers-reduced-motion:reduce → keine Bewegung, nur schnelle Opacity.
 * 3. Animiert werden nur transform / opacity / clip-path.
 * 4. Reveals feuern einmalig (JS unobserved nach dem ersten Sichtkontakt).
 */

/* =============================================
   TOKENS
   ============================================= */
:root{
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-soft:cubic-bezier(0.65,0,0.35,1);
  --dur-s:.5s;
  --dur-m:.85s;
  --dur-l:1.15s;
  --rv-y:28px;
}

/* =============================================
   REVEALS — .rv (+ Varianten) und .motion-in-Alias
   .motion-in ist der Altbestand aus main.css/main.js und wirkt wie .rv.
   Ohne motion-ok neutralisieren wir den alten, ungegateten Startzustand
   aus main.css (Zeile .motion-in{opacity:0;…}) — kein Blindflug ohne JS.
   ============================================= */
html:not(.motion-ok) .motion-in{opacity:1;transform:none}

html.motion-ok :is(.rv,.motion-in){opacity:0;transform:translateY(var(--rv-y))}
html.motion-ok .rv-fade{transform:none}
html.motion-ok .rv-left{transform:translateX(calc(-1 * var(--rv-y)))}
html.motion-ok .rv-scale{transform:scale(.96)}

/* Sichtbar-Zustand — .is-in setzt motion.js, .visible der alte main.js-Observer */
html.motion-ok :is(.rv,.motion-in).is-in,
html.motion-ok .motion-in.visible{
  opacity:1;
  transform:none;
  transition:opacity var(--dur-m) var(--ease-soft),transform var(--dur-m) var(--ease-expo);
  transition-delay:var(--rv-delay,0s);
}

/* =============================================
   .rv-lines — Headline-Zeilen-Masken
   motion.js zerlegt die Headline in span.rv-line > span; bis dahin hält
   :not(.rv-lines--ready) den unsplitteten Text unsichtbar (nur mit motion-ok).
   ============================================= */
html.motion-ok .rv-lines:not(.rv-lines--ready){opacity:0}

.rv-lines .rv-line{
  display:block;
  overflow:hidden;
  /* Puffer für Unterlängen (Fraunces-Kursiv in <em>) — Maske bleibt dicht */
  padding-bottom:.08em;
  margin-bottom:-.08em;
}
.rv-lines .rv-line>span{display:block}
html.motion-ok .rv-lines .rv-line>span{transform:translateY(110%)}
html.motion-ok .rv-lines.is-in .rv-line>span{
  transform:translateY(0);
  transition:transform .9s var(--ease-expo);
  transition-delay:calc(var(--rv-delay,0s) + var(--line-i,0) * 90ms);
}

/* =============================================
   .rv-img — Bild-Container mit Clip-Reveal
   ============================================= */
.rv-img{overflow:hidden}
html.motion-ok .rv-img{clip-path:inset(0 0 100% 0)}
html.motion-ok .rv-img img{transform:scale(1.12)}
html.motion-ok .rv-img.is-in{
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--dur-l) var(--ease-expo);
  transition-delay:var(--rv-delay,0s);
}
html.motion-ok .rv-img.is-in img{
  transform:scale(1);
  transition:transform var(--dur-l) var(--ease-expo);
  transition-delay:var(--rv-delay,0s);
}

/* =============================================
   [data-count-to] — Zähler (Logik in motion.js)
   Tabellarische Ziffern verhindern Breiten-Zappeln beim Hochzählen.
   ============================================= */
[data-count-to]{font-variant-numeric:tabular-nums}

/* =============================================
   .rompe-marquee — Endlos-Laufband
   motion.js dupliziert den Track (aria-hidden) und setzt --marquee-dur
   nach Breite. Ohne motion-ok: statisch umbrechende Reihe.
   ============================================= */
.rompe-marquee{display:flex;overflow:hidden}
.rompe-marquee__track{
  display:flex;
  align-items:center;
  gap:clamp(2.2rem,5vw,4rem);
  padding-right:clamp(2.2rem,5vw,4rem);
  flex:0 0 auto;
  min-width:max-content;
}
.rompe-marquee__item{display:inline-flex;align-items:center;flex:none}
.rompe-marquee__item img{max-height:52px;width:auto;object-fit:contain}
.rompe-marquee__item--text{
  font-family:var(--font-display,'Outfit',system-ui,sans-serif);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-light,#6a6864);
  white-space:nowrap;
}

html.motion-ok .rompe-marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
html.motion-ok .rompe-marquee__track{
  animation:rompe-marquee-scroll var(--marquee-dur,55s) linear infinite;
}
html.motion-ok .rompe-marquee:hover .rompe-marquee__track{animation-play-state:paused}
@keyframes rompe-marquee-scroll{to{transform:translateX(-100%)}}

/* Fallback ohne JS/motion-ok: Items brechen ruhig um, nichts läuft */
html:not(.motion-ok) .rompe-marquee__track{
  flex-wrap:wrap;
  justify-content:center;
  min-width:0;
  width:100%;
  padding-right:0;
}

/* =============================================
   .hero-chor — Load-Choreografie
   motion.js sortiert [data-chor], setzt --chor-delay (150ms Start,
   110ms Stagger) und schaltet dann .hero-chor--go frei.
   ============================================= */
html.motion-ok .hero-chor [data-chor]{opacity:0;transform:translateY(22px)}
html.motion-ok .hero-chor.hero-chor--go [data-chor]{
  opacity:1;
  transform:none;
  transition:opacity var(--dur-m) var(--ease-soft),transform var(--dur-m) var(--ease-expo);
  transition-delay:var(--chor-delay,0s);
}

/* =============================================
   Scroll-Progress — 2px-Hairline unter dem Header
   (motion.js rendert das Element selbst in .site-header)
   ============================================= */
.rompe-scroll-progress{
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;
  background:var(--accent,#0D0D0F);
  transform:scaleX(0);
  transform-origin:0 50%;
  pointer-events:none;
}
/* Fallback, falls kein .site-header existiert */
.rompe-scroll-progress--fixed{position:fixed;top:0;bottom:auto;z-index:9990}

/* =============================================
   .btn-magnetic — Magnetic Buttons (nur pointer:fine, max ±6px)
   Transform setzt motion.js; .btn bringt bereits transition:all .25s mit.
   Für Nicht-.btn-Elemente liefern wir die Transform-Transition nach.
   ============================================= */
@media (pointer:fine){
  html.motion-ok .btn-magnetic:not(.btn){transition:transform .3s var(--ease-soft)}
}

/* =============================================
   .prlx — Parallax für Hero-Backgrounds
   Modern: CSS scroll-driven animation (view-timeline). Fehlt der Support,
   übernimmt der dezente rAF-Fallback in motion.js (max ±5 %).
   ============================================= */
@supports (animation-timeline: scroll()){
  html.motion-ok .prlx{
    animation:rompe-prlx linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
}
@keyframes rompe-prlx{
  from{transform:translateY(-5%)}
  to{transform:translateY(5%)}
}

/* =============================================
   View Transitions — cross-document, progressive enhancement
   ============================================= */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:rompe-vt-out .3s var(--ease-soft) both}
  ::view-transition-new(root){animation:rompe-vt-in .3s var(--ease-soft) both}
}
@keyframes rompe-vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes rompe-vt-in{from{opacity:0;transform:translateY(6px)}}

/* =============================================
   REDUCED MOTION — keine Bewegung, nur schnelle Opacity (≤.2s).
   Greift auch, wenn der User die Einstellung NACH dem Laden umschaltet
   (motion-ok ist dann schon gesetzt, deshalb alles explizit überschreiben).
   ============================================= */
@media (prefers-reduced-motion:reduce){
  html.motion-ok :is(.rv,.motion-in),
  html.motion-ok :is(.rv,.motion-in).is-in,
  html.motion-ok .motion-in.visible,
  html.motion-ok .rv-lines,
  html.motion-ok .rv-lines:not(.rv-lines--ready),
  html.motion-ok .rv-lines .rv-line>span,
  html.motion-ok .rv-lines.is-in .rv-line>span,
  html.motion-ok .rv-img,
  html.motion-ok .rv-img img,
  html.motion-ok .rv-img.is-in,
  html.motion-ok .rv-img.is-in img,
  html.motion-ok .hero-chor [data-chor],
  html.motion-ok .hero-chor.hero-chor--go [data-chor]{
    opacity:1;
    transform:none;
    clip-path:none;
    transition:opacity .2s ease;
    transition-delay:0s;
  }

  /* Marquee statisch: eine umbrechende Reihe, Duplikat-Track aus */
  html.motion-ok .rompe-marquee{-webkit-mask-image:none;mask-image:none}
  html.motion-ok .rompe-marquee__track{
    animation:none;
    flex-wrap:wrap;
    justify-content:center;
    min-width:0;
    width:100%;
    padding-right:0;
  }
  .rompe-marquee__track[aria-hidden="true"]{display:none}

  /* Parallax aus (überschreibt auch einen evtl. gesetzten Inline-Transform) */
  html.motion-ok .prlx{animation:none;transform:none!important}

  /* Magnetic Buttons neutral, Hairline weg */
  html.motion-ok .btn-magnetic{transform:none!important}
  .rompe-scroll-progress{display:none}
}


/* =============================================
   CHROME-MOTION (gemergt aus chrome-motion.css, 07/2026)
   Smart-Hide-Header, .scrolled-Feinschliff, Nav-Underline,
   Footer-Abschluss-CTA — Requests-Reduktion: eine Datei sitewide.
   ============================================= */
/*
 * Rompe Chrome-Motion — Feinschliff für das Seiten-Chrome (Header & Footer).
 *
 * Lädt NACH motion.css (Dependency 'rompe-motion') und nutzt deren Tokens
 * (--ease-expo, --dur-s …). Verhaltenslogik in assets/js/chrome-motion.js.
 *
 * SICHERHEITSREGELN (Motion-Spec):
 * - Smart-Hide nur unter html.motion-ok; ohne JS existiert die Klasse
 *   .header-hidden nie → Header bleibt immer sichtbar.
 * - Nur transform/opacity animiert; bei prefers-reduced-motion keine Bewegung.
 * - WICHTIG: backdrop-filter/transform machen den Header zum Containing-Block
 *   für position:fixed-Nachfahren (mobiles Overlay-Menü!). Deshalb gilt der
 *   verfeinerte Blur nur ab 1001px, und das JS pausiert Smart-Hide, solange
 *   das Overlay offen ist (body.nav-open).
 */

/* =============================================
   HEADER — Smart-Hide (Klasse setzt chrome-motion.js)
   ============================================= */
html.motion-ok .site-header{
  transition:transform var(--dur-s,.5s) var(--ease-expo,cubic-bezier(0.16,1,0.3,1)),
             background-color .3s ease,
             border-color .3s ease;
}
html.motion-ok .site-header.header-hidden{transform:translateY(-100%)}

/* =============================================
   HEADER — .scrolled-Zustand verfeinern
   (main.js toggelt .scrolled ab scrollY > 20)
   ============================================= */
.site-header.scrolled{border-bottom-color:rgba(13,13,15,.14)}
/* Feinerer Backdrop-Blur nur auf Desktop — mobil setzt main.css bewusst
   backdrop-filter:none, damit das fixe Overlay-Menü nicht am Header klebt. */
@media(min-width:1001px){
  .site-header.scrolled{
    background:rgba(250,250,247,.8);
    -webkit-backdrop-filter:blur(26px) saturate(1.35);
    backdrop-filter:blur(26px) saturate(1.35);
  }
}

/* =============================================
   NAV — Underline wächst aus der Mitte
   (überschreibt transform-origin:left aus main.css; mobil ohne Wirkung,
   dort blendet main.css die ::after-Linien komplett aus)
   ============================================= */
.nav-links a::after{
  transform-origin:50% 50%;
  transition:transform .35s var(--ease-expo,cubic-bezier(0.16,1,0.3,1));
}

/* =============================================
   FOOTER-CTA — großer Abschluss-Block (alle Seiten außer Start & Berater)
   Schwarz, geht nahtlos in den site-footer über (Hairline als Trenner).
   ============================================= */
.footer-cta{
  background:var(--primary,#0D0D0F);
  color:#fff;
  padding-block:clamp(5rem,3.5rem + 6vw,9rem);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-cta .eyebrow{color:rgba(255,255,255,.55)}
.footer-cta-headline{
  color:#fff;
  font-size:clamp(2.6rem,7vw,5.5rem);
  letter-spacing:-.04em;
  line-height:1.04;
  max-width:1020px;
  margin:1.5rem 0 2.75rem;
}
/* Fraunces-Kursiv-Akzent (h2 em aus main.css) leicht abgesetzt */
.footer-cta-headline em{color:rgba(255,255,255,.88)}
.footer-cta-actions{display:flex;gap:1rem;flex-wrap:wrap}
.footer-cta-trust{
  margin-top:2.5rem;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
}

/* =============================================
   REDUCED MOTION — Header nie verstecken, keine Bewegung
   (greift auch, wenn die Einstellung NACH dem Laden umgeschaltet wird)
   ============================================= */
@media (prefers-reduced-motion:reduce){
  html.motion-ok .site-header{transition:none}
  html.motion-ok .site-header.header-hidden{transform:none}
  .nav-links a::after{transition:none}
}