/* ========================================================================== Motion Principes: 1. Snel en functioneel: de meeste UI-animaties duren 140–360ms. 2. Alles beweegt vanuit z'n oorsprong (dropdown vanaf de trigger, toast van onder). 3. Binnenkomen = ease-out, weggaan = ease-in en korter. 4. Alleen transform + opacity animeren (GPU-vriendelijk). 5. prefers-reduced-motion zet alle duraties op 0 (zie tokens.css). ========================================================================== */ @keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } @keyframes fade-out { from { opacity: 1 } to { opacity: 0 } } @keyframes fade-up { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } } @keyframes fade-down { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } } @keyframes slide-in-r { from { opacity: 0; transform: translateX(14px) } to { opacity: 1; transform: none } } @keyframes slide-in-l { from { opacity: 0; transform: translateX(-14px) } to { opacity: 1; transform: none } } @keyframes scale-in { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: none } } @keyframes scale-out { from { opacity: 1; transform: none } to { opacity: 0; transform: scale(.97) } } @keyframes pop-in { 0% { opacity: 0; transform: scale(.6) } 60% { opacity: 1; transform: scale(1.08) } 100% { transform: scale(1) } } @keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.98) } to { opacity: 1; transform: none } } @keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.98) } } @keyframes spin { to { transform: rotate(360deg) } } @keyframes shimmer { from { background-position: -200% 0 } to { background-position: 200% 0 } } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .35) } 100% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0) } } @keyframes draw { to { stroke-dashoffset: 0 } } @keyframes gradient-pan { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes shake { 10%, 90% { transform: translateX(-1px) } 20%, 80% { transform: translateX(2px) } 30%, 50%, 70% { transform: translateX(-3px) } 40%, 60% { transform: translateX(3px) } } /* --- Utility-klassen ------------------------------------------------------ Gebruik:
→ --i bepaalt stagger. */ .anim-fade-in { animation: fade-in var(--dur-base) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); } .anim-fade-up { animation: fade-up var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); } .anim-fade-down { animation: fade-down var(--dur-base) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); } .anim-slide-r { animation: slide-in-r var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); } .anim-slide-l { animation: slide-in-l var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); } .anim-scale-in { animation: scale-in var(--dur-base) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); } .anim-pop { animation: pop-in var(--dur-slow) var(--ease-spring) both; animation-delay: calc(var(--i, 0) * var(--stagger)); } .anim-shake { animation: shake .4s var(--ease-in-out); } .anim-spin { animation: spin .8s linear infinite; } .anim-pulse { animation: pulse-ring 1.4s var(--ease-out) infinite; } /* Stagger alle directe kinderen automatisch */ .stagger > * { animation: fade-up var(--dur-slow) var(--ease-out) both; } .stagger > *:nth-child(1) { animation-delay: calc(0 * var(--stagger)); } .stagger > *:nth-child(2) { animation-delay: calc(1 * var(--stagger)); } .stagger > *:nth-child(3) { animation-delay: calc(2 * var(--stagger)); } .stagger > *:nth-child(4) { animation-delay: calc(3 * var(--stagger)); } .stagger > *:nth-child(5) { animation-delay: calc(4 * var(--stagger)); } .stagger > *:nth-child(6) { animation-delay: calc(5 * var(--stagger)); } .stagger > *:nth-child(7) { animation-delay: calc(6 * var(--stagger)); } .stagger > *:nth-child(8) { animation-delay: calc(7 * var(--stagger)); } .stagger > *:nth-child(9) { animation-delay: calc(8 * var(--stagger)); } .stagger > *:nth-child(10) { animation-delay: calc(9 * var(--stagger)); } .stagger > *:nth-child(n+11) { animation-delay: calc(10 * var(--stagger)); } /* Varianten voor zijwaartse module-wissel */ .stagger-x > * { animation: slide-in-r var(--dur-slow) var(--ease-out) both; } .stagger-x > *:nth-child(2) { animation-delay: calc(1 * var(--stagger)); } .stagger-x > *:nth-child(3) { animation-delay: calc(2 * var(--stagger)); } .stagger-x > *:nth-child(4) { animation-delay: calc(3 * var(--stagger)); } .stagger-x > *:nth-child(5) { animation-delay: calc(4 * var(--stagger)); } .stagger-x > *:nth-child(6) { animation-delay: calc(5 * var(--stagger)); } .stagger-x > *:nth-child(n+7) { animation-delay: calc(6 * var(--stagger)); } /* Hover-lift voor klikbare kaarten */ .lift { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Lijnen tekenen (SVG): zet pathLength="1" op het pad */ .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw var(--dur-slower) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 120ms); } /* View transitions (Chrome/Edge/Safari 18+) voor module-wissel */ ::view-transition-old(main-view) { animation: fade-out var(--dur-fast) var(--ease-in) both; } ::view-transition-new(main-view) { animation: fade-up var(--dur-slow) var(--ease-out) both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* --- Logo-intro (Veneer V) --------------------------------------------- 1. De twee pills staan uit elkaar, gevuld met een bewegende oranje "space"-gradient en een zachte gloed. 2. Ze schuiven met een lichte veer in elkaar tot de gekruiste V. 3. Gradient en gloed vloeien over in massief zwart. Rusttoestand (zonder .is-playing) = eindbeeld. */ .vlogo { display: block; width: 100%; height: 100%; overflow: visible; --vl-glow-1: rgba(255, 106, 26, .55); --vl-glow-2: rgba(255, 45, 120, .25); } .vlogo .vl-grad { opacity: 0; } .vlogo .vl-front, .vlogo .vl-back { transform-origin: 16px 16px; } /* Hover: alleen de gradient, geen beweging */ .vlogo .vl-grad, .vlogo .vl-solid { transition: opacity var(--dur-slow) var(--ease-out); } .vlogo.is-hover:not(.is-playing) .vl-grad { opacity: 1; } .vlogo.is-hover:not(.is-playing) .vl-solid { opacity: 0; } .vlogo.is-playing { animation: vl-glow 1.9s var(--ease-out) both; } .vlogo.is-playing .vl-front { animation: vl-front-in 1.1s cubic-bezier(.3, 1.35, .45, 1) .25s both; } .vlogo.is-playing .vl-back { animation: vl-back-in 1.1s cubic-bezier(.3, 1.35, .45, 1) .25s both; } .vlogo.is-playing .vl-grad { animation: vl-grad-out .55s var(--ease-in-out) 1.25s both; } .vlogo.is-playing .vl-solid { animation: vl-solid-in .55s var(--ease-in-out) 1.25s both; } @keyframes vl-front-in { from { transform: translate(-7px, -2px) rotate(-16deg); } to { transform: none; } } @keyframes vl-back-in { from { transform: translate(7px, -2px) rotate(16deg); } to { transform: none; } } @keyframes vl-grad-out { from { opacity: 1; } to { opacity: 0; } } @keyframes vl-solid-in { from { opacity: 0; } to { opacity: 1; } } @keyframes vl-glow { 0%, 60% { filter: drop-shadow(0 0 5px var(--vl-glow-1)) drop-shadow(0 0 12px var(--vl-glow-2)); } 100% { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent); } } /* --- Laadicoon ---------------------------------------------------------- Klokwijzers rond een onzichtbare spijker (het kruispunt van de V). De eerste twee groeien samen uit de spijker als het logo en blijven even staan; daarna komen de andere wijzers erbij (80ms na elkaar). Is de ring rond, dan draait hij snel om de spijker (0,7s per rondje). Formaat: font-size of width/height op [data-veneer-loader]. Snelheid: --vld-slow (1 = normaal, 5 = vijf keer zo langzaam). */ [data-veneer-loader] { --vld-slow: 1; display: inline-block; width: 1em; height: 1em; vertical-align: middle; } .vloader-svg { display: block; width: 100%; height: 100%; overflow: visible; } .vld-ring { transform-origin: 16px 16px; animation: vld-spin calc(.7s * var(--vld-slow, 1)) linear calc((7 * 80ms + 260ms + 180ms) * var(--vld-slow, 1)) infinite; } /* Groeit vanuit de spijker: schaal om (16,16), ook binnen de gedraaide groep */ .vld-pill { opacity: 0; transform-box: view-box; transform-origin: 16px 16px; animation: vld-grow calc(.4s * var(--vld-slow, 1)) var(--ease-spring) calc((var(--i) * 80ms + var(--h, 0) * 260ms) * var(--vld-slow, 1)) forwards; } @keyframes vld-grow { from { opacity: 0; transform: scale(.15); } 30% { opacity: 1; } to { opacity: 1; transform: none; } } @keyframes vld-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .vld-pill { animation: none; opacity: 1; } }