/* ==========================================================================
   All.in People & Culture — motion.css
   Additive Motion-Schicht (Motion-Spec Rev. 2). Ändert KEINE bestehende
   Struktur, KEINEN Content. Knüpft nur an reale .pw-* Klassen an.

   Alle JS-getriebenen Effekte sind unter `html.pw-gsap` gegated. Dieses Flag
   setzt motion.js NUR, wenn GSAP geladen ist UND prefers-reduced-motion NICHT
   aktiv ist. Ohne Flag bleibt die bestehende main.js-Logik allein zuständig.
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   §1.2 Motion-Token (Custom Properties) — ergänzen tokens.css, ohne es zu
   überschreiben.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Dauern ── */
  --pw-dur-fast:   0.2s;   /* Micro-Interactions (Hover, Focus, Tap) */
  --pw-dur-base:   0.4s;   /* Standard-Reveal, Navbar-State */
  --pw-dur-slow:   0.6s;   /* größere Flächen */
  --pw-dur-hero:   0.8s;   /* Hero-Entrance, Clip/Mask-Reveal  [Rev.2] */

  /* ── Easing ── */
  --pw-ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --pw-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --pw-ease-soft:    cubic-bezier(0.33, 1, 0.68, 1);
  --pw-ease-power:   cubic-bezier(0.16, 1, 0.3, 1);    /* [Rev.2] */

  /* ── Distanz-Token (Reveal-Versatz) — Rev.2 erhöht ── */
  --pw-shift-sm:   8px;
  --pw-shift-md:   24px;   /* [Rev.2] */
  --pw-shift-lg:   48px;   /* [Rev.2] */
  --pw-shift-hero: 64px;   /* [Rev.2] */

  /* ── Scale-from-Token (Reveal-Tiefe) ── [Rev.2] */
  --pw-scale-card: 0.92;
  --pw-scale-hero: 0.96;

  /* ── Stagger ── [Rev.2] */
  --pw-stagger:       0.11s;
  --pw-stagger-tight: 0.06s;

  /* ── Parallax-Tempo-Faktoren ── [Rev.2] */
  --pw-par-bg:    -0.18;
  --pw-par-mid:   -0.10;
  --pw-par-decor:  0.12;

  /* ── 3D-Tilt (Card-Hover) ── [Rev.2] */
  --pw-tilt-max:   6deg;
  --pw-tilt-persp: 900px;

  /* ── Magnetischer Button ── [Rev.2] */
  --pw-magnet-max: 6px;
}

/* ──────────────────────────────────────────────────────────────────────────
   §3.1b  Nativer Smooth-Scroll für In-Page-Anker / Skip-Link.
   Lenis ist deaktiviert (Performance); der Browser übernimmt den Smooth-Scroll.
   `scroll-behavior: smooth` ist bereits global in tokens.css gesetzt (und dort
   in reduced-motion auf `auto` zurückgesetzt) — hier NICHT dupliziert.
   `scroll-padding-top` versetzt das Anker-Ziel um die fixe Navbar (≈72px + Luft),
   sodass Überschriften nicht unter der Navbar verschwinden. In reduced-motion
   bleibt das Padding nützlich (reiner Offset, keine Bewegung), der Sprung ist
   dort durch das globale `scroll-behavior: auto` ohnehin instantan.
   ────────────────────────────────────────────────────────────────────────── */
html {
  scroll-padding-top: 80px;
}

/* ──────────────────────────────────────────────────────────────────────────
   §0  Koexistenz mit .pw-reveal: wenn GSAP übernimmt, legt motion.css die
   main.js-CSS-Transition still und hält den Startzustand, bis GSAP fertig ist.
   ────────────────────────────────────────────────────────────────────────── */
html.pw-gsap .pw-reveal { transition: none; }
html.pw-gsap .pw-reveal:not(.is-gsap-done) { opacity: 0; }
/* transform: none NÖTIG — sonst behalten Container, deren GSAP-Reveal nur die
   KINDER animiert (Branchen-Grid, Job-Batch, Leistungen), das translateY(24px)
   aus der tokens.css-Basisregel .pw-reveal → Layout-Offset + falsche ScrollTrigger-Messung. */
html.pw-gsap .pw-reveal.is-gsap-done { opacity: 1; transform: none; }

/* ──────────────────────────────────────────────────────────────────────────
   §3.2  Navbar-Übergang (nutzt die von main.js gesetzte .is-scrolled-Klasse).
   Nur Hintergrund/Schatten — keine Höhenänderung (kein Layout-Thrash).
   ────────────────────────────────────────────────────────────────────────── */
.pw-navbar {
  transition: background var(--pw-dur-base) var(--pw-ease-soft),
              box-shadow var(--pw-dur-base) var(--pw-ease-soft);
}

/* ──────────────────────────────────────────────────────────────────────────
   §3.3  Scroll-Progress-Bar (JS-injiziert, aria-hidden, dekorativ).
   ────────────────────────────────────────────────────────────────────────── */
.pw-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--pw-accent-company) 0%, var(--pw-accent-candidate) 100%);
  z-index: 1100;            /* über .pw-navbar */
  pointer-events: none;
  will-change: transform;
}

/* ──────────────────────────────────────────────────────────────────────────
   §3.4  Parallax-Deko-Layer (JS-injiziert, aria-hidden, pointer-events:none).
   Liegen hinter dem Inhalt (z-index:0); realer Inhalt steht auf z-index:1.
   ────────────────────────────────────────────────────────────────────────── */
.pw-parallax-layer {
  position: absolute;
  inset: -10% 0;            /* größer als der Host → kein Rand beim Versatz */
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

/* Realen Inhalt der Host-Sektionen über die Deko-Layer heben.
   .pw-hero-particles ist ausgenommen: der Partikel-Canvas (Startseiten-Hero)
   braucht sein eigenes position:absolute/z-index aus components.css. */
html.pw-gsap .pw-hero-candidate > *:not(.pw-parallax-layer),
html.pw-gsap .pw-hero-b2b > *:not(.pw-parallax-layer),
html.pw-gsap .pw-section--dark > *:not(.pw-parallax-layer):not(.pw-hero-particles),
html.pw-gsap .pw-section--alt > *:not(.pw-parallax-layer) {
  position: relative;
  z-index: 1;
}

.pw-parallax-layer--bg {
  background:
    radial-gradient(60% 50% at 20% 20%, rgba(255, 184, 46, 0.08), transparent 70%),
    radial-gradient(50% 45% at 85% 75%, rgba(192, 70, 31, 0.05), transparent 72%);
}
.pw-parallax-layer--mid {
  background:
    radial-gradient(50% 45% at 80% 15%, rgba(255, 184, 46, 0.06), transparent 70%),
    radial-gradient(45% 40% at 15% 85%, rgba(192, 70, 31, 0.04), transparent 70%);
}

/* ──────────────────────────────────────────────────────────────────────────
   §4.1  Clip/Mask-Reveal-Wrapper für Headlines (JS-injiziert).
   ────────────────────────────────────────────────────────────────────────── */
.pw-clip {
  display: block;
  overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────────────
   §4.8  Accordion (native <details>) — sanftes Inhalts-Fade, kein Höhen-Tween.
   ────────────────────────────────────────────────────────────────────────── */
html.pw-gsap .pw-accordion__item[open] > *:not(summary) {
  animation: pw-acc-fade var(--pw-dur-base) var(--pw-ease-soft);
}
@keyframes pw-acc-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ──────────────────────────────────────────────────────────────────────────
   §5.2  3D-Tilt-Karten brauchen 3D-Kontext (nur Desktop-Maus).
   GSAP steuert den Hover-Transform → bestehenden CSS-Hover-Transform für
   getiltete Kartentypen unter html.pw-gsap neutralisieren (kein Konflikt).
   Schatten-Wechsel beim Hover bleibt über components.css bestehen.
   ────────────────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  html.pw-gsap .pw-service-card,
  html.pw-gsap .pw-job-card,
  html.pw-gsap .pw-testimonial-card {
    transform-style: preserve-3d;
    /* WICHTIG: `transform` aus der CSS-Transition nehmen. GSAP schreibt den
       Tilt-Transform pro Frame inline; eine gleichzeitige CSS-`transition:
       transform` würde jeden Frame neu interpolieren → „schwimmende", träge
       Bewegung. GSAP-quickTo bringt sein eigenes Easing mit. Schatten/Rahmen
       bleiben CSS-getweent. */
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }
  html.pw-gsap .pw-service-card:hover,
  html.pw-gsap .pw-job-card:hover,
  html.pw-gsap .pw-testimonial-card:hover {
    transform: none;   /* GSAP steuert den Hover-Transform */
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   §5.3  Aktiver Nav-Link-Unterstrich (dekorativ, kein Layout).
   ────────────────────────────────────────────────────────────────────────── */
html.pw-gsap .pw-navbar__link[aria-current="page"]::after {
  transform: scaleX(0);
  transform-origin: left;
  animation: pw-navline-in 0.3s var(--pw-ease-soft) forwards;
}
@keyframes pw-navline-in {
  to { transform: scaleX(1); }
}

/* ──────────────────────────────────────────────────────────────────────────
   §5.4  Formularfelder: Fehler-Shake (Hook auf main.js .is-error) +
   Erfolgs-Einblendung (.pw-form-success ohne [hidden]).
   ────────────────────────────────────────────────────────────────────────── */
html.pw-gsap .pw-input.is-error,
html.pw-gsap .pw-select.is-error,
html.pw-gsap .pw-textarea.is-error,
html.pw-gsap .pw-checkbox.is-error + .pw-checkbox-label {
  animation: pw-shake 0.3s var(--pw-ease-soft);
}
@keyframes pw-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

html.pw-gsap .pw-form-success:not([hidden]) {
  animation: pw-success-in var(--pw-dur-base) var(--pw-ease-out);
}
@keyframes pw-success-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   §5.5  Mobile-Overlay-Stagger: jetzt in components.css als Masken-Reveal auf
   `.pw-nav-overlay__link-inner` umgesetzt (Awwwards-Signatur). Die frühere
   li-Ebenen-Einblendung wurde hier ENTFERNT, um Doppel-Animationen zu vermeiden.
   ────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   §6  Cross-document View Transitions — Progressive Enhancement, kein JS,
   kein HTML-Edit. Gerichteter Slide + Scale-Crossfade.
   ────────────────────────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: pw-vt-out 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
::view-transition-new(root) {
  animation: pw-vt-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pw-vt-out {
  to   { opacity: 0; transform: translateX(-3%) scale(0.98); }
}
@keyframes pw-vt-in {
  from { opacity: 0; transform: translateX(4%) scale(1.01); }
  to   { opacity: 1; transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   §8  GLASS-UPGRADE Motion (additiv, Rev. Glass 2026-06-27)
   Nur unter html.pw-gsap (GSAP geladen UND reduced-motion NICHT aktiv).
   ────────────────────────────────────────────────────────────────────────── */

/* §8.1  Section-Header-Akzentlinie "zeichnen" beim Reveal.
   Startzustand scaleX(0); sobald der Header-Reveal fertig ist (is-gsap-done,
   wird von motion.js initReveals gesetzt), wächst die Linie auf 1. */
html.pw-gsap .pw-section-header.pw-reveal .pw-section-header__eyebrow::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--pw-dur-base) var(--pw-ease-out);
}
html.pw-gsap .pw-section-header--center.pw-reveal .pw-section-header__eyebrow::after {
  transform-origin: center;
}
html.pw-gsap .pw-section-header.pw-reveal.is-gsap-done .pw-section-header__eyebrow::after {
  transform: scaleX(1);
}

/* §8.2  Ambient-Backdrops — PERFORMANCE: Dauer-"Breathing"-Loop ENTFERNT.
   Die kontinuierliche scale/opacity-Endlosschleife auf den Sektions-::before
   zwang alle darüberliegenden Glas-Flächen (backdrop-filter) zu permanentem
   Re-Composite → Framedrops beim Scrollen. Die Ambient-Gradients bleiben als
   STATISCHER Hintergrund (in components.css definiert) vollständig erhalten;
   nur die Animation ist entfallen. */

/* ==========================================================================
   §7  prefers-reduced-motion — verpflichtende Fallbacks (CSS-Guard-Ebene).
   Doppel-Absicherung zum zentralen JS-Guard in motion.js.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pw-navbar { transition: none; }

  /* Injizierte Dauer-Layer: falls sie (entgegen JS-Guard) doch im DOM landen */
  .pw-progress { display: none; }
  .pw-parallax-layer { display: none; }

  /* Tilt-Karten: keinerlei Transform erzwingen */
  html.pw-gsap .pw-service-card,
  html.pw-gsap .pw-job-card,
  html.pw-gsap .pw-testimonial-card { transform: none !important; }

  /* Accordion / Nav-Link / Form / Overlay / View-Transitions abschalten */
  html.pw-gsap .pw-accordion__item[open] > *:not(summary) { animation: none; }
  html.pw-gsap .pw-navbar__link[aria-current="page"]::after { animation: none; transform: scaleX(1); }
  html.pw-gsap .pw-input.is-error,
  html.pw-gsap .pw-select.is-error,
  html.pw-gsap .pw-textarea.is-error,
  html.pw-gsap .pw-checkbox.is-error + .pw-checkbox-label { animation: none; }
  html.pw-gsap .pw-form-success:not([hidden]) { animation: none; }
  html.pw-gsap .pw-nav-overlay__nav li { opacity: 1; transform: none; transition: none; }

  /* Glass-Upgrade: Akzentlinie sofort sichtbar. Ambient-Backdrops sind bereits
     statisch (Breathing-Loop wurde aus Performance-Gründen entfernt) — diese
     `animation: none`-Regel bleibt als defensive Absicherung erhalten. */
  html.pw-gsap .pw-section-header.pw-reveal .pw-section-header__eyebrow::after {
    transform: scaleX(1);
    transition: none;
  }
  html.pw-gsap .pw-section:not(.pw-section--dark):not(.pw-section--candidate):not(.pw-cta-banner)::before {
    animation: none;
  }

  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}