/* ==========================================================================
   PERTL GMBH – Effekte (js/effekte.js)
   Hintergrundwörter, Haus-Wasserzeichen, Wort-für-Wort-Überschriften,
   Lichtstreifen über Fotos, magnetische Knöpfe.
   ========================================================================== */

/* ---------- Abschnitte mit Hintergrund-Deko ---------- */
.hat-deko {
    position: relative;
    isolation: isolate;
    overflow-x: clip; /* clip statt hidden: klebende Elemente (sticky) funktionieren weiter */
}

.hat-deko > :not(.deko-wort, .deko-haus, .bokeh) {
    position: relative;
    z-index: 1;
}

/* Großes Wort im Hintergrund – gleitet beim Scrollen seitlich (--x setzt das Skript) */
.deko-wort {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    font-family: var(--schrift-titel);
    font-size: clamp(5rem, 17vw, 17rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
    color: var(--farbe-tanne);
    opacity: 0.045;
    transform: translate(calc(-50% + var(--x, 0px)), -50%);
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

.bereich--dunkel .deko-wort,
.bereich--nacht .deko-wort,
.gebaeude__warum ~ .deko-wort {
    color: var(--farbe-text-hell);
    opacity: 0.05;
}

/* Variante oben im Abschnitt – sitzt hinter der Überschrift, wo kaum Inhalt liegt.
   So klein, dass ein langes Wort (MEISTERBETRIEB) samt seitlichem Gleiten ganz sichtbar bleibt. */
.deko-wort--oben {
    top: 0;
    font-size: clamp(1.5rem, 6.5vw, 9rem);
    opacity: 0.07;
    transform: translate(calc(-50% + var(--x, 0px)), -8%);
}

/* Kleinere Variante, damit mittellange Wörter (REINWASSER) samt Gleiten ganz sichtbar bleiben */
.deko-wort--klein {
    font-size: clamp(1.75rem, 8.5vw, 11rem);
    opacity: 0.065;
}

.deko-wort--mittel {
    font-size: clamp(2.5rem, 12vw, 13rem);
    opacity: 0.05;
}

/* Haus aus dem Firmenlogo, angeschnitten am Rand */
.deko-haus {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.deko-haus img {
    position: absolute;
    top: 50%;
    height: min(90%, 38rem);
    width: auto;
    max-width: none;
    opacity: 0.05;
    transform: translateY(-50%);
}

.deko-haus--links img {
    left: 0;
    transform: translate(-30%, -50%);
}

.deko-haus--rechts img {
    right: 0;
    transform: translate(30%, -50%) scaleX(-1);
}

/* Haus und Schriftzug nebeneinander wie in der Kopfzeile, links anliegend und so groß wie möglich:
   Gesamtbreite ≈ 6,3 × Höhe, daher begrenzt die Breite (abzüglich Rand) oder die Abschnittshöhe. */
.deko-haus--mit-name {
    container-type: size;
    --rand: clamp(0.5rem, 2vw, 2rem);
    --h: min(100cqh, (100cqw - 2 * var(--rand)) / 6.35);
}

.deko-haus__marke {
    position: absolute;
    top: 50%;
    left: var(--rand);
    display: flex;
    align-items: center;
    gap: calc(var(--h) * 0.28); /* gleiches Verhältnis wie in der Kopfzeile */
    height: var(--h);
    opacity: 0.05;
    transform: translateY(-50%);
}

.deko-haus--mit-name .deko-haus__marke img {
    position: static;
    width: auto;
    height: 100%;
    opacity: 1;
    transform: none;
}

.deko-haus--mit-name .deko-haus__marke img + img {
    height: 85%;
}

.bereich--dunkel .deko-haus img,
.bereich--nacht .deko-haus img {
    filter: brightness(0) invert(1);
}

/* ---------- Überschriften Wort für Wort ---------- */
.woerter .wort-ein {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.55em);
    filter: blur(4px);
    transition:
        opacity 0.6s var(--kurve),
        transform 0.6s var(--kurve),
        filter 0.6s var(--kurve);
    transition-delay: calc(var(--i) * 0.07s + 0.1s);
}

.woerter.woerter-sichtbar .wort-ein {
    opacity: 1;
    transform: none;
    filter: none;
}

/* ---------- Lichtstreifen über Fotos ---------- */
.wisch-licht {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.wisch-licht::before {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 45%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.05) 70%, transparent 100%);
    transform: translateX(-120%) skewX(-12deg);
}

.ist-gewischt > .wisch-licht::before {
    animation: licht-wisch 1.3s var(--kurve) 0.25s 1 both;
}

@keyframes licht-wisch {
    from {
        transform: translateX(-120%) skewX(-12deg);
    }
    to {
        transform: translateX(340%) skewX(-12deg);
    }
}

/* .leistung__bild und .weitere__bild brauchen einen Bezugsrahmen für den Streifen */
.leistung__bild,
.weitere__bild {
    position: relative;
}

/* ---------- Magnetische Knöpfe ---------- */
.ist-magnetisch {
    translate: var(--mx, 0px) var(--my, 0px);
    transition:
        translate 0.25s var(--kurve),
        background-color var(--dauer) var(--kurve),
        color var(--dauer) var(--kurve),
        border-color var(--dauer) var(--kurve),
        transform var(--dauer) var(--kurve),
        box-shadow var(--dauer) var(--kurve);
}

/* ---------- Hinweise an „Mehr …"-Links (data-hinweis) ----------
   Ohne .hinweis-laeuft (z. B. bei „Bewegung reduzieren") steht die fertige Zeichnung still da. */
[data-hinweis] {
    position: relative;
}

.link-hinweis {
    position: absolute;
    pointer-events: none;
}

.link-hinweis svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* PV: handgezeichneter Pfeil schwingt von rechts oben auf den Link zu */
.link-hinweis--pfeil {
    top: -0.4em;
    left: calc(100% + 0.2em);
    width: 2.6em;
    height: 1.75em;
    color: var(--farbe-sonne);
}

.link-hinweis--pfeil path {
    stroke-dasharray: 1;
}

.hinweis-laeuft .link-hinweis--pfeil path:first-child {
    animation: hinweis-zeichnen 4.6s var(--kurve) infinite;
}

.hinweis-laeuft .link-hinweis--pfeil path:last-child {
    animation: hinweis-zeichnen-spitze 4.6s var(--kurve) infinite;
}

.hinweis-laeuft .link-hinweis--pfeil {
    animation: hinweis-wippen 4.6s ease-in-out infinite;
}

/* Osmose: Kreis wird wie mit dem Stift um den Link gezogen */
.link-hinweis--kreis {
    inset: -0.75em -1.1em -0.65em -1em;
    color: var(--farbe-blatt);
    opacity: 0.85;
}

.link-hinweis--kreis path {
    stroke-dasharray: 1;
}

.hinweis-laeuft .link-hinweis--kreis path {
    animation: hinweis-zeichnen 5.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* Gebäude: drei Glanzfunken blitzen am Ende des Links auf */
.link-hinweis--funken {
    bottom: 55%;
    left: calc(100% + 0.1em);
    width: 1.1em;
    height: 1.1em;
    color: var(--farbe-sonne);
}

.link-hinweis--funken path {
    transform-origin: 0 100%;
}

.hinweis-laeuft .link-hinweis--funken path {
    animation: hinweis-funkeln 3.4s var(--kurve) infinite;
}

.hinweis-laeuft .link-hinweis--funken path:nth-child(2) {
    animation-delay: 0.08s;
}

.hinweis-laeuft .link-hinweis--funken path:nth-child(3) {
    animation-delay: 0.16s;
}

/* Trockeneis: drei Winkel laufen als Welle nach rechts */
[data-hinweis='winkel'] {
    margin-right: 2.1em;
}

.link-hinweis--winkel {
    top: 50%;
    left: calc(100% + 0.45em);
    width: 1.6em;
    height: 0.65em;
    margin-top: -0.4em;
    color: var(--farbe-sonne);
}

.hinweis-laeuft .link-hinweis--winkel path {
    animation: hinweis-welle 2.2s ease-in-out infinite;
}

.hinweis-laeuft .link-hinweis--winkel path:nth-child(2) {
    animation-delay: 0.18s;
}

.hinweis-laeuft .link-hinweis--winkel path:nth-child(3) {
    animation-delay: 0.36s;
}

/* ---------- „Mehr erfahren"-Knöpfe (data-knopf-hinweis) ---------- */
[data-knopf-hinweis] {
    position: relative;
}

[data-knopf-hinweis]::before,
[data-knopf-hinweis]::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
}

/* Osmose: zwei Wellenringe laufen wie nach einem Tropfen nach außen */
[data-knopf-hinweis='welle']::before,
[data-knopf-hinweis='welle']::after {
    inset: -2px;
    border: 2px solid var(--farbe-blatt-hell);
}

.hinweis-laeuft[data-knopf-hinweis='welle']::before {
    animation: knopf-welle 3.6s ease-out infinite;
}

.hinweis-laeuft[data-knopf-hinweis='welle']::after {
    animation: knopf-welle 3.6s ease-out 0.45s infinite;
}

/* Gebäude: heller Glanzstreifen wischt über den Knopf */
[data-knopf-hinweis='glanz'] {
    overflow: hidden;
}

[data-knopf-hinweis='glanz']::after {
    inset: 0 auto 0 0;
    width: 45%;
    border-radius: 0;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transform: translateX(-120%) skewX(-18deg);
}

.hinweis-laeuft[data-knopf-hinweis='glanz']::after {
    animation: knopf-glanz 4.2s var(--kurve) infinite;
}

/* Trockeneis: Pfeil stupst zweimal nach rechts, dazu ein sanfter Sonnenschein */
[data-knopf-hinweis='stups']::after {
    inset: 0;
    box-shadow: 0 0 0 0 rgba(204, 138, 63, 0.55);
    opacity: 1;
}

.hinweis-laeuft[data-knopf-hinweis='stups']::after {
    animation: knopf-schein 3s ease-out infinite;
}

.hinweis-laeuft[data-knopf-hinweis='stups'] svg {
    animation: knopf-stups 3s var(--kurve) infinite;
}

[data-knopf-hinweis]:hover::before,
[data-knopf-hinweis]:hover::after,
[data-knopf-hinweis]:hover svg {
    animation: none;
}

@keyframes knopf-welle {
    0% { opacity: 0.7; transform: scale(1); }
    45%, 100% { opacity: 0; transform: scale(1.14, 1.35); }
}

@keyframes knopf-glanz {
    0% { opacity: 1; transform: translateX(-120%) skewX(-18deg); }
    32%, 100% { opacity: 1; transform: translateX(260%) skewX(-18deg); }
}

@keyframes knopf-stups {
    0%, 15%, 25%, 100% { transform: translateX(0); }
    8% { transform: translateX(5px); }
    20% { transform: translateX(3px); }
}

@keyframes knopf-schein {
    0% { box-shadow: 0 0 0 0 rgba(204, 138, 63, 0.5); }
    40%, 100% { box-shadow: 0 0 0 10px rgba(204, 138, 63, 0); }
}

@keyframes hinweis-zeichnen {
    0% { stroke-dashoffset: 1; opacity: 1; }
    28%, 72% { stroke-dashoffset: 0; opacity: 1; }
    88%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes hinweis-zeichnen-spitze {
    0%, 22% { stroke-dashoffset: 1; opacity: 1; }
    34%, 72% { stroke-dashoffset: 0; opacity: 1; }
    88%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes hinweis-wippen {
    0%, 34%, 72%, 100% { transform: translate(0, 0); }
    44% { transform: translate(-3px, 2px); }
    54% { transform: translate(0, 0); }
    62% { transform: translate(-2px, 1px); }
}

@keyframes hinweis-funkeln {
    0%, 52%, 100% { opacity: 0; transform: scale(0.3); }
    60% { opacity: 1; transform: scale(1.1); }
    74% { opacity: 1; transform: scale(1); }
    86% { opacity: 0; transform: scale(1.15); }
}

@keyframes hinweis-welle {
    0%, 100% { opacity: 0.2; transform: translateX(0); }
    40% { opacity: 1; transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .deko-wort {
        transform: translate(-50%, -50%);
    }

    .deko-wort--oben {
        transform: translate(-50%, -8%);
    }

    .deko-wort--rechts {
        left: auto;
        right: 4vw;
        transform: translateY(-50%);
    }

    .deko-wort--oben.deko-wort--rechts {
        transform: translateY(-8%);
    }

    .woerter .wort-ein {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .wisch-licht {
        display: none;
    }
}

@media (max-width: 720px) {
    .deko-haus img {
        height: min(60%, 18rem);
    }
}