/* =========================================================================
   motion.css  --  Bewegungssystem nach der Messlatte wegweiserbalance
   (agents/DESIGN.md 6, REFERENZ.md 2 Punkt 7, starter/ Abschnitte 17 und 18).
   Layout und Bau bleiben von ENi (styles.css, services.css, about.css,
   projects.css); hier steht nur Bewegung. ENi-AOS ist entfernt.

   Bewegungs-Idee (Vorschlag, Konzept-Satz folgt in Phase 2): «abziehen».
   Wie ein Abzieher über Glas: gerade Bahnen von links nach rechts, in einem
   gleichmässigen Zug, danach setzt sich alles kurz ab (Feder 6 Prozent,
   ruhiger als wegweiserbalance mit 8 und 35 Prozent: Reinigung ist
   Handwerk, kein Spiel). Signatur-Moment: im Kran-Band wird ein Schleier in
   einem Zug abgezogen, die Klinge läuft voraus.

   - Auftritt beim Laden (reines CSS, fertig vor 1,8 s): Kicker, Titelzeilen
     steigen aus Zeilenfenstern, Lead und Knopf folgen. Unterseiten: Titel.
   - Beim Scrollen ([data-inview] -> .is-in, einmal, main.js): jeder Moment
     anders gebaut, nie Fliesstext versteckt.
   - Rückmeldung auf jedem Bedienelement, Hover nur mit Zeiger.
   - Seitenwechsel per View Transition, Kopf bleibt stehen.
   Ausgangszustände nur unter .js (boot.js) und no-preference. Ohne JS,
   unter Reduced Motion und beim Drucken ist alles sofort da.
   ========================================================================= */

:root {
  --dur-instant: 100ms;
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
  --dur-hero: 900ms;
  --dur-stroke: 1150ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  /* node agents/tools/feder.mjs 6 --punkte 33 (2026-09-27) */
  --ease-settle: linear(0, 0.021, 0.076, 0.155, 0.248, 0.348, 0.449, 0.547, 0.639, 0.723, 0.796, 0.86, 0.913, 0.956, 0.991, 1.017, 1.036, 1.049, 1.056, 1.06, 1.06, 1.057, 1.053, 1.048, 1.042, 1.036, 1.03, 1.025, 1.019, 1.015, 1.01, 1.007, 1);
  --dur-settle: 980ms;
  --stagger: 90ms;
}

/* --- Zeilenfenster: Titel steigen aus ihrer Zeile ------------------------
   Innenabstand plus gleich grosser negativer Rand, sonst schneidet das
   Fenster Umlaute und Unterlängen (REFERENZ.md 2 Punkt 11). */
.rise { display: block; overflow: clip; padding-block: 0.1em 0.16em; margin-block: -0.1em -0.16em; }
.rise__in { display: block; }

/* --- Kran-Band: Schleier und Klinge (Signatur-Moment) --------------------- */
.squeegee { position: absolute; inset: 0; z-index: 1; overflow: clip; pointer-events: none; }
.squeegee__film {
  position: absolute; inset: 0;
  background: rgba(205, 216, 228, 0.24);
  clip-path: inset(0 0 0 100%);
}
.squeegee__track {
  position: absolute; inset: 0;
  border-right: 3px solid rgba(255, 255, 255, 0.7);
  box-shadow: 1px 0 0 rgba(8, 20, 38, 0.6);
  opacity: 0;
}
.parallax-content { z-index: 2; }

/* --- Leistungskarte: Pfeilkreis mit Fenster ------------------------------- */
.service-card-hover i { display: inline-block; }

/* --- Rückmeldung auf Bedienelementen (DESIGN.md 6 Punkt 5) ----------------
   Eine dunklere Fläche wischt von links herein (Abzieher-Richtung), :active
   drückt, der Pfeil läuft einmal durch sein Fenster. */
.btn-theme, .btn-glass, .btn-outline-theme, .btn-consultation, .btn-outline-light {
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform var(--dur-instant) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn-theme::before, .btn-glass::before, .btn-outline-theme::before, .btn-consultation::before, .btn-outline-light::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--dur-slow) var(--ease-out);
}
.btn-theme::before { background: var(--p1); }
.btn-glass::before, .btn-outline-light::before { background: rgba(255, 255, 255, 0.16); }
.btn-outline-theme::before, .btn-consultation::before { background: rgba(30, 63, 106, 0.08); }
.btn-theme:active, .btn-glass:active, .btn-outline-theme:active, .btn-consultation:active, .btn-outline-light:active { transform: scale(0.97); }
.arrow { display: inline-flex; overflow: clip; vertical-align: middle; }
.arrow i { display: inline-block; }

/* Textlinks in Listen und im Footer: die Linie zieht sich von links. */
.icon-list a, .service-list a, .footer-list a, .project-link {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition: background-size var(--dur-slow) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.brand-wordmark .brand-name { transition: color var(--dur-fast) var(--ease-out); }
.service-card { will-change: auto; }

@media (hover: hover) and (pointer: fine) {
  .btn-theme:hover::before, .btn-glass:hover::before, .btn-outline-theme:hover::before,
  .btn-consultation:hover::before, .btn-outline-light:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
  .btn-theme.btn-primary:hover { filter: none; transform: none; }
  .btn-theme:hover .arrow i, .project-link:hover .arrow i,
  .service-card:hover .service-card-hover i { animation: arrow-through 560ms var(--ease-out) both; }
  .icon-list a:hover, .service-list a:hover, .footer-list a:hover { background-size: 100% 1px; }
  .brand-wordmark:hover .brand-name { color: var(--p3); }
  .service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.18); }
  .service-card:hover .service-card-hover { background: rgba(255, 255, 255, 0.24); }
}

/* --- Keyframes --------------------------------------------------------------- */
@keyframes arrow-through {
  0% { transform: translateX(0); }
  45% { transform: translateX(130%); }
  46% { transform: translateX(-130%); }
  100% { transform: translateX(0); }
}
@keyframes rise-in { from { transform: translateY(112%); } }
@keyframes hero-settle { from { transform: scale(1.08); } }
@keyframes enter-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* --- Auftritt Startseite: 5 Elemente, fertig nach 1,6 s ------------------- */
  /* Das Poster (LCP) setzt sich nur über Skalierung, nie über Deckkraft. */
  .hero .hero-media { animation: hero-settle 1500ms var(--ease-out-expo) both; }
  .hero .hero-kicker { animation: enter-up 700ms var(--ease-out-expo) 150ms both; }
  .hero .hero-title .rise__in { animation: rise-in var(--dur-settle) var(--ease-out-expo) 300ms both; }
  .hero .hero-title .rise + .rise .rise__in { animation-delay: 420ms; }
  .hero .hero-lead { animation: enter-up var(--dur-hero) var(--ease-out-expo) 600ms both; }
  .hero .hero-actions { animation: enter-up var(--dur-hero) var(--ease-out-expo) 720ms both; }

  /* --- Auftritt Unterseiten: Titel steigt, Rest folgt ------------------------ */
  .page-hero .page-title .rise__in,
  .page-hero-video .page-title .rise__in { animation: rise-in 1000ms var(--ease-out-expo) 80ms both; }
  .page-hero .eyebrow, .page-hero-video .eyebrow { animation: enter-up 700ms var(--ease-out-expo) 40ms both; }
  .page-hero .page-lead, .page-hero .card,
  .page-hero-video .hero-cta { animation: enter-up var(--dur-hero) var(--ease-out-expo) 260ms both; }

  /* --- Moment 1: Karten werden angehoben und setzen sich ab ------------------ */
  .lift-row .section-title .rise__in { transition: transform var(--dur-settle) var(--ease-out-expo); }
  .lift-row .lift { transition: transform var(--dur-settle) var(--ease-settle); }
  .lift-row .lift:nth-child(2) { transition-delay: 120ms; }
  .lift-row .lift:nth-child(3) { transition-delay: 240ms; }
  .js .lift-row:not(.is-in) .section-title .rise__in { transform: translateY(112%); }
  .js .lift-row:not(.is-in) .lift { transform: translateY(3.5rem); }

  /* --- Moment 2: die Punkte der Leistungsliste setzen sich nacheinander ------ */
  .icon-list[data-inview] li::before { transition: transform 600ms var(--ease-settle); }
  .icon-list[data-inview] li:nth-child(2)::before { transition-delay: 70ms; }
  .icon-list[data-inview] li:nth-child(3)::before { transition-delay: 140ms; }
  .icon-list[data-inview] li:nth-child(4)::before { transition-delay: 210ms; }
  .icon-list[data-inview] li:nth-child(5)::before { transition-delay: 280ms; }
  .icon-list[data-inview] li:nth-child(6)::before { transition-delay: 350ms; }
  .icon-list[data-inview] li:nth-child(7)::before { transition-delay: 420ms; }
  .icon-list[data-inview] li:nth-child(8)::before { transition-delay: 490ms; }
  .icon-list[data-inview] li:nth-child(n + 9)::before { transition-delay: 560ms; }
  .js .icon-list[data-inview]:not(.is-in) li::before { transform: scale(0); }

  /* --- Moment 3: Bildflächen werden in Bahnen freigezogen (Abzieher) --------
     clip-path mit negativem Rand, damit der Schatten am Ende nicht fehlt. */
  .stroke-grid > * { clip-path: inset(-30px -30px -30px -30px); transition: clip-path 900ms var(--ease-inout); }
  .stroke-grid > :nth-child(2) { transition-delay: 130ms; }
  .stroke-grid > :nth-child(3) { transition-delay: 260ms; }
  .stroke-grid > :nth-child(4) { transition-delay: 390ms; }
  .stroke-grid > :nth-child(5) { transition-delay: 520ms; }
  .stroke-grid > :nth-child(n + 6) { transition-delay: 650ms; }
  .js .stroke-grid:not(.is-in) > * { clip-path: inset(-30px 100% -30px -30px); }

  /* --- Moment 4 (Signatur): der Schleier wird in einem Zug abgezogen --------- */
  .band-kran .squeegee__film { transition: clip-path var(--dur-stroke) var(--ease-inout); }
  .band-kran .squeegee__track { transition: transform var(--dur-stroke) var(--ease-inout), opacity 240ms var(--ease-out) var(--dur-stroke); }
  .band-kran .parallax-title .rise__in { transition: transform var(--dur-settle) var(--ease-out-expo) 520ms; }
  .band-kran .parallax-title .rise + .rise .rise__in { transition-delay: 640ms; }
  .js .band-kran:not(.is-in) .squeegee__film { clip-path: inset(0 0 0 0); }
  .js .band-kran:not(.is-in) .squeegee__track { transform: translateX(-100%); opacity: 1; transition: none; }
  .js .band-kran:not(.is-in) .parallax-title .rise__in { transform: translateY(112%); }

  /* --- Moment 5: die Kante des Abschlusses zieht sich, der Titel steigt ------ */
  .cta-box { position: relative; overflow: clip; }
  .cta-box::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--grad); transform-origin: 0 50%;
    transition: transform 1000ms var(--ease-out-expo) 120ms;
  }
  .cta-box .cta-title .rise__in { transition: transform var(--dur-settle) var(--ease-settle) 240ms; }
  .js .cta-box:not(.is-in)::before { transform: scaleX(0); }
  .js .cta-box:not(.is-in) .cta-title .rise__in { transform: translateY(112%); }

  /* --- Leistungsseite: Blöcke im Wechsel wie das ENi-Layout -----------------
     Bild links: die Bildfläche wird von links freigezogen.
     Bild rechts: die Bildfläche setzt sich, die Punkte folgen. */
  .service-detail[data-inview]:not(.service-detail-alt) .service-detail-media { clip-path: inset(-30px -30px -30px -30px); transition: clip-path 900ms var(--ease-inout); }
  .js .service-detail[data-inview]:not(.service-detail-alt):not(.is-in) .service-detail-media { clip-path: inset(-30px 100% -30px -30px); }
  .service-detail-alt[data-inview] .service-detail-media { transition: transform var(--dur-settle) var(--ease-settle); }
  .service-detail-alt[data-inview] .bullet-list li::before { transition: transform 600ms var(--ease-settle) 300ms; }
  .service-detail-alt[data-inview] .bullet-list li + li::before { transition-delay: 380ms; }
  .js .service-detail-alt[data-inview]:not(.is-in) .service-detail-media { transform: translateY(2.5rem) scale(0.96); }
  .js .service-detail-alt[data-inview]:not(.is-in) .bullet-list li::before { transform: scale(0); }

  /* --- Über uns: Eckdaten ziehen in Bahnen herein ------------------------------ */
  .value-list[data-inview] .value-item { transition: transform var(--dur-settle) var(--ease-settle); }
  .value-list[data-inview] .value-item:nth-child(2) { transition-delay: 100ms; }
  .value-list[data-inview] .value-item:nth-child(3) { transition-delay: 200ms; }
  .value-list[data-inview] .value-item:nth-child(n + 4) { transition-delay: 300ms; }
  .js .value-list[data-inview]:not(.is-in) .value-item { transform: translateX(-2.5rem); }

  /* --- Seitenwechsel: Kopf steht, Rest blendet kurz ----------------------------- */
  ::view-transition-old(root) { animation: vt-out 240ms var(--ease-in) both; }
  ::view-transition-new(root) { animation: vt-in 560ms var(--ease-out-expo) both; }
}

/* Kopf und Topbar bleiben beim Seitenwechsel stehen. */
.topbar { view-transition-name: topbar; }
.site-header { view-transition-name: site-header; }

/* Cross-Document View Transitions: Chrome 126+, Safari 18.2+; sonst normaler
   Seitenwechsel. Live nur mit Cloudflare-HTML-Cache (PERFORMANCE.md 7). */
@view-transition { navigation: auto; }

/* --- Reduced Motion: keine Lage-, Dreh- und Skalierbewegung ---------------
   Zustände bleiben über Farbe erkennbar. Nie pauschal * { animation: none }. */
@media (prefers-reduced-motion: reduce) {
  .btn-theme::before, .btn-glass::before, .btn-outline-theme::before,
  .btn-consultation::before, .btn-outline-light::before { transition: none; }
  .btn-theme:active, .btn-glass:active, .btn-outline-theme:active,
  .btn-consultation:active, .btn-outline-light:active { transform: none; }
  .btn-theme:hover .arrow i, .project-link:hover .arrow i,
  .service-card:hover .service-card-hover i { animation: none; }
  .service-card:hover { transform: none; }
  .topbar-btn:hover, .btn-consultation:hover { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* --- Vorher/Nachher-Regler (ENi, main.js bindBeforeAfter) ------------------
   Während des Auftritts [data-sweep] folgen Klinge und Ausschnitt direkt dem Zug. */
.before-after.is-sweeping .before-after__clip,
.before-after.is-sweeping .before-after__handle { transition: none; }
.before-after__range:focus-visible + .before-after__handle::after { outline: 3px solid #fff; outline-offset: 2px; }