/* ==========================================================================
   sevenpress – Animationen (optionales Modul, siehe inc/animations.php)
   Alles hängt an html.spa-on. Ohne die Klasse greift keine Regel.
   Bewegt werden nur opacity, translate und scale (die Einzel-Eigenschaften,
   damit vorhandene transform-Werte aus styles.css unberührt bleiben).
   Kurve wie im Export (Slider): cubic-bezier(.6,0,.2,1).
   ========================================================================== */
:root { --spa-ease: cubic-bezier(.6, 0, .2, 1); --spa-out: cubic-bezier(.2, .7, .2, 1); }

@keyframes spa-up    { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes spa-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes spa-seven { from { opacity: 0; translate: 0 48px; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes spa-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes spa-grow  { from { scale: 1 0; } to { scale: 1 1; } }

/* ---------- 1. Einstieg: Kopfbereich jeder Seite ---------- */
.spa-on main > section:first-child > * { animation: spa-up .8s var(--spa-out) both; }
.spa-on main > section:first-child > :nth-child(2) { animation-delay: .12s; }
.spa-on main > section:first-child > :nth-child(3) { animation-delay: .24s; }
.spa-on main > section:first-child > :nth-child(n+4) { animation-delay: .36s; }

/* Startseite: Hero feiner getaktet */
.spa-on .section-hero > .stack--2, .spa-on .section-hero > .block--1 { animation: none; }
.spa-on .section-hero > .stack--2 > * { animation: spa-up .9s var(--spa-out) both; }
.spa-on .section-hero > .stack--2 > :nth-child(1) { animation-delay: .05s; }
.spa-on .section-hero > .stack--2 > :nth-child(2) { animation-delay: .15s; }
.spa-on .section-hero > .stack--2 > :nth-child(3) { animation-delay: .32s; }
.spa-on .section-hero > .stack--2 > :nth-child(4) { animation-delay: .46s; }
.spa-on .section-hero > .stack--2 > :nth-child(n+5) { animation-delay: .6s; }
.spa-on .section-hero .text-inline--9 { animation: spa-seven 1.3s var(--spa-out) .1s both; }
.spa-on .section-hero .block--2 { animation: spa-up 1s var(--spa-out) .4s both; }
.spa-on .section-hero .block--2 .stack--3 > * { animation: spa-fade .6s ease both; }
.spa-on .section-hero .block--2 .stack--3 > :nth-child(1) { animation-delay: .85s; }
.spa-on .section-hero .block--2 .stack--3 > :nth-child(2) { animation-delay: 1.05s; }
.spa-on .section-hero .block--2 .stack--3 > :nth-child(3) { animation-delay: 1.25s; }
.spa-on .section-hero .block--2 .stack--3 > :nth-child(n+4) { animation-delay: 1.45s; }
.spa-on .section-hero .card-light--1 { animation: spa-up .8s var(--spa-out) 1.2s both, spa-float 6s ease-in-out 2.2s infinite; }
.spa-on .section-hero .card-light--1 .row--10 > * { transform-origin: bottom; animation: spa-grow .6s var(--spa-out) both; }
.spa-on .section-hero .card-light--1 .row--10 > :nth-child(1) { animation-delay: 1.5s; }
.spa-on .section-hero .card-light--1 .row--10 > :nth-child(2) { animation-delay: 1.56s; }
.spa-on .section-hero .card-light--1 .row--10 > :nth-child(3) { animation-delay: 1.62s; }
.spa-on .section-hero .card-light--1 .row--10 > :nth-child(4) { animation-delay: 1.68s; }
.spa-on .section-hero .card-light--1 .row--10 > :nth-child(5) { animation-delay: 1.74s; }
.spa-on .section-hero .card-light--1 .row--10 > :nth-child(6) { animation-delay: 1.8s; }
.spa-on .section-hero .card-light--1 .row--10 > :nth-child(n+7) { animation-delay: 1.86s; }

/* ---------- 2. Beim Scrollen (Klassen setzt animations.js) ---------- */
.spa-on .spa-reveal { opacity: 0; translate: 0 28px; transition: opacity .9s var(--spa-out), translate .9s var(--spa-out), scale 1.2s var(--spa-out); transition-delay: var(--spa-delay, 0s); }
.spa-on .spa-reveal.spa-img { translate: 0 0; scale: 1.04; }
.spa-on .spa-reveal.spa-in { opacity: 1; translate: 0 0; scale: 1; }

/* ---------- 4. Hover (nur Geräte mit Maus) ---------- */
@media (hover: hover) {
  .spa-on a.link--4 { transition: translate .35s var(--spa-out); }
  .spa-on a.link--4:hover { translate: 0 -4px; }
  .spa-on a.link--4 > :first-child { transition: scale .6s var(--spa-out); }
  .spa-on a.link--4:hover > :first-child { scale: 1.02; }
  .spa-on .row--41 .text-inline--36, .spa-on .brxe-button .text-inline--6 { display: inline-block; transition: translate .25s var(--spa-out); }
  .spa-on a.link--4:hover .row--41 .text-inline--36, .spa-on .brxe-button:hover .text-inline--6 { translate: 3px 0; }
}

/* ---------- 5. Header beim Scrollen ---------- */
.spa-on .site-header { transition: box-shadow .3s ease; }
.spa-on.spa-scrolled .site-header { box-shadow: 0 1px 0 var(--color-line-2), 0 10px 30px rgba(0, 0, 0, .28); }