/* ============================================================
   Der Taubenflug der Hochzeitsseite (Praefix lpm-taube)

   Sechs Bilder nebeneinander, eine Taube, die den Ring von links
   nach rechts traegt und ihn am Ende wieder ablegt.

   ZWEI FASSUNGEN, EINE DATEI — wie bei den anderen beiden Fahrten.
   Ohne .is-aktiv (kein JavaScript, prefers-reduced-motion) stehen die
   sechs Szenen als gewoehnliche Abschnitte UNTEREINANDER, Taube und
   Ring sind weg, und die Seite ist vollstaendig lesbar. Die Reise ist
   Zier; der Text traegt sich selbst.

   Die Zahlen fuer Flug und Ring kommen aus lp-taube.js. Hier steht
   nur, wie es aussieht.
   ============================================================ */

/* ── RUHENDE FASSUNG ──────────────────────────────────────── */

.lpm-taube { padding: clamp(2.4rem, 5vw, 4rem) 0; }
.lpm-taube__buehne { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
.lpm-taube__bahn { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

.lpm-taube:not(.is-aktiv) .lpm-taube__flug,
.lpm-taube:not(.is-aktiv) .lpm-taube__leiste,
.lpm-taube:not(.is-aktiv) .lpm-taube__kissen { display: none; }

.lpm-taube__szene { display: grid; gap: 1.4rem; align-items: center; }
@media (min-width: 62rem) {
    .lpm-taube__szene { grid-template-columns: 1fr 1fr; }
}
.lpm-taube__text { max-width: 44ch; }
.lpm-taube__nummer {
    font-size: .72rem; font-weight: 800; letter-spacing: .14em;
    color: var(--brand-primary, #226CEA);
}
.lpm-taube__szene h3 {
    margin: .5rem 0 .6rem;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 800; line-height: 1.06; letter-spacing: -.025em;
}
.lpm-taube__szene h3 em { font-style: italic; font-weight: 800; }
.lpm-taube__szene p {
    margin: 0; font-size: 1rem; line-height: 1.65;
    color: var(--neutral-text-muted, #586678);
}
.lpm-taube__nutzen {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-top: .9rem; font-size: .88rem; font-weight: 650;
    color: var(--brand-anthracite, #0F172A);
}
.lpm-taube__bild { display: grid; justify-items: center; gap: .5rem; }
.lpm-taube__bild img {
    display: block; max-width: 100%; height: auto; border-radius: 14px;
    box-shadow: 0 1.2rem 2.6rem rgba(15, 23, 42, .16);
}
.lpm-taube__bildnote {
    font-size: .7rem; letter-spacing: .05em;
    color: var(--neutral-text-muted, #586678);
}

/* Das Schlussfoto: im Ruhezustand ein normales Bild mit Bildunterschrift. */
.lpm-taube__foto { margin: 0; display: grid; justify-items: center; gap: .6rem; }
.lpm-taube__foto img {
    display: block; width: min(20rem, 70%); height: auto;
    border-radius: 10px; border: 1px solid var(--neutral-border, #E7E2D8);
    box-shadow: 0 1.4rem 3rem rgba(70, 56, 37, .18);
    background: #FFFDFA; padding: .6rem;
}
.lpm-taube__foto figcaption {
    display: flex; gap: .8rem; align-items: baseline;
    font-size: .85rem; color: var(--neutral-text-muted, #586678);
}
.lpm-taube__foto figcaption b { font-weight: 700; color: var(--brand-anthracite, #0F172A); }

/* ── AKTIVE FASSUNG: die Reise ────────────────────────────── */

/*
 * Sechs Bildschirme Scrollweg fuer sechs Szenen. Die Hoehe steht nur
 * hier: ohne Skript waeren es sechs leere Schirme statt einer
 * lesbaren Liste.
 */
.lpm-taube.is-aktiv { height: 600vh; padding: 0; }

.lpm-taube.is-aktiv .lpm-taube__buehne {
    position: sticky; top: var(--header-h, 62px);
    height: calc(100svh - var(--header-h, 62px));
    max-width: none; margin: 0; padding: 0;
    overflow: hidden; isolation: isolate;
    background: #FAF6EF;
}

/*
 * Die Bildreihe: sechs Szenen nebeneinander, jede so breit wie die
 * Buehne. Das Skript verschiebt sie nach links — ein Fortschritt von
 * eins ist genau eine Buehnenbreite.
 */
.lpm-taube.is-aktiv .lpm-taube__bahn {
    display: flex; gap: 0; height: 100%; width: 600%;
    will-change: transform;
}
.lpm-taube.is-aktiv .lpm-taube__szene {
    position: relative; flex: 0 0 16.6667%; width: 16.6667%; height: 100%;
    display: block; overflow: hidden;
}
.lpm-taube.is-aktiv .lpm-taube__text {
    position: absolute; left: clamp(1.4rem, 7vw, 6rem); top: 24%;
    width: min(34rem, 40%); max-width: none; z-index: 5;
}
.lpm-taube.is-aktiv .lpm-taube__bild {
    position: absolute; left: 55%; top: 26%; width: min(34rem, 38%);
    justify-items: start;
}
/*
 * In der Reise begrenzt die HOEHE das Bild, nicht die Breite.
 *
 * Die Buehne ist einen Bildschirm hoch und schneidet ab, was darueber
 * hinausgeht. Ein Hochformat — der Tagesablauf ist 1000x1419, ein
 * Handy-Screenshot noch schmaler — wurde bei 38 Prozent Breite ueber
 * tausend Pixel hoch und lag damit zur Haelfte ausserhalb. In der
 * ruhenden Fassung stimmt die Breitenbegrenzung weiter, dort ist die
 * Seite so hoch, wie sie sein muss.
 */
.lpm-taube.is-aktiv .lpm-taube__bild img {
    max-height: 56svh; width: auto; max-width: 100%;
}
.lpm-taube.is-aktiv .lpm-taube__foto {
    position: absolute; left: 56%; top: 16%; width: min(22rem, 32%);
    justify-items: start;
    opacity: var(--t-foto, 0);
    transform: translateY(calc((1 - var(--t-foto, 0)) * 28px));
}
.lpm-taube.is-aktiv .lpm-taube__foto img { width: 100%; }

/* Jede Szene bekommt ihren eigenen Grund — sonst merkt niemand, dass
   man sich von einer zur naechsten bewegt. */
.lpm-taube.is-aktiv .lpm-taube__szene:nth-child(1) { background: #FAF6EF; }
.lpm-taube.is-aktiv .lpm-taube__szene:nth-child(2) { background: #EEF2F7; }
.lpm-taube.is-aktiv .lpm-taube__szene:nth-child(3) { background: #F6F0E7; }
.lpm-taube.is-aktiv .lpm-taube__szene:nth-child(4) { background: #EEF3EF; }
.lpm-taube.is-aktiv .lpm-taube__szene:nth-child(5) { background: #EAF0F7; }
.lpm-taube.is-aktiv .lpm-taube__szene:nth-child(6) { background: #F6EEE5; }

/* Das Ringkissen liegt in der ersten und in der letzten Szene an
   derselben Stelle — dort wird der Ring geholt und dorthin zurueck. */
.lpm-taube__kissen {
    position: absolute; left: 73%; top: 66%;
    width: min(36vw, 30rem); transform: translate(-50%, -50%);
    filter: drop-shadow(0 24px 21px rgba(78, 61, 32, .13));
}
.lpm-taube__kissen--ende { opacity: var(--t-kissen, 1); }

/* ── Taube und Ring ───────────────────────────────────────── */

.lpm-taube__flug {
    position: absolute; inset: 0; z-index: 8; pointer-events: none;
}

/*
 * Der Flügelschlag kommt aus EINEM Bild.
 *
 * hochzeit-taube.webp ist ein Blatt mit vier Flugphasen (2x2). Vier
 * Ebenen zeigen je einen Ausschnitt davon und blenden sich reihum
 * ein — zusammen ergibt das den Schlag, ohne vier Dateien und ohne
 * ein Video.
 *
 * Die krummen Prozentwerte in transform sind kein Zufall und nicht zu
 * runden: sie schieben jede Phase so, dass der SCHNABEL genau auf dem
 * Ankerpunkt liegt. Nur deshalb sitzt der Ring beim Aufnehmen und
 * Ablegen an derselben Stelle wie der Schnabel. Uebernommen aus dem
 * Prototypen.
 */
.lpm-taube__vogel {
    position: absolute; aspect-ratio: 3 / 2; transform-origin: 0 0;
    filter: drop-shadow(0 8px 7px rgba(38, 53, 68, .09));
}
.lpm-taube__vogel i {
    position: absolute; inset: 0; display: block;
    background-image: url("/assets/landing/fotos/hochzeit-taube.webp");
    background-size: 200% 200%; background-repeat: no-repeat;
    opacity: 0; animation: lpm-fluegelschlag .8s steps(1, end) infinite;
}
.lpm-taube__vogel i:nth-child(1) { background-position: 0 0;       transform: translate(-93.099%, -72.266%); animation-delay: 0s; }
.lpm-taube__vogel i:nth-child(2) { background-position: 100% 0;    transform: translate(-82.292%, -72.266%); animation-delay: -.6s; }
.lpm-taube__vogel i:nth-child(3) { background-position: 0 100%;    transform: translate(-93.099%, -39.453%); animation-delay: -.4s; }
.lpm-taube__vogel i:nth-child(4) { background-position: 100% 100%; transform: translate(-82.552%, -39.648%); animation-delay: -.2s; }
@keyframes lpm-fluegelschlag {
    0%, 24.99% { opacity: 1; }
    25%, 100%  { opacity: 0; }
}

.lpm-taube__ring {
    position: absolute; height: auto; transform-origin: 50% 0;
    filter: drop-shadow(0 2px 2px rgba(86, 54, 0, .15));
}

/* ── Stationsleiste ───────────────────────────────────────── */

.lpm-taube__leiste {
    position: absolute; z-index: 30; left: 50%; bottom: 1.4rem;
    transform: translateX(-50%);
    display: flex; gap: .5rem; align-items: center;
}
.lpm-taube__station {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: rgba(15, 23, 42, .18);
    transition: background .3s ease, transform .3s ease;
}
.lpm-taube__station.is-hier {
    background: var(--brand-primary, #226CEA); transform: scale(1.5);
}

/* ── Handy ────────────────────────────────────────────────── */

@media (max-width: 760px) {
    .lpm-taube.is-aktiv .lpm-taube__text {
        left: 7%; right: 7%; top: 11%; width: auto;
    }
    .lpm-taube.is-aktiv .lpm-taube__bild,
    .lpm-taube.is-aktiv .lpm-taube__foto {
        left: 7%; right: 7%; width: auto; top: 46%;
        justify-items: center;
    }
    .lpm-taube.is-aktiv .lpm-taube__foto { top: 40%; }
    /* Auf dem Handy steht der Text darueber und nimmt Platz weg. */
    .lpm-taube.is-aktiv .lpm-taube__bild img { max-height: 40svh; }
    .lpm-taube.is-aktiv .lpm-taube__foto img { max-height: 44svh; width: auto; }
    .lpm-taube__kissen { left: 50%; width: 66vw; }
}