/* ─────────────────────────────────────────────────────────────────
   R+ Communications, Animations
   Editorial motion layer, IntersectionObserver-driven.
   Lädt NACH styles.css, überschreibt deshalb gezielt einzelne Regeln.
   Respektiert prefers-reduced-motion.
   ───────────────────────────────────────────────────────────────── */

:root {
  --aw-ease:      cubic-bezier(.16, 1, .3, 1);
  --aw-ease-soft: cubic-bezier(.22, .61, .36, 1);
  --aw-dur-s: 0.45s;
  --aw-dur-m: 0.8s;
  --aw-dur-l: 1.1s;
}

/* ─── 1) Hero word-mask reveal ─────────────────────────────────── */
/* Pre-Split-Hide: Headline ist unsichtbar bis JS gesplittet hat. Fallback: <noscript> auf jeder Seite. */
.hero3-headline:not(.aw-ready),
.page-hero-title:not(.aw-ready),
.page2-hero-title:not(.aw-ready),
.case-hero-title:not(.aw-ready),
.stmt-q:not(.aw-ready),
.ct3-q:not(.aw-ready),
.cs3-head h2:not(.aw-ready),
.br3-head h2:not(.aw-ready),
.dz3 h2:not(.aw-ready),
.section-title:not(.aw-ready) { visibility: hidden; }

.aw-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: inherit;
  padding-bottom: 0.08em;
}
.aw-word-inner {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  transition:
    transform 0.95s var(--aw-ease) calc(var(--i, 0) * 55ms),
    opacity   0.6s  var(--aw-ease-soft) calc(var(--i, 0) * 55ms);
  will-change: transform, opacity;
}
.aw-ready.is-revealed .aw-word-inner,
.aw-ready .aw-word-inner.is-revealed {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* ─── 2) Logo R+ first load: R rein, Plus mit Snap-In ──────────── */
@keyframes aw-logo-r {
  from { opacity: 0; transform: translate3d(-8px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes aw-logo-plus {
  0%   { opacity: 0; transform: scale(0.3) rotate(-30deg); }
  55%  { opacity: 1; transform: scale(1.22) rotate(0); }
  100% { opacity: 1; transform: scale(1)    rotate(0); }
}
.nav-logo-r {
  display: inline-block;
  animation: aw-logo-r 0.7s var(--aw-ease) 0.05s backwards;
}
.nav-logo-plus {
  display: inline-block;
  transform-origin: 50% 55%;
  animation: aw-logo-plus 0.85s var(--aw-ease) 0.5s backwards;
}

/* ─── 3) Generic section reveal stagger, additiv zu .reveal2 ──── */
.aw-rv {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity   0.85s var(--aw-ease) calc(var(--i, 0) * 80ms),
    transform 0.85s var(--aw-ease) calc(var(--i, 0) * 80ms);
  will-change: opacity, transform;
}
.aw-rv.is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }

/* Stagger-Variante: Eyebrow, Title, Body, CTA innerhalb einer Section */
.aw-rv-stack > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.85s var(--aw-ease), transform 0.85s var(--aw-ease); will-change: opacity, transform; }
.aw-rv-stack.is-revealed > *:nth-child(1) { transition-delay: 0.00s; opacity: 1; transform: translate3d(0,0,0); }
.aw-rv-stack.is-revealed > *:nth-child(2) { transition-delay: 0.10s; opacity: 1; transform: translate3d(0,0,0); }
.aw-rv-stack.is-revealed > *:nth-child(3) { transition-delay: 0.20s; opacity: 1; transform: translate3d(0,0,0); }
.aw-rv-stack.is-revealed > *:nth-child(4) { transition-delay: 0.30s; opacity: 1; transform: translate3d(0,0,0); }
.aw-rv-stack.is-revealed > *:nth-child(5) { transition-delay: 0.40s; opacity: 1; transform: translate3d(0,0,0); }
.aw-rv-stack.is-revealed > *:nth-child(6) { transition-delay: 0.50s; opacity: 1; transform: translate3d(0,0,0); }
.aw-rv-stack.is-revealed > *:nth-child(7) { transition-delay: 0.60s; opacity: 1; transform: translate3d(0,0,0); }
.aw-rv-stack.is-revealed > *:nth-child(8) { transition-delay: 0.70s; opacity: 1; transform: translate3d(0,0,0); }

/* ─── 4) Image mask-wipe + Ken-Burns Loop ───────────────────────── */
.aw-img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.15s var(--aw-ease);
  will-change: clip-path;
}
.aw-img.is-revealed { clip-path: inset(0 0 0 0); }

@keyframes aw-kenburns {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  100% { transform: scale(1.10) translate3d(0, -1.5%, 0); }
}
.hero3-bg {
  animation: aw-kenburns 24s ease-in-out infinite alternate;
}

/* ─── 5) Card-Hover: lift + image zoom ──────────────────────────── */
.aw-cardhover,
.cs3-card, .br3-card, .branchen-card,
.client-card, .case-card, .team-card,
.kunde-card, .case2, .sp-card {
  transition: transform 0.65s var(--aw-ease), box-shadow 0.65s var(--aw-ease);
  will-change: transform;
}
.aw-cardhover:hover,
.cs3-card:hover, .br3-card:hover, .branchen-card:hover,
.client-card:hover, .case-card:hover, .team-card:hover,
.kunde-card:hover, .case2:hover, .sp-card:hover {
  transform: translate3d(0, -6px, 0);
}
.cs3-card img, .br3-card img, .branchen-card img,
.client-card img, .case-card img, .team-card img,
.kunde-card img, .case2 img, .sp-card img {
  transition: transform 1.1s var(--aw-ease);
  will-change: transform;
}
.cs3-card:hover img, .br3-card:hover img, .branchen-card:hover img,
.client-card:hover img, .case-card:hover img, .team-card:hover img,
.kunde-card:hover img, .case2:hover img, .sp-card:hover img {
  transform: scale(1.05);
}

/* ─── 6) Magnetic CTAs ──────────────────────────────────────────── */
.aw-magnet {
  transition: transform 0.45s var(--aw-ease);
  will-change: transform;
}

/* ─── 7) Counter-Pulse beim Finish ──────────────────────────────── */
@keyframes aw-counter-pulse {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.08); }
}
.counter.is-finished {
  display: inline-block;
  animation: aw-counter-pulse 0.7s var(--aw-ease);
}

/* ─── 8) Highlight-Underline draw-in (überschreibt globalen Disable) ─ */
.hl { position: relative; display: inline-block; isolation: isolate; }
.hl > span { position: relative; z-index: 1; }
.hl::before {
  display: block !important;
  content: '' !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.04em;
  height: 0.22em !important;
  background: var(--accent-primary) !important;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.0s var(--aw-ease) 0.25s;
  z-index: 0 !important;
  pointer-events: none;
}
.hl.is-revealed::before,
.aw-ready.is-revealed .hl::before { transform: scaleX(1); }

/* Auf dunklem Hero den Underline-Hintergrund leicht heller, damit er gegen dunkel sauber wirkt */
body.has-dark-hero .hero3-headline .hl::before {
  height: 0.22em !important;
  bottom: 0.04em;
}

/* ─── 9) Scroll-Progress im Header ──────────────────────────────── */
.aw-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  background: var(--accent-primary);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.12s linear;
}

/* ─── Reduced motion: alle Animationen aus ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero3-headline,
  .page-hero-title,
  .page2-hero-title,
  .case-hero-title,
  .stmt-q, .ct3-q,
  .cs3-head h2, .br3-head h2, .dz3 h2,
  .section-title { visibility: visible !important; }

  .aw-word-inner,
  .aw-rv,
  .aw-rv-stack > *,
  .aw-img,
  .nav-logo-r, .nav-logo-plus,
  .hero3-bg,
  .aw-magnet,
  .counter,
  .hl::before,
  .aw-progress {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
}