/* ──────────────────────────────────────────────────────────────
   PICTS-Netzwerk Aargau – Animationen & Grafiken (Zusatz-Layer)
   Ergänzt style.css, ändert keine Inhalte. Alles in dieser Datei
   lässt sich entfernen, ohne dass die Seite kaputtgeht.
   Regeln: nur transform/opacity, ease-out, Hover nur mit Maus,
   prefers-reduced-motion = ruhigere Variante.
   ────────────────────────────────────────────────────────────── */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

html { scroll-padding-top: 96px; }

/* ── Lesefortschritt (oberhalb der Navigation) ── */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200;
  background: var(--ag-red);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* ── Navigation: Schatten beim Scrollen, aktiver Abschnitt ── */
nav { transition: box-shadow 0.25s ease; }
nav.is-scrolled { box-shadow: 0 6px 24px rgba(26, 42, 58, 0.08); }
.nav-links a:not(.nav-cta) { position: relative; padding-block: 4px; }
.nav-links a:not(.nav-cta)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--ag-red); border-radius: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.25s var(--ease-out);
}
.nav-links a.is-active { color: var(--navy); }
.nav-links a.is-active::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
}

/* ── Hero: Netzwerk-Grafik, Welle, Auftritt ── */
.hero-net {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 65% 75% at 50% 45%, rgba(0,0,0,0.28) 0%, #000 100%);
          mask-image: radial-gradient(ellipse 65% 75% at 50% 45%, rgba(0,0,0,0.28) 0%, #000 100%);
}
.hero-wave {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: clamp(28px, 5vw, 56px);
  display: block; z-index: 1; pointer-events: none;
}
.hero-wave path { fill: var(--white); }
.hero { padding-bottom: 112px; }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero-badge, .hero h1, .hero-lead, .hero-actions, .hero-stats {
  /* backwards statt both: ohne laufende Animation bleibt alles sichtbar */
  animation: rise 0.8s var(--ease-out) backwards;
}
.hero h1       { animation-delay: 0.08s; }
.hero-lead     { animation-delay: 0.16s; }
.hero-actions  { animation-delay: 0.24s; }
.hero-stats    { animation-delay: 0.34s; }

/* Puls am Punkt im Hero-Badge: Netzwerk ist „live" */
@keyframes ping {
  0%   { transform: scale(1);   opacity: 0.55; }
  80%, 100% { transform: scale(2.6); opacity: 0; }
}
.hero-badge { position: relative; }
.hero-badge::after {
  content: ''; position: absolute; left: 14px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: #ff6b80; animation: ping 2.4s var(--ease-out) infinite;
}

/* Button-Druckfeedback */
.btn-primary, .btn-secondary, .form-submit, .blog-link, .btn-ghost {
  transition-property: background-color, transform, border-color, color;
  transition-duration: 0.18s;
  transition-timing-function: ease;
}
.btn-primary:active, .btn-secondary:active, .form-submit:active, .btn-ghost:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover, .form-submit:hover { transform: translateY(-2px); }
  .btn-primary:active, .form-submit:active { transform: scale(0.97); }
}

/* ── Scroll-Reveal (Klassen setzt js/enhance.js) ── */
.js .rv { opacity: 0; transform: translateY(22px); }
.js .rv.rv-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--rv-d, 0s);
}

/* ── „Warum": Isolation wird zum Netz ── */
#warum .section-inner { position: relative; }
.warum-art {
  position: absolute; top: 4px; right: 0; width: 290px; height: auto;
  pointer-events: none;
}
.warum-art .edge {
  fill: none; stroke: var(--ag-red); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.warum-art .node { fill: var(--navy); }
.warum-art .node.hot { fill: var(--ag-red); }
.warum-art .halo { fill: var(--ag-red); opacity: 0.12; }
.warum-art.in .edge {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s var(--ease-in-out);
  transition-delay: calc(var(--i) * 90ms + 200ms);
}
@media (max-width: 960px) { .warum-art { display: none; } }

/* ── Karten: Linien-Icons & Hover ── */
.gap-icon svg {
  width: 22px; height: 22px; fill: none; stroke: var(--ag-red);
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.2s ease, transform 0.35s var(--ease-out);
}
.gap-icon { transition: background-color 0.2s ease; }
.gap-card, .phase-card, .news-card, .trust-item {
  transition-property: border-color, box-shadow, transform, background-color;
  transition-duration: 0.3s;
  transition-timing-function: var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .gap-card:hover, .news-card:hover { transform: translateY(-4px); }
  .gap-card:hover .gap-icon { background: var(--ag-red); }
  .gap-card:hover .gap-icon svg { stroke: #fff; transform: scale(1.08) rotate(-4deg); }
  .phase-card:hover { transform: translateY(-4px); border-color: rgba(232, 160, 171, 0.5); background: rgba(255,255,255,0.09); }
  .trust-item:hover { transform: translateY(-2px); border-color: var(--ag-red-mid); }
  .benefit-item:hover .benefit-num { color: var(--ag-red-mid); }
}
.benefit-num { transition: color 0.25s ease; }

/* ── Vision: Wellen wie ein wachsendes Netzwerk ── */
#vision { position: relative; overflow: hidden; }
#vision .section-inner { position: relative; z-index: 1; }
.vision-ripples {
  position: absolute; left: 50%; top: 150px; width: 0; height: 0;
  pointer-events: none; z-index: 0;
}
.vision-ripples i {
  position: absolute; left: -260px; top: -260px; width: 520px; height: 520px;
  border-radius: 50%; border: 1px solid rgba(232, 160, 171, 0.22);
  opacity: 0; transform: scale(0.35);
  animation: ripple 9s var(--ease-out) infinite; animation-play-state: paused;
}
.vision-ripples i:nth-child(2) { animation-delay: 3s; }
.vision-ripples i:nth-child(3) { animation-delay: 6s; }
.vision-ripples.is-live i { animation-play-state: running; }
@keyframes ripple {
  0%   { opacity: 0;    transform: scale(0.35); }
  12%  { opacity: 1; }
  100% { opacity: 0;    transform: scale(2.1); }
}

/* ── Treffen: Zeitleiste füllt sich im Takt des Ablaufs ── */
.t-bar { position: relative; overflow: hidden; }
.t-bar::after {
  content: ''; position: absolute; inset: 0; background: var(--ag-red); border-radius: 2px;
  transform: scaleY(0); transform-origin: 50% 0;
}
.js .timeline.tl-in .t-bar::after {
  transform: scaleY(1);
  transition: transform 0.7s var(--ease-in-out);
  transition-delay: calc(var(--n) * 0.55s + 0.15s);
}
.t-time { font-variant-numeric: tabular-nums; }

/* ── Partner / Formular ── */
.partner-logo-box { transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease; }
@media (hover: hover) and (pointer: fine) {
  .partner-logo-box:hover { transform: translateY(-3px); }
}
.partner-link, .blog-link { display: inline-block; }

/* ── Reduzierte Bewegung: weniger und sanfter, nicht null ── */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-badge, .hero h1, .hero-lead, .hero-actions, .hero-stats { animation: fade-in 0.4s ease backwards; animation-delay: 0s; }
  .hero-badge::after { display: none; }
  .js .rv { transform: none; }
  .js .rv.rv-in { transition: opacity 0.4s ease; transition-delay: 0s; }
  .warum-art .edge { stroke-dashoffset: 0; transition: none !important; }
  .vision-ripples { display: none; }
  .js .timeline.tl-in .t-bar::after { transition: none; }
  .scroll-progress { display: none; }
  .gap-card:hover, .news-card:hover, .phase-card:hover { transform: none; }
}