:root{--background-image:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#a5a5a5}#background{position:fixed;inset:0;background-image:var(--background-image);background-size:cover;background-position:center}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:pan-y}#still{position:fixed;left:50%;top:50%;width:min(100vw,100svh);height:min(100vw,100svh);transform:translate(-50%,-50%);object-fit:contain;display:none}button{position:fixed;right:24px;bottom:24px;border:1px solid #ffffff50;background:#ffffff35;color:#222;backdrop-filter:blur(12px);width:44px;height:44px;border-radius:50%;font:16px Arial;cursor:pointer;opacity:.5;transition:opacity .2s}button:hover,button:focus-visible{opacity:1}button:focus-visible{outline:2px solid black;outline-offset:4px}@media(prefers-reduced-motion:reduce){button{display:none}}

#vector{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;shape-rendering:geometricPrecision}canvas{pointer-events:none}#background{z-index:0}canvas{z-index:1}#vector,#still{z-index:2}button{z-index:3}
html,body,#background{background:#a0a0a0}#field{display:none!important}
#vector,#still{mix-blend-mode:multiply}
html,body,#background{background:#5f5f5f}#vector,#still{filter:invert(1);mix-blend-mode:screen}button{color:#fff;background:#ffffff12;border-color:#ffffff40}

#name{position:fixed;z-index:3;left:clamp(24px,5vw,80px);top:50%;transform:translateY(-50%);margin:0;color:#fff;font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:clamp(48px,11vw,180px);line-height:.95;letter-spacing:-.055em;pointer-events:none}@media(max-width:600px){#name{font-size:15vw;left:24px}}
#name{font-size:24px;font-weight:300;line-height:100%;letter-spacing:0}@media(max-width:600px){#name{font-size:24px}}
html,body,#background{background:#002fa7}
body,#background{transition:background-color .25s ease}body.centre-hover,body.centre-hover #background{background:#00ff00}
body,#background{transition:background-color 1s cubic-bezier(.22,.61,.36,1)}
#name{top:auto;bottom:clamp(24px,4vw,64px);left:clamp(24px,4vw,64px);transform:none}

html{height:auto;overflow-x:hidden;overflow-y:auto}body{height:auto;min-height:200svh;overflow:visible}#sections{position:relative;z-index:1;pointer-events:none}.first-view,.white-view{height:100svh}.first-view,.white-view{background:transparent}#name{opacity:var(--scene-opacity,1)}#pause{opacity:calc(var(--scene-opacity,1)*.5)}#still{opacity:var(--scene-opacity,1)}
@font-face{font-family:'Soehne';src:url('/fonts/soehne-leicht.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}#name{font-family:'Soehne',Helvetica,Arial,sans-serif;font-weight:300}

.white-view{position:relative;overflow:hidden}#white-vector{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;pointer-events:none;shape-rendering:geometricPrecision}
#pause{display:none}

html,body,#background{background:#000}body.centre-hover,body.centre-hover #background{background:#00ff00}

#white-vector{position:fixed;inset:0;z-index:2;width:100%;height:100%;clip-path:inset(100vh 0 0 0)}

#name{mix-blend-mode:difference;opacity:1}.name-row{display:flex;height:24px;white-space:nowrap}.name-tail{display:inline-block;overflow:hidden;width:calc(var(--tail-width,100px)*(1 - var(--name-progress,0)));opacity:calc(1 - var(--name-progress,0));transform:translateX(calc(var(--name-progress,0)*-8px));will-change:width,opacity,transform}

body.centre-hover #vector,body.centre-hover #still{filter:none;mix-blend-mode:multiply}body.centre-hover #name{color:#000000;mix-blend-mode:normal}

#hover-name{position:fixed;z-index:3;right:clamp(24px,4vw,64px);bottom:clamp(24px,4vw,64px);color:#000;font-family:'Soehne',Helvetica,Arial,sans-serif;font-weight:300;font-size:24px;line-height:100%;text-align:right;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .5s ease}body.centre-hover #name{visibility:hidden}body.centre-hover #hover-name{opacity:1;transform:translateY(0)}

/* The page owns the background; both sections stay transparent. */
html{background:#000}body{background:#000}#background{background-color:transparent}body.second-section-visible{background:#fff}body.centre-hover #background{background-color:transparent}
@media(prefers-reduced-motion:reduce){body{transition:none}}