/* Dennis Snellenberg reference study. Motion is progressive enhancement;
   all content, scrolling and navigation remain usable without it. */
:root { --motion-ease:cubic-bezier(.76,0,.24,1); }
@property --menu-bend { syntax:'<number>'; inherits:true; initial-value:0; }
.nav nav a { display:inline-flex; position:relative; padding-block:10px; }
.nav nav a::after { content:''; position:absolute; width:5px; height:5px; border-radius:50%; background:var(--lime); bottom:0; left:50%; transform:scale(0); transition:transform .3s var(--editorial-ease); }
.nav nav a:is(:hover,:focus-visible)::after { transform:scale(1); }
.nav-roll { display:block; overflow:hidden; }
.nav-roll-text { display:block; position:relative; transition:transform .45s var(--editorial-ease); }
.nav-roll-text::after { content:attr(data-label); position:absolute; inset:100% auto auto 0; width:100%; color:var(--lime); }
.nav nav a:is(:hover,:focus-visible) .nav-roll-text { transform:translateY(-100%); }
.hero.intro-playing .hero-introduction { animation:copy-arrive .9s var(--editorial-ease) .15s both; }
.hero.intro-playing .hero-bottom { animation:copy-arrive .9s var(--editorial-ease) .55s both; }
@keyframes copy-arrive { from {opacity:0; transform:translateY(18px)} to {opacity:1; transform:translateY(0)} }

/* Floating navigation, separate from the project viewer's All work control. */
.menu-launch,.menu-dismiss { width:68px; height:68px; border:1px solid #45483d; border-radius:50%; background:#24271f; color:var(--ink); display:grid; place-items:center; padding:0; }
.menu-launch { position:fixed; z-index:92; right:clamp(20px,3vw,48px); top:24px; opacity:0; visibility:hidden; transform:scale(.65); transition:opacity .3s,transform .5s var(--editorial-ease),visibility .3s; }
.menu-launch.is-visible { opacity:1; visibility:visible; transform:scale(1); }
.menu-dismiss { background:var(--lime); color:var(--bg); border-color:var(--lime); }
.menu-bars { width:24px; display:grid; gap:6px; }
.menu-bars::before,.menu-bars::after { content:''; display:block; height:1px; width:100%; background:currentColor; }
.menu-dismiss { position:absolute; top:24px; right:clamp(20px,3vw,48px); z-index:2; }
.menu-dismiss .menu-bars { gap:0; }
.menu-dismiss .menu-bars::before { transform:rotate(45deg); }
.menu-dismiss .menu-bars::after { transform:translateY(-1px) rotate(-45deg); }
.motion-menu { position:fixed; inset:0; margin:0; width:100%; height:100dvh; max-width:none; max-height:none; padding:0; border:0; background:transparent; color:var(--ink); overflow:hidden; }
.motion-menu::backdrop { background:transparent; }
.motion-menu[open] { display:block; }
.menu-scrim { position:absolute; inset:0; background:#0009; }
.menu-sheet { position:absolute; z-index:1; isolation:isolate; right:0; top:0; bottom:0; width:min(560px,72vw); padding:clamp(110px,16vh,160px) clamp(36px,6vw,80px) 40px; background:#1c1f19; display:flex; flex-direction:column; }
.menu-sheet::before { content:''; position:absolute; z-index:-1; right:calc(100% - 1px); top:-10%; width:clamp(70px,12vw,180px); height:120%; border-radius:100% 0 0 100%; background:inherit; transform:scaleX(var(--menu-bend,0)); transform-origin:right; }
.menu-sheet h2 { margin:0 0 24px; padding-bottom:24px; border-bottom:1px solid #55594c; font-size:10px; font-weight:400; color:#b7bcad; letter-spacing:.14em; text-transform:uppercase; }
.menu-links { display:flex; flex-direction:column; gap:12px; }
.menu-links a { display:block; width:fit-content; position:relative; font:400 clamp(40px,5vw,64px)/1.1 'Helvetica Neue',Arial,sans-serif; letter-spacing:-.045em; }
.menu-links a::before { content:''; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--lime); top:50%; left:-22px; transform:scale(0); transition:transform .25s; }
.menu-links a:is(:hover,:focus-visible,[aria-current])::before { transform:scale(1); }
.menu-links a { transition:color .3s,translate .5s var(--editorial-ease); }
.menu-links:has(a:hover) a:not(:hover) { color:#9b9f93; }
.menu-foot-label { display:block; margin-bottom:16px; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.menu-email { display:inline-block; color:var(--ink); padding-block:8px; border-bottom:1px solid #55594c; overflow-wrap:anywhere; }
.menu-email:hover { border-color:var(--lime); }
.menu-footnote { margin:auto 0 0; padding-top:32px; color:#b7bcad; font-size:11px; }
.menu-launch:focus-visible,.motion-menu :focus-visible { outline:2px solid var(--lime); outline-offset:6px; }
.menu-dismiss:focus-visible { outline-color:var(--ink); }

/* Curved transition surface; page-motion.css promotes it to the full viewport. */
.project-window { position:relative; }
.project-wipe { position:absolute; inset:0; z-index:5; background:var(--bg); color:var(--ink); display:grid; place-items:center; pointer-events:none; }
.project-wipe::before,.project-wipe::after { content:''; position:absolute; left:-10%; width:120%; height:14%; background:inherit; border-radius:50%; }
.project-wipe::before { bottom:calc(100% - 1px); transform:translateY(50%); }
.project-wipe::after { top:calc(100% - 1px); transform:translateY(-50%); }
.project-wipe-label { display:flex; align-items:center; gap:18px; max-width:85%; font:400 clamp(24px,4vw,48px)/1.1 'Helvetica Neue',Arial,sans-serif; letter-spacing:-.03em; }
.project-wipe-label::before { content:''; width:8px; height:8px; flex-shrink:0; border-radius:50%; background:var(--lime); }

.footer { position:relative; border-top:0; margin-top:60px; }
.footer::before,.project-navigation::before { content:''; position:absolute; left:0; bottom:calc(100% - 1px); width:100%; height:60px; background:inherit; border-radius:50% 50% 0 0 / 100% 100% 0 0; transform:scaleY(var(--edge-curve,1)); transform-origin:bottom; pointer-events:none; }
.project-navigation { position:relative; margin-top:120px; }
.footer .wrap { translate:0 var(--footer-drift,0px); }
.all-work-button,.viewer-bar #close { transition:background .3s,border-color .3s,color .3s,translate .45s var(--editorial-ease); }
[data-magnetic] { translate:var(--magnet-x,0px) var(--magnet-y,0px); transition:translate .4s var(--editorial-ease),color .25s,background .25s; }
@media(max-width:700px) {
 .menu-launch,.menu-dismiss { width:52px; height:52px; top:12px; right:16px; }
 .menu-sheet { width:100%; padding:110px 40px 32px; }
 .menu-links { gap:20px; }
 .menu-links a { font-size:clamp(38px,10vw,52px); }
 .footer { margin-top:36px; }
 .footer::before,.project-navigation::before { height:36px; }
 .project-navigation { margin-top:76px; }
.hero h1 .reveal-line { translate:none!important; }
}
@media(max-height:580px) {
 .menu-sheet { padding-top:85px; padding-bottom:24px; }
 .menu-sheet h2 { margin-bottom:14px; padding-bottom:14px; }
 .menu-links { gap:8px; }
 .menu-links a { font-size:34px; }
 .menu-footnote { padding-top:18px; }
}
@media(prefers-reduced-motion:reduce) {
 .hero h1 .reveal-line,.footer .wrap,[data-magnetic] { translate:none!important; }
 .footer::before,.project-navigation::before { transform:none; height:0; }
 .motion-enter,.nav-roll-text { animation:none!important; transform:none!important; }
 .nav-roll-text::after { display:none; }
}

/* A travelling curved fill, kept below the label and inside the control. */
.flow-button,.menu-launch,.menu-dismiss,.viewer-bar #close,.all-work-button {
 isolation:isolate; position:relative; overflow:hidden;
 transition:color .35s,border-color .35s,translate .6s var(--editorial-ease);
}
.menu-launch { position:fixed; transition:opacity .3s,transform .5s var(--editorial-ease),visibility .3s,color .35s,translate .6s var(--editorial-ease); }
.menu-dismiss { position:absolute; }
.flow-button::before,.menu-launch::before,.menu-dismiss::before,.viewer-bar #close::before,.all-work-button::before {
 content:''; position:absolute; z-index:-1; inset:-30% -10%; background:var(--lime);
 border-radius:50%; transform:translateY(110%);
 transition:transform .6s cubic-bezier(.22,1,.36,1),border-radius .6s;
}
.flow-button:is(:hover,:focus-visible)::before,.menu-launch:is(:hover,:focus-visible)::before,.menu-dismiss:is(:hover,:focus-visible)::before,.viewer-bar #close:is(:hover,:focus-visible)::before,.all-work-button:is(:hover,:focus-visible)::before { transform:translateY(0); border-radius:0; }
.flow-button:is(:hover,:focus-visible),.menu-launch:is(:hover,:focus-visible),.all-work-button:is(:hover,:focus-visible),.viewer-bar #close:is(:hover,:focus-visible) { color:var(--bg); border-color:var(--lime); }
.menu-dismiss::before,.contact-circle::before { background:var(--ink); }
.viewer-bar #close:hover,.all-work-button:hover { background:transparent; }

/* Contact mirrors the reference's large circle crossing a single fine rule. */
.footer { background:#1c1f19; margin-top:100px; padding-top:72px; overflow:visible; }
.footer::before { height:110px; }
.footer .wrap { width:min(1100px,calc(100% - 80px)); padding-bottom:12px; }
.footer h2 { font:400 clamp(64px,7.4vw,110px)/1.03 'Helvetica Neue',Arial,sans-serif; letter-spacing:-.055em; margin:56px 0 24px; padding:0; }
.contact-rail { position:relative; height:180px; display:flex; align-items:center; justify-content:flex-end; padding-right:8%; margin:0 0 25px; }
.contact-rail::before { content:''; position:absolute; inset:50% 0 auto; height:1px; background:#55594c; }
.contact-orbit { translate:var(--contact-drift,0px) 0; }
.contact-circle { width:180px; height:180px; border-radius:50%; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; background:var(--lime); color:var(--bg); font-size:14px; }
.contact-circle>span:last-child { font-size:22px; }
.contact-arrow { position:absolute; right:0; top:-100px; font-size:42px; font-weight:400; }
.contact-details { display:flex; flex-wrap:wrap; gap:16px; }
.footer .contact-email { font-size:14px; line-height:1.4; border:1px solid #55594c; border-radius:999px; padding:24px 30px; max-width:100%; overflow-wrap:anywhere; }
.footer-bottom { margin-top:90px; padding-block:28px; border-color:transparent; font-size:11px; }
.footer-bottom a { color:var(--ink); }
.about { padding-bottom:110px; }
.about p { max-width:740px; font-size:clamp(17px,1.7vw,24px); line-height:1.6; }
@media(max-width:700px) {
 .footer { margin-top:50px; padding-top:40px; }
 .footer::before { height:50px; }
 .footer .wrap { width:calc(100% - 40px); }
 .footer h2 { font-size:clamp(54px,12vw,78px); margin:40px 0 14px; }
 .contact-rail { height:130px; padding-right:5%; margin-bottom:32px; }
 .contact-circle { width:130px; height:130px; font-size:12px; gap:6px; }
 .contact-arrow { top:-70px; font-size:28px; }
 .contact-orbit { translate:none; }
 .footer .contact-email { padding:20px 24px; font-size:12px; }
 .footer-bottom { margin-top:52px; }
 .about { padding-bottom:65px; }
}
@media(prefers-reduced-motion:reduce) {
 .menu-launch,.menu-dismiss,.flow-button,.menu-links a,.nav nav a::after,[data-magnetic] { transition:none!important; }
 .flow-button::before,.menu-launch::before,.menu-dismiss::before,.viewer-bar #close::before,.all-work-button::before { transition:none; }
 .contact-orbit { translate:none!important; }
 .footer::before { height:0; }
}