/* ==========================================================================
   PERTL GMBH – Animationen
   Alles hier ist Zugabe: Ohne JavaScript oder bei „Bewegung reduzieren"
   bleibt der Inhalt vollständig sichtbar.
   ========================================================================== */

/* ---------- Start: einmalige Einblend-Folge beim Laden ---------- */

@keyframes start-hoch {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }
}

@keyframes start-strich {
    from {
        transform: scaleX(0);
    }
}

.start__inhalt > * {
    animation: start-hoch 0.8s var(--kurve) backwards;
}

.start__inhalt > :nth-child(1) { animation-delay: 0.05s; }
.start__inhalt > :nth-child(2) { animation-delay: 0.15s; }
.start__inhalt > :nth-child(3) { animation-delay: 0.28s; }
.start__inhalt > :nth-child(4) { animation-delay: 0.4s; }
.start__inhalt > :nth-child(5) { animation-delay: 0.52s; }
.start__inhalt > :nth-child(6) { animation-delay: 0.64s; }

.start__leitsatz::before {
    transform-origin: left;
    animation: start-strich 0.7s var(--kurve) 0.9s backwards;
}

/* ---------- Einblenden beim Scrollen ----------
   Die Klasse „einblenden-aktiv" setzt js/animationen.js erst, wenn der
   Beobachter läuft. Fällt das Skript aus, bleibt alles sichtbar. */

html.einblenden-aktiv [data-einblenden] {
    opacity: 0;
    transform: translateY(1.75rem);
    transition: opacity 0.7s var(--kurve), transform 0.7s var(--kurve);
    transition-delay: var(--verzoegerung, 0s);
}

html.einblenden-aktiv [data-einblenden].ist-sichtbar {
    opacity: 1;
    transform: none;
}

html.einblenden-aktiv .vorteilskarte.ist-sichtbar:hover {
    transform: translateY(-6px) rotateX(3deg);
    transition-delay: 0s;
}

/* ---------- Leistungen: PV-Hauptfeld zoomt sanft herein, die weiteren Leistungen fliegen nacheinander ein ---------- */

@keyframes leistung-einflug {
    0% {
        opacity: 0;
        transform: perspective(900px) translate3d(4rem, 2.5rem, 0) rotateY(-18deg) rotateZ(2deg);
    }
    65% {
        opacity: 1;
        transform: perspective(900px) translate3d(-0.3rem, -0.2rem, 0) rotateY(2deg);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes leistung-haupt-ein {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(1.5rem);
    }
}

@keyframes bild-aufdecken {
    from {
        clip-path: inset(0 0 0 100%);
        transform: scale(1.12);
    }
}

html.einblenden-aktiv .leistung--haupt[data-einblenden],
html.einblenden-aktiv .leistung--neben[data-einblenden] {
    transition: none;
}

html.einblenden-aktiv .leistung--haupt.ist-sichtbar {
    animation: leistung-haupt-ein 0.9s var(--kurve) both;
}

html.einblenden-aktiv .leistung--haupt.ist-sichtbar .leistung__bild img {
    animation: bild-aufdecken 1.2s var(--kurve) 0.25s both;
}

html.einblenden-aktiv .leistung--neben.ist-sichtbar {
    animation: leistung-einflug 0.95s var(--kurve) both;
    animation-delay: calc(0.45s + var(--verzoegerung, 0s) * 2.2);
}

html.einblenden-aktiv .leistung--neben.ist-sichtbar:hover {
    transform: translateY(-6px);
}

/* ---------- Gebäudereinigung: Fotos decken sich auf, Karten kippen herein ---------- */

@keyframes foto-aufdecken {
    from {
        opacity: 0;
        clip-path: inset(100% 0 0 0 round var(--radius-gross));
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0 round var(--radius-gross));
        transform: none;
    }
}

@keyframes foto-zoom {
    from {
        transform: scale(1.18);
    }
}

@keyframes karte-kippen {
    from {
        opacity: 0;
        transform: perspective(800px) translateY(2.2rem) rotateX(-22deg);
    }
}

@keyframes rahmen-zeichnen {
    from {
        opacity: 0;
        transform: translate(1.5rem, 1.5rem);
    }
}

html.einblenden-aktiv .gebaeude__foto[data-einblenden],
html.einblenden-aktiv .leistungsliste--karten li[data-einblenden],
html.einblenden-aktiv .gebaeude__warum .merkmale__punkt[data-einblenden] {
    transition: none;
    transform: none;
}

html.einblenden-aktiv .gebaeude__foto.ist-sichtbar {
    animation: foto-aufdecken 1s var(--kurve) both;
    animation-delay: calc(var(--verzoegerung, 0s) * 3);
}

html.einblenden-aktiv .gebaeude__foto.ist-sichtbar > img {
    animation: foto-zoom 1.6s var(--kurve) both;
    animation-delay: calc(var(--verzoegerung, 0s) * 3);
}

html.einblenden-aktiv .leistungsliste--karten li.ist-sichtbar,
html.einblenden-aktiv .gebaeude__warum .merkmale__punkt.ist-sichtbar {
    animation: karte-kippen 0.7s var(--kurve) both;
    animation-delay: calc(var(--verzoegerung, 0s) * 1.3);
}

html.einblenden-aktiv .leistungsliste--karten li.ist-sichtbar:hover {
    transform: translateY(-5px);
}

/* ---------- Fragetitel: Wörter hüpfen herein, das Fragezeichen schwingt nach ---------- */

@keyframes wort-huepfen {
    0% {
        opacity: 0;
        transform: translateY(0.6em) rotate(-4deg) scale(0.92);
    }
    60% {
        opacity: 1;
        transform: translateY(-0.12em) rotate(1.5deg) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes frage-schwung {
    0% {
        transform: rotate(-35deg) scale(0.4);
    }
    35% {
        transform: rotate(22deg) scale(1.25);
    }
    60% {
        transform: rotate(-12deg) scale(0.95);
    }
    80% {
        transform: rotate(6deg) scale(1.05);
    }
    100% {
        transform: none;
    }
}

@keyframes frage-wippen {
    0%,
    82%,
    100% {
        transform: none;
    }
    86% {
        transform: rotate(-14deg) translateY(-0.06em);
    }
    90% {
        transform: rotate(12deg);
    }
    94% {
        transform: rotate(-6deg);
    }
}

/* Großes Fragezeichen: schwebt, neigt sich fragend und „denkt nach" (Hüpfer) */
@keyframes frage-schweben {
    0%,
    100% {
        transform: none;
    }
    18% {
        transform: translateY(-0.06em) rotate(-9deg);
    }
    36% {
        transform: translateY(0.02em) rotate(7deg);
    }
    50% {
        transform: translateY(-0.03em) rotate(-3deg);
    }
    62% {
        transform: translateY(0) scale(1.06, 0.94);
    }
    72% {
        transform: translateY(-0.12em) scale(0.96, 1.05) rotate(4deg);
    }
    84% {
        transform: translateY(0) scale(1.04, 0.96);
    }
    92% {
        transform: none;
    }
}

@keyframes frage-leuchten {
    0%,
    100% {
        text-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    }
    50% {
        text-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), 0 0 38px rgba(233, 213, 168, 0.55);
    }
}

@keyframes hinweis-tropfen {
    0% {
        opacity: 0;
        transform: translateY(-3px);
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(3px);
    }
}

@keyframes hinweis-puls {
    50% {
        box-shadow: 0 0 0 11px rgba(204, 138, 63, 0);
    }
}

.hinweis__symbol {
    animation: hinweis-puls 2.6s ease-out infinite;
}

.hinweis__tropfen {
    animation: hinweis-tropfen 1.3s ease-in infinite;
}

html.einblenden-aktiv .fragetitel__wort {
    opacity: 0;
}

html.einblenden-aktiv .ist-sichtbar .fragetitel__wort {
    animation: wort-huepfen 0.7s var(--kurve) both;
    animation-delay: calc(0.15s + var(--i, 0) * 0.14s);
}

html.einblenden-aktiv .fragezeichen-gross {
    opacity: 0;
}

html.einblenden-aktiv .ist-sichtbar .fragezeichen-gross {
    opacity: 1;
    animation:
        frage-schwung 1.1s var(--kurve) 0.6s both,
        frage-schweben 4.5s ease-in-out 1.7s infinite,
        frage-leuchten 3s ease-in-out 1.7s infinite;
}

html.einblenden-aktiv .ist-sichtbar .fragetitel__zeichen {
    animation:
        frage-schwung 0.9s var(--kurve) 0.75s both,
        frage-schweben 4.5s ease-in-out 1.7s infinite;
}

/* Die Frage selbst leuchtet in Sonnen-Orange und pulsiert sanft */
@keyframes titel-leuchten {
    0%,
    100% {
        text-shadow: 0 0 14px rgba(204, 138, 63, 0.45);
    }
    50% {
        text-shadow: 0 0 10px rgba(233, 213, 168, 0.6), 0 0 34px rgba(204, 138, 63, 0.95);
    }
}

.pv-warum .fragetitel {
    animation: titel-leuchten 3s ease-in-out infinite;
}

/* ---------- Ablauf der PV-Reinigung: Schritt für Schritt ----------
   Je Schritt (--n): Kreis füllt sich, Symbol erscheint, Text blendet ein,
   dann zeichnet sich die Linie und das Symbol „reist" zum nächsten Schritt.
   Start über die Klasse „ist-gestartet" (js/animationen.js). */

@keyframes schritt-kreis {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    60% {
        opacity: 1;
        transform: scale(1.18);
    }
    100% {
        opacity: 1;
        transform: none;
        border-color: var(--farbe-tanne);
        background: var(--farbe-tanne);
        color: var(--farbe-text-hell);
    }
}

@keyframes schritt-text {
    from {
        opacity: 0;
        transform: translateY(0.8rem);
    }
}

@keyframes schritt-symbol {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-40deg);
    }
    70% {
        opacity: 1;
        transform: scale(1.25) rotate(8deg);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* Smartphone/Tablet: Schritte untereinander – Linie und Bote laufen nach unten */
@keyframes schritt-linie {
    from {
        transform: scaleY(0);
    }
}

@keyframes schritt-bote {
    0% {
        top: -0.75rem;
        opacity: 0;
        transform: scale(0.6);
    }
    12% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        transform: translateX(0.7rem) rotate(10deg);
    }
    88% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        top: calc(100% + var(--abstand-lg) - 0.75rem);
        opacity: 0;
        transform: scale(0.6);
    }
}

@media (min-width: 980px) {
    /* Desktop: Schritte nebeneinander – Linie und Bote laufen nach rechts, der Bote hüpft im Bogen */
    @keyframes schritt-linie {
        from {
            transform: scaleX(0);
        }
    }

    @keyframes schritt-bote {
        0% {
            left: 1.9rem;
            opacity: 0;
            transform: scale(0.6);
        }
        12% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            transform: translateY(-1.2rem) rotate(12deg) scale(1.1);
        }
        88% {
            opacity: 1;
            transform: scale(1);
        }
        100% {
            left: calc(100% + var(--abstand-md) + 1.9rem);
            opacity: 0;
            transform: scale(0.6);
        }
    }
}

html.einblenden-aktiv .ablauf--animiert > li::before {
    animation: schritt-kreis 0.4s var(--kurve) both paused;
    animation-delay: calc(var(--n, 0) * 0.55s);
}

html.einblenden-aktiv .ablauf--animiert > li > :is(h3, p) {
    animation: schritt-text 0.35s var(--kurve) both paused;
    animation-delay: calc(var(--n, 0) * 0.55s + 0.1s);
}

html.einblenden-aktiv .ablauf--animiert .ablauf__symbol {
    animation: schritt-symbol 0.32s var(--kurve) both paused;
    animation-delay: calc(var(--n, 0) * 0.55s + 0.12s);
}

html.einblenden-aktiv .ablauf--animiert > li::after {
    transform-origin: left top;
    animation: schritt-linie 0.35s ease-in-out both paused;
    animation-delay: calc(var(--n, 0) * 0.55s + 0.2s);
}

html.einblenden-aktiv .ablauf--animiert .ablauf__bote {
    animation: schritt-bote 0.4s ease-in-out both paused;
    animation-delay: calc(var(--n, 0) * 0.55s + 0.2s);
}

html.einblenden-aktiv .ablauf--animiert.ist-gestartet > li::before,
html.einblenden-aktiv .ablauf--animiert.ist-gestartet > li::after,
html.einblenden-aktiv .ablauf--animiert.ist-gestartet > li > :is(h3, p),
html.einblenden-aktiv .ablauf--animiert.ist-gestartet .ablauf__symbol,
html.einblenden-aktiv .ablauf--animiert.ist-gestartet .ablauf__bote {
    animation-play-state: running;
}

/* ---------- Osmose-Vorteile: Tropfen „fällt" herein, Haken zeichnet sich ---------- */

@keyframes tropfen-fall {
    0% {
        opacity: 0;
        transform: translateY(-1.4rem) rotate(45deg) scale(0.6);
    }
    70% {
        opacity: 1;
        transform: translateY(0.15rem) rotate(45deg) scale(1.08, 0.92);
    }
    100% {
        opacity: 1;
        transform: rotate(45deg);
    }
}

@keyframes haken-zeichnen {
    from {
        stroke-dashoffset: 16;
    }
}

html.einblenden-aktiv .pluspunkte li.ist-sichtbar .pluspunkte__symbol {
    animation: tropfen-fall 0.6s var(--kurve) both;
    animation-delay: calc(var(--verzoegerung, 0s) + 0.25s);
}

html.einblenden-aktiv .pluspunkte li.ist-sichtbar .pluspunkte__symbol path {
    stroke-dasharray: 16;
    animation: haken-zeichnen 0.4s ease-out both;
    animation-delay: calc(var(--verzoegerung, 0s) + 0.75s);
}

/* ---------- Kontaktformular: Felder kommen nacheinander, Flieger landet im Kopf ---------- */

@keyframes feld-herein {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
}

@keyframes flieger-landen {
    0% {
        opacity: 0;
        transform: translate(-4rem, 2.5rem) rotate(-25deg) scale(0.5);
    }
    70% {
        opacity: 1;
        transform: translate(0.3rem, -0.3rem) rotate(8deg) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes flieger-ab {
    0% {
        transform: none;
        opacity: 1;
    }
    100% {
        transform: translate(1.6rem, -1.6rem);
        opacity: 0;
    }
}

html.einblenden-aktiv .kontakt__formular.ist-sichtbar .kontakt__formular-symbol {
    animation: flieger-landen 0.8s var(--kurve) 0.35s both;
}

html.einblenden-aktiv .kontakt__formular.ist-sichtbar .formular > * {
    animation: feld-herein 0.55s var(--kurve) both;
}

html.einblenden-aktiv .kontakt__formular.ist-sichtbar .formular > :nth-child(1) { animation-delay: 0.3s; }
html.einblenden-aktiv .kontakt__formular.ist-sichtbar .formular > :nth-child(2) { animation-delay: 0.42s; }
html.einblenden-aktiv .kontakt__formular.ist-sichtbar .formular > :nth-child(3) { animation-delay: 0.54s; }
html.einblenden-aktiv .kontakt__formular.ist-sichtbar .formular > :nth-child(n + 4) { animation-delay: 0.66s; }

@keyframes laufband {
    to {
        transform: translateX(-50%);
    }
}

/* ---------- Warum PERTL GMBH? ----------
   Wörter klappen nacheinander hoch, das Fragezeichen fällt mit Schwung hinein und wippt weiter.
   Die Vorteile fliegen abwechselnd von links und rechts ein, danach ploppt der Haken auf.
   Das Meisterbetrieb-Siegel landet wie ein Stempel auf der Karte. */
.warum__frage {
    perspective: 600px;
}

.warum__wort,
.warum__fragezeichen {
    display: inline-block;
}

.warum__fragezeichen {
    margin-left: 0.04em;
    color: var(--farbe-sonne);
    transform-origin: 50% 90%;
}

html.einblenden-aktiv .warum__wort,
html.einblenden-aktiv .warum__fragezeichen {
    opacity: 0;
}

html.einblenden-aktiv .ist-sichtbar > .warum__frage .warum__wort {
    transform-origin: 50% 100%;
    animation: warum-wort 0.75s var(--kurve) both;
    animation-delay: calc(0.2s + var(--i) * 0.16s);
}

html.einblenden-aktiv .ist-sichtbar > .warum__frage .warum__fragezeichen {
    animation:
        warum-frage-fall 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both,
        warum-frage-wippen 3.2s ease-in-out 1.9s infinite;
}

@keyframes warum-wort {
    0% {
        opacity: 0;
        transform: translateY(0.6em) rotateX(-85deg);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes warum-frage-fall {
    0% {
        opacity: 0;
        transform: translateY(-1.4em) rotate(-140deg) scale(0.4);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes warum-frage-wippen {
    0%, 60%, 100% {
        opacity: 1;
        transform: rotate(0);
    }
    70% {
        opacity: 1;
        transform: rotate(14deg);
    }
    80% {
        opacity: 1;
        transform: rotate(-9deg);
    }
    90% {
        opacity: 1;
        transform: rotate(4deg);
    }
}

html.einblenden-aktiv .hakenliste--flug[data-einblenden] {
    opacity: 1;
    transform: none;
    transition: none;
    perspective: 900px;
}

html.einblenden-aktiv .hakenliste--flug li,
html.einblenden-aktiv .hakenliste--flug li::before {
    opacity: 0;
}

html.einblenden-aktiv .hakenliste--flug.ist-sichtbar li {
    --von: -4rem;
    --dreh: 35deg;
    animation: haken-flug 0.8s var(--kurve) both;
    animation-delay: calc(0.1s + var(--i) * 0.13s);
}

html.einblenden-aktiv .hakenliste--flug.ist-sichtbar li:nth-child(even) {
    --von: 4rem;
    --dreh: -35deg;
}

html.einblenden-aktiv .hakenliste--flug.ist-sichtbar li::before {
    animation:
        haken-plopp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        haken-ring 0.9s ease-out both;
    animation-delay: calc(0.55s + var(--i) * 0.13s);
}

.hakenliste--flug li:nth-child(1) { --i: 0; }
.hakenliste--flug li:nth-child(2) { --i: 1; }
.hakenliste--flug li:nth-child(3) { --i: 2; }
.hakenliste--flug li:nth-child(4) { --i: 3; }
.hakenliste--flug li:nth-child(5) { --i: 4; }
.hakenliste--flug li:nth-child(6) { --i: 5; }

@keyframes haken-flug {
    0% {
        opacity: 0;
        transform: translateX(var(--von)) rotateY(var(--dreh)) scale(0.9);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes haken-plopp {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes haken-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(204, 138, 63, 0.7);
    }
    100% {
        box-shadow: 0 0 0 0.75rem rgba(204, 138, 63, 0);
    }
}

html.einblenden-aktiv .warum__siegel {
    opacity: 0;
}

html.einblenden-aktiv .ist-sichtbar > .warum__siegel {
    animation: siegel-stempel 1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

@keyframes siegel-stempel {
    0% {
        opacity: 0;
        transform: translate(3rem, -4rem) rotate(-200deg) scale(2.4);
    }
    55% {
        opacity: 1;
        transform: translate(0, 0) rotate(8deg) scale(0.86);
    }
    75% {
        transform: rotate(-4deg) scale(1.07);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    html.einblenden-aktiv [data-einblenden],
    html.einblenden-aktiv .fragezeichen-gross,
    html.einblenden-aktiv .fragetitel__wort {
        opacity: 1;
        transform: none;
    }

    .start__medien {
        transform: none !important;
    }

    .laufband__spur {
        animation: none;
    }

    .knopf:hover,
    .bildrahmen:hover img {
        transform: none;
    }
}