/* ===================================================================== Küstenwind Alpakas — Bewegungssystem · "Wind vom Haff" --------------------------------------------------------------------- EIN ganzheitliches Konzept für Animationen & Übergänge. Idee: Alles kommt wie eine Böe vom Salzhaff — langsam, weich, von unten herangetragen — und legt sich dann sanft. Nichts ruckt, nichts hektet. Das spiegelt das Wesen der Tiere (ruhig, neugierig, gelassen) und der Küste (Drift, Wiegen, Ankommen). Diese Datei lädt NACH v5-styles.css und vereinheitlicht, was dort bislang verstreut & nur stellenweise umgesetzt war: · eine einzige Bewegungs-Sprache (Dauer · Kurve · Weg · Takt) · ein einziger Reveal-Auftritt, der Geschwister sanft staffelt · derselbe filmische Auftritt für JEDE Seite (Hero & Masthead) · sanfte Überblendung von Seite zu Seite · konsistente Mikro-Interaktionen (Hover · Fokus · Druck) ===================================================================== */ /* --------------------------------------------------------------------- 1 · Tokens — die Quelle der Wahrheit für Bewegung --------------------------------------------------------------------- */ .v5 { /* — Dauer — */ --m-quick: 0.28s; /* Mikro-Zustände: Hover, Fokus, Toggle */ --m-base: 0.55s; /* Standard: Karten, Panels, Überblendung */ --m-slow: 1.05s; /* Auftritt: Reveal, Masthead, Hero */ --m-drift: 1.25s; /* lange Wege: Bild-Zoom */ /* — Kurven — --e-settle ist die Signatur des Hofs: trägt etwas heran und legt es weich ab. Sie war schon überall im Einsatz; jetzt ist sie ein benanntes Token, damit ALLES dieselbe Hand-schrift bekommt. */ --e-settle: cubic-bezier(.2, .7, .2, 1); /* heranwehen & ablegen */ --e-soft: cubic-bezier(.4, 0, .2, 1); /* weicher Zustandswechsel */ --e-out: cubic-bezier(.16, 1, .3, 1); /* sehr sanftes Auslaufen */ /* — Weg & Takt — */ --m-rise: 28px; /* Versatz von unten beim Reveal */ --m-rise-sm: 14px; --m-stagger: 0.09s; /* Grundtakt zwischen gestaffelten Nachbarn */ } /* --------------------------------------------------------------------- 2 · Reveal-on-scroll — EIN Auftritt für die ganze Seite Die JS-Engine (v5-motion.js) staffelt benachbarte .reveal, die gemeinsam ins Bild kommen, über --rv-delay. Die Kurve & Dauer leben ab jetzt hier, damit jeder Reveal exakt gleich "ankommt". --------------------------------------------------------------------- */ .v5 .reveal { opacity: 0; transform: translateY(var(--m-rise)); transition: opacity var(--m-slow) var(--e-settle), transform var(--m-slow) var(--e-settle); transition-delay: var(--rv-delay, 0s); /* will-change NUR solange der Auftritt noch aussteht — ein einmaliger Reveal braucht keine dauerhafte Compositor-Ebene. Sonst hält der Browser auf langen Seiten dutzende Layer aktiv → Scroll-Ruckeln. */ will-change: opacity, transform; } .v5 .reveal.in { opacity: 1; transform: none; will-change: auto; } /* feste Staffel-Stufen bleiben nutzbar und sprechen dieselbe Variable */ .v5 .reveal--lag { --rv-delay: 0.12s; } .v5 .reveal--lag2 { --rv-delay: 0.24s; } .v5 .reveal--lag3 { --rv-delay: 0.36s; } /* --------------------------------------------------------------------- 3 · Seiten-Übergang — Kontinuität von Seite zu Seite Beim Laden blendet der Inhalt sanft auf; beim Klick auf einen internen Link weht er kurz aus, bevor navigiert wird. Nur Opacity → bricht keine fixierten Header / kein Containing-Block-Problem. --------------------------------------------------------------------- */ #v5root { animation: kw-page-in var(--m-base) var(--e-settle) both; } @keyframes kw-page-in { from { opacity: 0; } to { opacity: 1; } } html.kw-leaving #v5root { opacity: 0; transition: opacity 0.30s var(--e-soft); } /* --------------------------------------------------------------------- 4 · Masthead-Auftritt — der filmische Einstieg JEDER Unterseite Bisher hatte nur die Startseite einen inszenierten Hero. Jeder Masthead bekommt jetzt denselben gestaffelten Auftritt + die wortweise einwehende Überschrift wie der Hero. --------------------------------------------------------------------- */ .v5 .v5h-masthead__inner > * { animation: kw-rise var(--m-slow) var(--e-settle) both; } .v5 .v5h-masthead__inner > *:nth-child(1) { animation-delay: 0.06s; } .v5 .v5h-masthead__inner > *:nth-child(2) { animation-delay: 0.18s; } .v5 .v5h-masthead__inner > *:nth-child(3) { animation-delay: 0.50s; } .v5 .v5h-masthead__inner > *:nth-child(4) { animation-delay: 0.62s; } .v5 .v5h-masthead__inner > *:nth-child(5) { animation-delay: 0.72s; } .v5 .v5h-masthead__inner > *:nth-child(n+6) { animation-delay: 0.80s; } @keyframes kw-rise { from { opacity: 0; transform: translateY(var(--m-rise)); } to { opacity: 1; transform: none; } } /* Wortweise einwehende Masthead-Überschrift (Splitting via JS). 05.10.: Die H1 lief vorher ZWEIMAL ein (erst als Block, dann wortweise). Jetzt wartet sie unsichtbar auf das Splitting; lädt JS nicht, blendet sie nach 2,5 s einfach als Block ein. */ .v5 .v5h-masthead__inner > .v5h-masthead__title:not(.is-split) { opacity: 0; transform: none; animation: kw-h1-fallback .6s ease 2.5s forwards; } @keyframes kw-h1-fallback { to { opacity: 1; } } .v5 .v5h-masthead__inner > .v5h-masthead__title.is-split { animation: none; opacity: 1; transform: none; } .v5 .v5h-masthead__title .kw-word { display: inline-block; opacity: 0; transform: translateY(0.5em); filter: blur(8px); animation: kw-word var(--m-slow) var(--e-settle) both; } @keyframes kw-word { to { opacity: 1; transform: none; filter: blur(0); } } /* --------------------------------------------------------------------- 5 · Wind im Masthead — ruhige Drift wie im Hero (von JS eingesetzt) Wollgras-Tufts ziehen langsam durchs Petrol-Band, damit auch die Unterseiten "atmen" statt still zu stehen. --------------------------------------------------------------------- */ .v5 .v5h-masthead__drift { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } .v5 .v5h-masthead__drift svg { position: absolute; will-change: transform; animation: drift 46s linear infinite; } /* Position, Größe (--s), Deckkraft & Laufzeiten setzt v5-motion.js pro Tuft inline — so ziehen mehrere gestreut durchs Band, unabhängig von nth-child. */ /* --------------------------------------------------------------------- 6 · Mikro-Interaktionen — überall dieselbe Reaktion --------------------------------------------------------------------- */ /* Druck-Feedback: alles, was klickbar ist, gibt minimal nach. */ .v5 .vbtn:active, .v5 .v5k-quick a:active, .v5 .v5-card:active { transform: translateY(1px) scale(0.985); transition-duration: var(--m-quick); } /* Buttons folgen der Signatur-Kurve, auch beim Loslassen. */ .v5 .vbtn { transition: transform var(--m-quick) var(--e-settle), background var(--m-quick) var(--e-soft), color var(--m-quick) var(--e-soft), box-shadow var(--m-base) var(--e-settle); } /* Ein einziger, konsistenter Fokus-Ring (Tastatur). */ .v5 a:focus-visible, .v5 button:focus-visible, .v5 input:focus-visible, .v5 textarea:focus-visible, .v5 [tabindex]:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 3px; } /* --------------------------------------------------------------------- 7 · Reduzierte Bewegung — alles ruhig, nichts geht verloren --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #v5root { animation: none; opacity: 1; } html.kw-leaving #v5root { opacity: 1; transition: none; } .v5 .reveal, .v5 .reveal.in { opacity: 1; transform: none; transition: none; } .v5 .v5h-masthead__inner > *, .v5 .v5h-masthead__inner > .v5h-masthead__title:not(.is-split), .v5 .v5h-masthead__title.is-split, .v5 .v5h-masthead__title .kw-word { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } .v5 .v5h-masthead__drift { display: none; } .v5 .vbtn:active, .v5 .v5-card:active { transform: none; } }