/* css/parallax.css
   Cluster Parallax: Der Strand-SVG als fixe Hintergrundebene.
   Verantwortlich für das Einpassen in den Viewport (Aspect-Ratio, dvh/vw)
   und die Ziel-Position der Ebenen. Die eigentliche Scroll-Bewegung treibt
   js/parallax.js über CSS-Variablen an – alle Klassen mit Präfix .parallax-. */

/* Die Inline-Szene liegt hinter dem Inhalt und bleibt am Viewport
   fixiert. Abschneiden statt Skalieren erhält das Seitenverhältnis der
   Originalgrafik und verhindert dabei leere Ränder. */
.parallax-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Die Höhe kommt aus js/scene-size.js: eine gerundete, feste
       Pixelhöhe. Ohne Skript bleibt es bei der großen Viewport-Höhe
       (100lvh bzw. 100vh), die nicht mit der Browserleiste mitwandert. */
    height: 100vh;
    height: 100lvh;
    height: var(--scene-height, 100vh);
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ViewBox 1920×1305: Breite und Höhe decken den Viewport jeweils
   vollständig ab. dvh berücksichtigt die ein-/ausblendende Browserleiste
   auf Mobilgeräten; vw deckt die jeweils andere Achse ab. */
.parallax-bg > svg {
    position: absolute;
    top: 50%;
    left: 0;
    /* Feste Szenenhöhe statt dvh: Die Szene darf beim Scrollen nicht
       mit der mobilen Browserleiste mitwachsen. */
    width: max(100vw, calc(var(--scene-height, 100vh) * 1.471265));
    height: max(var(--scene-height, 100vh), 67.96875vw);
    max-width: none; /* base.css begrenzt normale SVGs auf 100 % */
    aspect-ratio: 1920 / 1305;
    /* Bei Hochformat wird seitlich abgeschnitten. Links verankern wie
       die Vorlage, damit die Palmengruppe im Vordergrund erhalten bleibt. */
    transform: translate3d(0, -50%, 0);
    will-change: transform; /* einzige dauerhafte SVG-Compositing-Hilfe */
}

/* Die Ebenen bewegen sich über Cluster-Klassen statt globaler SVG-IDs.
   Die individuelle translate-Eigenschaft erhält bestehende SVG-Matrizen
   (insbesondere die Drehung der Palmen) und ergänzt nur die Verschiebung. */
.parallax-bg .parallax-layer {
    translate: var(--par-x, 0px) var(--par-y, 0px);
}

/* Segelboot (Aufgabe 44): liegt als eigene Ebene hinter der vorderen
   Insel. Die Position setzt js/boat.js als SVG-Transform. */
.boat-layer {
    pointer-events: none;
}

.boat__hull { fill: #3a2a1e; }
.boat__deck { fill: #6b4a2f; }
.boat__mast { stroke: #3a2a1e; stroke-width: 3; }
.boat__sail { fill: #f7f5ea; }
.boat__sail--jib { fill: #eae2cf; }
.boat__flag { fill: var(--color-accent); }