/* ═══════════════════════════════════════════════════════════════ * formstube · Controlling · Page-Transitions * ─────────────────────────────────────────────────────────────── * Brand-konforme Seiten-Übergänge für Desktop. * Engine: View Transitions API (Cross-Document, Chrome 126+ / Safari 18+) * Fallback: same-document overlay-fade via fs-transitions.js * * Modi (Datenattribut auf : data-fs-transition): * off — keine Animation * slide — neue Seite wischt von rechts rein (default) * slide-up — neue Seite wischt von unten hoch * fade — Cross-Fade * hex — Lime-Hex-Mask wischt über den Screen * * Mobile (< 880px) wird IGNORIERT — Touch-Gestures + Browser-Back * sollen native bleiben. data-fs-transition wird auf 'off' geforced. * * Respektiert prefers-reduced-motion → Animation auf 0.01s reduziert. * ═══════════════════════════════════════════════════════════════ */ /* Cross-Document View Transitions ─────────────────────────────── */ @view-transition { navigation: auto; } /* Wenn off oder Mobile: View Transitions deaktivieren */ html[data-fs-transition="off"] { view-transition-name: none; } /* ─── Base: Default mPDF-style Cross-Fade (fade) ──────────────── */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 380ms; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); mix-blend-mode: normal; } ::view-transition-old(root) { animation-name: fs-fade-out; } ::view-transition-new(root) { animation-name: fs-fade-in; } @keyframes fs-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes fs-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ─── slide (default) · neue Seite kommt von rechts ──────────── */ html[data-fs-transition="slide"]::view-transition-old(root) { animation-name: fs-slide-out-left; animation-duration: 320ms; } html[data-fs-transition="slide"]::view-transition-new(root) { animation-name: fs-slide-in-right; animation-duration: 360ms; } @keyframes fs-slide-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-3%); opacity: 0; } } @keyframes fs-slide-in-right { from { transform: translateX(100%); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } } /* ─── slide-up ─────────────────────────────────────────────────── */ html[data-fs-transition="slide-up"]::view-transition-old(root) { animation-name: fs-slide-out-up; animation-duration: 280ms; } html[data-fs-transition="slide-up"]::view-transition-new(root) { animation-name: fs-slide-in-up; animation-duration: 360ms; } @keyframes fs-slide-out-up { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-2%); opacity: 0; } } @keyframes fs-slide-in-up { from { transform: translateY(6%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ─── fade · explizit (überschreibt default für Klarheit) ──── */ html[data-fs-transition="fade"]::view-transition-old(root) { animation-name: fs-fade-out; animation-duration: 240ms; } html[data-fs-transition="fade"]::view-transition-new(root) { animation-name: fs-fade-in; animation-duration: 320ms; } /* ─── hex · Brand-Special · Lime-Hex wischt über den Screen ─── */ html[data-fs-transition="hex"]::view-transition-old(root) { animation: fs-hex-wipe-out 460ms cubic-bezier(0.7, 0, 0.3, 1) forwards; } html[data-fs-transition="hex"]::view-transition-new(root) { animation: fs-hex-wipe-in 460ms cubic-bezier(0.7, 0, 0.3, 1) forwards; } @keyframes fs-hex-wipe-out { from { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1; } to { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); opacity: 0.4; } } @keyframes fs-hex-wipe-in { from { clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); opacity: 0.6; } to { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1; } } /* ─── Reduced-Motion · Respektiert User-Preference ────────────── */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.01s !important; } } /* ─── Mobile · alle Transitions off ──────────────────────────── */ @media (max-width: 879px) { html[data-fs-transition] { view-transition-name: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } /* ═══════════════════════════════════════════════════════════════ * Fallback-Overlay für Browser ohne Cross-Document View Transitions * (z.B. Firefox · ältere Safari) · gerendert via fs-transitions.js * ═══════════════════════════════════════════════════════════════ */ .fs-trans-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; background: #0A0A0C; transition: opacity 280ms cubic-bezier(0.65, 0, 0.35, 1); will-change: opacity, transform; } .fs-trans-overlay.is-active { pointer-events: auto; opacity: 1; } /* Lime-Hex-Wisch im Overlay als Brand-Touch */ .fs-trans-overlay::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(216,255,60,0.10) 0%, transparent 60%), #0A0A0C; clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); transform: scale(0); transition: transform 360ms cubic-bezier(0.65, 0, 0.35, 1); transform-origin: center; } .fs-trans-overlay.is-active::before { transform: scale(2.4); } /* Loading-Hex im Center · pulsiert */ .fs-trans-overlay::after { content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; background: #D8FF3C; clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); opacity: 0; transition: opacity 200ms ease 80ms; animation: fs-trans-pulse 1.2s ease-in-out infinite; } .fs-trans-overlay.is-active::after { opacity: 1; } @keyframes fs-trans-pulse { 0%, 100% { transform: scale(0.85); opacity: 0.9; } 50% { transform: scale(1.05); opacity: 1; } }