/* De overgang tussen het bureaublad en de 3D-site. Heen: de tafel kantelt weg in perspectief, de voorwerpen komen naar je toe en het vilt loopt leeg naar zwart. Daarna neemt de view transition het over. Terug: de tafel staat gekanteld klaar en komt in 800 ms overeind. Alles hangt aan twee klassen op : .gaat-weg en .komt-terug. app.js blijft ondertussen gewoon rekenen; een CSS-animatie wint van de inline transform die app.js elk frame schrijft, dus de twee vechten niet. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation-duration: 350ms; animation-timing-function: ease; } ::view-transition-new(root) { animation-duration: 350ms; animation-timing-function: ease; } /* ---------- de knop op de tafel ---------- */ /* Zelfde pil als .knop in styles.css, met een klein 3D-teken ervoor. */ .naar3d { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font: 500 .95rem/1 var(--font-text); color: var(--chalk); background: rgba(11, 16, 13, .45); border: 1px solid rgba(236, 238, 232, .45); border-radius: 999px; padding: .65rem 1.2rem; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color 200ms ease, border-color 200ms ease, transform 200ms var(--lift-ease); } .naar3d:hover { background: rgba(236, 238, 232, .12); border-color: var(--chalk); transform: translateY(-1px); } .naar3d:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; } .naar3d[hidden] { display: none; } /* ---------- het doek dat over de tafel valt ---------- */ #overgang-vlak { position: fixed; inset: 0; z-index: 9998; background: #05080a; opacity: 0; pointer-events: none; will-change: opacity; } /* ---------- heen: van de tafel de scene in ---------- */ html.gaat-weg, html.gaat-weg body { background: #05080a; } html.gaat-weg .table { animation: ov-duik 980ms forwards; transform-origin: var(--ov-ox, 50%) var(--ov-oy, 55%); will-change: transform; } /* Eerst leunt de tafel een tel naar je toe, dan valt hij weg. De aanloop gaat niet met een kleinere schaal: dan zie je de zwarte rand van de pagina en lijkt het of het venster krimpt in plaats van dat de tafel kantelt. */ @keyframes ov-duik { 0% { transform: perspective(1100px) rotateX(0deg) scale(1); animation-timing-function: cubic-bezier(.25, .9, .35, 1); } 12% { transform: perspective(1100px) rotateX(-2.6deg) scale(1.02); animation-timing-function: cubic-bezier(.34, .32, .3, 1); } 100% { transform: perspective(1100px) rotateX(56deg) scale(1.72); } } /* De laag met de voorwerpen krijgt diepte vanuit het klikpunt, dus een voorwerp met translateZ vliegt vanzelf de goede kant op: recht op je af in het midden, naar buiten aan de randen. */ html.gaat-weg .items { perspective: var(--ov-pv, 620px); perspective-origin: var(--ov-px, 50%) var(--ov-py, 50%); } html.gaat-weg .item[data-ov] { animation: ov-vlieg var(--ov-duur, 640ms) cubic-bezier(.36, 0, .28, 1) var(--ov-d, 0ms) forwards; } /* --ov-m is de matrix die het voorwerp op het moment van klikken al had: plek, hoek en de schaal van het vissenoog in een. Daar komt alleen diepte bij, zodat er niets verspringt op frame een. */ @keyframes ov-vlieg { from { transform: var(--ov-m, translate(0px, 0px)) translateZ(0px); filter: blur(0px); opacity: 1; } 55% { filter: blur(calc(var(--ov-b, 2px) * .3)); opacity: .9; } to { transform: var(--ov-m, translate(0px, 0px)) translateZ(var(--ov-z, 0px)); filter: blur(var(--ov-b, 2px)); opacity: var(--ov-o, 0); } } /* Het hoekwerk hoort niet mee de scene in. */ html.gaat-weg .label, html.gaat-weg .hint, html.gaat-weg .knoppen { animation: ov-weg 220ms ease forwards; pointer-events: none; } @keyframes ov-weg { to { opacity: 0; } } html.gaat-weg #overgang-vlak { animation: ov-donker 800ms cubic-bezier(.5, 0, .6, 1) 180ms forwards; } @keyframes ov-donker { to { opacity: .94; } } /* ---------- terug: landen op de tafel ---------- */ html.komt-terug .table { animation: ov-land 800ms cubic-bezier(.17, .84, .3, 1) forwards; transform-origin: 50% 46%; will-change: transform; } @keyframes ov-land { from { transform: perspective(1100px) rotateX(34deg) scale(1.26); } to { transform: perspective(1100px) rotateX(0deg) scale(1); } } html.komt-terug #overgang-vlak { animation: ov-licht 700ms ease-out forwards; } @keyframes ov-licht { from { opacity: .95; } to { opacity: 0; } } /* ---------- rust ---------- */ /* Wie geen beweging wil, krijgt alleen het licht dat uit- en aangaat. */ @media (prefers-reduced-motion: reduce) { html.gaat-weg .table, html.gaat-weg .item[data-ov], html.komt-terug .table { animation: none !important; } html.gaat-weg #overgang-vlak { animation: ov-donker-rust 220ms ease forwards !important; } html.komt-terug #overgang-vlak { animation: ov-licht-rust 260ms ease forwards !important; } .naar3d { transition-duration: 120ms; } } html.rust.gaat-weg .table, html.rust.gaat-weg .item[data-ov], html.rust.komt-terug .table { animation: none !important; } html.rust.gaat-weg #overgang-vlak { animation: ov-donker-rust 220ms ease forwards !important; } html.rust.komt-terug #overgang-vlak { animation: ov-licht-rust 260ms ease forwards !important; } @keyframes ov-donker-rust { to { opacity: 1; } } @keyframes ov-licht-rust { from { opacity: 1; } to { opacity: 0; } }