:root{font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;color:white;background:white;--header:0px;--gutter:30px}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}a{color:inherit}button:focus-visible,a:focus-visible{outline:1px solid currentColor;outline-offset:4px}[hidden]{display:none!important}.header{position:absolute;inset:0 0 auto;height:38px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;color:white;z-index:10;background:transparent}.brand{width:148px;height:100%;display:flex;align-items:center}.brand img{width:100%;height:auto;filter:none}.contact-button{font-size:10px;height:100%;font-weight:700}.stage{position:absolute;inset:var(--header) 0 0;overflow:hidden;background:#111;isolation:isolate}#poster,.media,.shade,.open-film{position:absolute;inset:0;width:100%;height:100%}#poster{z-index:-4}#poster img{width:100%;height:100%;object-fit:cover}.media{z-index:-3;pointer-events:none;opacity:0;transition:opacity .16s}.media.playing{opacity:1}.media iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;width:max(100%,calc((100dvh - var(--header))*1.77778));height:max(100%,calc(100vw*.5625))}.media video{width:100%;height:100%;object-fit:cover}.shade{z-index:-2;background:#0003;pointer-events:none}.open-film{z-index:-1}.index-heading{position:absolute;inset:46px var(--gutter) auto;display:flex;justify-content:space-between;font-size:10px;z-index:4;pointer-events:none}.index-heading button{font-size:10px;pointer-events:auto;min-height:28px;font-weight:700}#count{padding-top:8px}.filter{position:relative}#filters{position:absolute;top:34px;left:-12px;background:white;color:#111;padding:8px 12px;min-width:155px;box-shadow:0 4px 25px #0002}#filters button{display:block;width:100%;text-align:left;min-height:34px}#filters button[aria-pressed=true]{text-decoration:underline;text-underline-offset:3px}.projects{position:absolute;left:0;top:85px;bottom:65px;width:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;scroll-snap-type:y proximity;-webkit-overflow-scrolling:touch;padding:calc((100dvh - 150px - clamp(38px,4.8vw,68px))/2) var(--gutter);touch-action:pan-y pinch-zoom}.projects::-webkit-scrollbar{display:none}.project{display:block;width:max-content;max-width:100%;height:clamp(38px,4.8vw,68px);text-align:left;scroll-snap-align:center;white-space:nowrap;font-size:clamp(26px,4.5vw,67px);font-weight:700;letter-spacing:-.035em;line-height:1;opacity:1;padding:0;transition:none}.project .title{display:inline-block;transform-origin:left center;transform:scale(.78);transition:transform .13s ease-out}.project.active .title{transform:scale(1)}.project:focus-visible{outline-offset:0}.selection-meta{position:absolute;left:var(--gutter);bottom:23px;font-size:10px;pointer-events:none;text-transform:uppercase}.index-footer{position:absolute;right:var(--gutter);bottom:12px;font-size:10px}#watch{font-size:10px;min-height:32px;display:flex;align-items:center;gap:10px}.play-triangle{width:0;height:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:5px solid currentColor}.film-toolbar{position:absolute;inset:44px var(--gutter) auto;display:flex;justify-content:space-between;pointer-events:none;z-index:3}.round,.round.info{font:700 10px Arial,sans-serif;border:0;background:transparent;min-height:32px;pointer-events:auto}.film-bottom{position:absolute;bottom:12px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;font-size:10px;text-transform:uppercase;pointer-events:none}.film-bottom>div{display:flex;gap:20px}.film-bottom button{font-size:10px;min-height:32px;pointer-events:auto}.film-mode .projects,.film-mode .index-heading,.film-mode .selection-meta,.film-mode .index-footer,.film-mode .shade{display:none}.film-mode .stage{background:white;color:#111}.film-mode #poster{visibility:hidden}.film-mode .media{pointer-events:auto;opacity:1;background:white}.film-mode .media iframe{width:100%;height:auto;aspect-ratio:16/9;max-height:calc(100% - 88px)}.film-mode .media video{object-fit:contain;background:white;height:calc(100% - 88px);margin-top:44px}.film-mode .film-bottom{color:#111}dialog{position:fixed;inset:auto 24px 24px auto;margin:0;width:min(520px,calc(100vw - 48px));max-height:calc(100dvh - 70px);overflow:auto;background:white;color:#111;border:0;padding:25px 28px 30px;box-shadow:0 12px 70px #0003}dialog::backdrop{background:#0005;backdrop-filter:blur(5px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;margin-bottom:40px}.dialog-top button{font-size:25px;min-width:32px;min-height:32px}dialog h2{font-size:clamp(30px,4vw,48px);text-transform:uppercase;letter-spacing:-.06em;line-height:1;margin:0 0 23px}dialog p{font-size:16px;line-height:1.55;margin:0 0 24px}dialog dl{display:grid;grid-template-columns:100px 1fr;font-size:14px;gap:13px;margin:30px 0}dialog dt{color:#777}dialog dd{margin:0}dialog a{font-size:14px;text-underline-offset:4px}dialog .email{display:block;font-size:clamp(16px,2vw,22px);margin:30px 0;overflow-wrap:anywhere}.contact-reps{border-top:1px solid #ddd;padding-top:24px}.contact-reps a{display:block;margin:12px 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:1500px){.project{height:68px}.projects{padding-top:calc((100dvh - 150px - 68px)/2);padding-bottom:calc((100dvh - 150px - 68px)/2)}}
@media(max-width:700px){:root{--gutter:18px;--header:0px}.brand{width:130px}.contact-button{font-size:9px}.projects{top:80px;bottom:58px;padding-top:calc((100dvh - 138px - 32px)/2);padding-bottom:calc((100dvh - 138px - 32px)/2)}.project{height:32px;font-size:clamp(20px,6.3vw,40px);letter-spacing:-.035em}.index-heading{top:42px}.index-heading button,#count,.selection-meta,#watch,.film-bottom,.film-bottom button,.round,.round.info{font-size:9px}.selection-meta{bottom:max(22px,env(safe-area-inset-bottom))}.index-footer{bottom:max(11px,env(safe-area-inset-bottom))}.film-bottom{bottom:max(12px,env(safe-area-inset-bottom));gap:15px}.film-bottom>span{max-width:55%;line-height:1.3}dialog{inset:auto 10px max(10px,env(safe-area-inset-bottom));width:calc(100vw - 20px);padding:22px}.film-toolbar{top:40px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.film-mode .header{color:#111}.film-mode .brand img{filter:brightness(0)}

.film-mode.artwork-mode #poster{visibility:visible;inset:80px 0 50px;height:calc(100% - 130px)}.film-mode.artwork-mode #poster img{object-fit:contain}.film-mode.artwork-mode .media{display:none}

#source-link{pointer-events:auto;font-size:10px;align-self:center;text-underline-offset:3px}.film-bottom>div{flex-wrap:wrap;justify-content:flex-end}

.brand{transform:translateX(-8px)}
.projects,.project,.project .title{font-family:Arial,sans-serif}
#media-status{position:absolute;right:var(--gutter);bottom:52px;font:10px Arial,sans-serif;display:flex;gap:12px;align-items:center;z-index:5}
#resume-video{min-width:48px;min-height:32px;border:1px solid currentColor;padding:0 12px;font-size:10px}
.film-mode #media-status{top:50%;bottom:auto;right:50%;transform:translate(50%,-50%);color:#111;background:#ffffffeb;padding:12px 18px;gap:18px}
.film-mode .media:not(.playing){opacity:0;pointer-events:none}
.film-mode #poster{visibility:visible;inset:75px 0 45px;height:calc(100% - 120px)}
.film-mode #poster img{object-fit:contain}

/* Compact project index, unified bottom-left navigation */
.index-heading{inset:auto auto max(12px,env(safe-area-inset-bottom)) var(--gutter);justify-content:flex-start;align-items:center;gap:10px;max-width:calc(100% - 160px);flex-wrap:wrap}
#count{padding:0}#selection-meta{position:static;font-size:10px;text-transform:uppercase}#filters{top:auto;bottom:36px}
.project{height:clamp(31px,4.05vw,57px)}.project .title{transform:scale(.78)}.project.active .title{transform:scale(1)}
.projects{top:54px;bottom:62px;padding-top:calc((100dvh - 116px - clamp(31px,4.05vw,57px))/2);padding-bottom:calc((100dvh - 116px - clamp(31px,4.05vw,57px))/2)}
@media(min-width:1500px){.project{height:57px}}
@media(max-width:700px){.project{height:27px}.projects{top:48px;bottom:65px;padding-top:calc((100dvh - 113px - 27px)/2);padding-bottom:calc((100dvh - 113px - 27px)/2)}.index-heading{top:auto;gap:7px;max-width:calc(100% - 36px);bottom:max(16px,env(safe-area-inset-bottom))}#selection-meta{font-size:9px}.index-footer{display:none}}

/* Stronger active title and discreet custom video controls */
.project{opacity:.6;transition:opacity .12s}.project.active{opacity:1;position:relative;z-index:1}.project.active .title{transform:scale(1.25)}
.player-controls{position:absolute;bottom:51px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;gap:15px;color:#111;font:10px Arial,sans-serif;z-index:5;background:transparent;box-shadow:none}.player-controls button{font-size:10px;min-height:36px}.player-controls #play-pause{width:40px;text-align:left}.player-controls input{flex:1;min-width:20px;height:20px;appearance:none;background:transparent;cursor:pointer}.player-controls input::-webkit-slider-runnable-track{height:1px;background:#bbb}.player-controls input::-webkit-slider-thumb{appearance:none;width:6px;height:6px;border-radius:50%;background:#111;margin-top:-2.5px}.player-controls input::-moz-range-track{height:1px;background:#bbb}.player-controls input::-moz-range-thumb{width:6px;height:6px;background:#111;border:0}.film-mode .media video{height:calc(100% - 160px);margin-top:70px;cursor:pointer}.film-mode .media video::-webkit-media-controls{display:none!important}.stage:fullscreen{background:white}.stage:fullscreen .media video{height:calc(100% - 110px);margin-top:15px}@media(max-width:700px){.player-controls{gap:9px;bottom:max(54px,calc(env(safe-area-inset-bottom) + 40px))}.player-controls,.player-controls button{font-size:9px}.player-controls #fullscreen{font-size:8px}.film-mode .media video{height:calc(100% - 160px)}}

/* Refined selection and information set directly over the film. */
.project.active .title{transform:scale(1.08)}
.round,.round.info{font-weight:400}
body.details-open .stage,body.details-open .media,body.details-open .media video{background:#111}
#details{inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(76px,13vh,145px) var(--gutter) 55px;background:transparent;color:#fff;box-shadow:none;border:0;overflow-y:auto}
#details::backdrop{background:rgba(0,0,0,.64);backdrop-filter:none;animation:veil-in .28s ease-out both}
#details .dialog-top{max-width:720px;margin-bottom:clamp(28px,6vh,65px);animation:copy-in .32s ease-out both}
#details .dialog-top button{font:400 10px Arial,sans-serif;min-height:36px}
#dialog-content{max-width:720px;animation:copy-in .38s cubic-bezier(.2,.7,.2,1) both}
#details h2{font:400 clamp(32px,5vw,68px)/1.02 Arial,sans-serif;letter-spacing:-.04em;margin-bottom:30px;max-width:800px}
#details p{font:400 clamp(15px,1.5vw,19px)/1.5 Arial,sans-serif;max-width:610px;white-space:pre-line}
#details dl{font-size:12px;margin:28px 0}#details dt{color:#fff9}#details .email{font-size:clamp(17px,2.5vw,27px)}#details .contact-reps{border-color:#fff4;max-width:540px}#details .contact-reps p{font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:18px}#details a{font-size:13px}#details.leaving #dialog-content,#details.leaving .dialog-top{animation:copy-out .18s ease-in both}#details.leaving::backdrop{animation:veil-out .18s ease-in both}
@keyframes copy-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes copy-out{to{opacity:0;transform:translateY(7px)}}@keyframes veil-in{from{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.64)}}@keyframes veil-out{to{background:rgba(0,0,0,0)}}
@media(max-width:700px){#details{padding-top:85px;padding-bottom:max(32px,env(safe-area-inset-bottom))}#details .dialog-top{margin-bottom:35px}#details h2{font-size:36px}#details p{font-size:15px}#details .contact-reps a{line-height:1.5}}
@media(prefers-reduced-motion:reduce){#details::backdrop,#details .dialog-top,#dialog-content,#details.leaving #dialog-content,#details.leaving .dialog-top,#details.leaving::backdrop{animation:none}}
.projects,.index-heading,.index-footer,.film-toolbar,.film-bottom,.player-controls{transition:opacity .18s ease}
.details-open .projects,.details-open .index-heading,.details-open .index-footer,.details-open .film-toolbar,.details-open .film-bottom,.details-open .player-controls{opacity:0;pointer-events:none}

#details>.header{position:fixed;color:#fff;z-index:20;background:transparent}#details>.header .brand img{filter:brightness(0) invert(1)}#details>.header .brand{font-size:inherit}#details>.header .contact-button{color:#fff}

/* Lighter editorial typography and category superscripts. */
.projects,.project,.project .title{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}.project{font-weight:400;letter-spacing:-.055em}.project .title{display:inline-flex;align-items:flex-start}.project-name{line-height:1}.project-category{font:400 .19em/1.25 Arial,sans-serif;letter-spacing:-.025em;position:static;vertical-align:top;margin:.11em 0 0 .32em;white-space:nowrap}.project.active .title{transform:scale(1.08)}
@media(max-width:700px){.project{letter-spacing:-.05em}.project-category{font-size:.24em;margin-top:.08em}}
/* More air in the lettering and around the selected project. */
.project{letter-spacing:-.015em}.project.active{margin-block:clamp(7px,.75vw,12px)}
@media(max-width:700px){.project{letter-spacing:-.01em}.project.active{margin-block:7px}}

/* Preview-first navigation: stable row geometry, intentional input ownership. */
:root,body{background:#000}.projects{scroll-snap-type:none;overflow-anchor:none;opacity:0;pointer-events:auto}.project,.project.active{margin-block:7px}.projects .project{visibility:hidden;pointer-events:none}.nav-visible .projects{opacity:1}.nav-visible .projects .project{visibility:visible;pointer-events:auto}.index-heading,.index-footer{opacity:0;pointer-events:none}.index-heading button{pointer-events:none}.nav-visible .index-heading,.nav-visible .index-footer{opacity:1;pointer-events:auto}.nav-visible .index-heading button{pointer-events:auto}#scroll-hint{position:absolute;left:var(--gutter);bottom:max(19px,env(safe-area-inset-bottom));z-index:4;font:400 10px Arial,sans-serif;display:flex;align-items:center;gap:9px;min-height:28px}#scroll-hint span{font-size:17px}.nav-visible #scroll-hint,.film-mode #scroll-hint,.details-open #scroll-hint{opacity:0;pointer-events:none}.film-mode .projects{display:none}
.film-mode .stage,.film-mode .media,.film-mode .media video{background:#000;color:#fff}.film-mode .header,.film-mode .film-bottom,.film-mode .player-controls{color:#fff}.film-mode .brand img{filter:brightness(0) invert(1)}.film-mode .media video{position:absolute;inset:0;width:100%;height:100%;margin:0;object-fit:contain}.player-controls input::-webkit-slider-thumb{background:#fff}.player-controls input::-moz-range-thumb{background:#fff}.player-controls input::-webkit-slider-runnable-track{background:#ffffff70}.player-controls input::-moz-range-track{background:#ffffff70}:fullscreen,:fullscreen body,:fullscreen .stage{background:#000}:fullscreen .stage{inset:0}:fullscreen .media video,.stage:fullscreen .media video{inset:0;width:100%;height:100%;margin:0;object-fit:contain}
#details .dialog-top{display:none}#details[data-kind=contact] h2{max-width:770px;text-transform:none;font-size:clamp(30px,4.2vw,58px);line-height:1.1;letter-spacing:-.035em}#details[data-kind=contact] .email{font:400 12px Arial,sans-serif;margin:35px 0 50px}#details>.film-toolbar{position:fixed;opacity:1;z-index:20}#details[data-kind=contact]>.film-toolbar{visibility:hidden}#details>.film-toolbar #back{visibility:hidden}#details>.film-toolbar #info{color:#fff;pointer-events:auto}.details-open .projects{pointer-events:none}.details-open .projects .project{visibility:hidden}.details-open .header{color:#fff}
.index-heading,.index-footer{visibility:hidden}.nav-visible .index-heading,.nav-visible .index-footer{visibility:visible}

.cinema-mode .header,.cinema-mode .film-toolbar,.cinema-mode .film-bottom{visibility:hidden}.cinema-mode .player-controls{bottom:max(12px,env(safe-area-inset-bottom))}.film-mode #scroll-hint{visibility:hidden}#details .header{visibility:visible}

/* Fade the complete index; keep the home footer available. */
.projects{transition:opacity .38s ease-in-out}.projects .project{transition:opacity .12s ease,visibility 0s linear .38s}.nav-visible .projects .project{transition-delay:0s}
body:not(.film-mode):not(.details-open) .index-heading,body:not(.film-mode):not(.details-open) .index-footer{opacity:1;visibility:visible;pointer-events:auto}
body:not(.film-mode):not(.details-open) .index-heading button{pointer-events:auto}
#scroll-hint{left:50%;transform:translateX(-50%);justify-content:center;gap:0;transition:opacity .38s ease;white-space:nowrap}
#scroll-hint .scroll-pulse{display:flex;align-items:center;justify-content:center;gap:10px;animation:scroll-breathe 2.6s ease-in-out infinite}
#scroll-hint .scroll-label{font:400 10px/1 Arial,sans-serif;letter-spacing:.04em}#scroll-hint .scroll-pulse>span[aria-hidden]{font:400 14px/1 Arial,sans-serif}
@keyframes scroll-breathe{0%,100%{opacity:1}50%{opacity:.22}}
@media(max-width:700px){body:not(.film-mode):not(.details-open) .index-footer{display:block}.index-heading{max-width:calc(100% - 120px)}#scroll-hint{bottom:max(58px,calc(env(safe-area-inset-bottom) + 44px))}}
@media(prefers-reduced-motion:reduce){.projects,#scroll-hint,.projects .project{transition:none}#scroll-hint .scroll-pulse{animation:none}}
/* Center the scroll cue over the image on phones. */
@media(max-width:700px){#scroll-hint{top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%)}}
/* Half-second identity sting before the home preview. */
#intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#000;pointer-events:auto;overflow:hidden}
.intro-logo{position:relative;width:min(65vw,580px);aspect-ratio:791/81;overflow:hidden}
.intro-logo img{position:absolute;top:0;left:-5.31%;width:130.85%;height:auto;filter:brightness(0) invert(1)}
@media(prefers-reduced-motion:reduce){#intro{display:none}}

/* Occasional monochrome scan: clipped duplicate text, no layout movement. */
.project-name{position:relative}.project-name::after{content:attr(data-text);position:absolute;inset:0;color:inherit;pointer-events:none;opacity:0;clip-path:inset(36% 0 53% 0)}
.scan-glitch .project-name::after{animation:title-scan .24s steps(1,end) both}
@keyframes title-scan{0%,100%{opacity:0;transform:translateX(0)}12%{opacity:.7;clip-path:inset(22% 0 69% 0);transform:translateX(2px)}32%{opacity:.45;clip-path:inset(49% 0 42% 0);transform:translateX(-2px)}48%{opacity:0}65%{opacity:.6;clip-path:inset(73% 0 20% 0);transform:translateX(3px)}82%{opacity:.3;clip-path:inset(34% 0 58% 0);transform:translateX(-1px)}}
@media(prefers-reduced-motion:reduce){.scan-glitch .project-name::after{animation:none}}


#intro.intro-running{animation:intro-strobe .5s linear both}
.intro-running .intro-logo img{animation:intro-logo-strobe .5s steps(1,end) both}
@keyframes intro-strobe{0%,17.99%{background:#000;opacity:1}18%,33.99%{background:#fff;opacity:1}34%,51.99%{background:#000;opacity:1}52%,67.99%{background:#fff;opacity:1}68%,82%{background:#000;opacity:1}100%{background:#000;opacity:0;visibility:hidden}}
@keyframes intro-logo-strobe{0%,34%,68%,100%{filter:brightness(0) invert(1)}18%,52%{filter:brightness(0)}}

/* First arrival: monochrome preview and a single, centered scroll sting. */
#media,#poster{filter:grayscale(0);transition:filter .45s ease}
body.arrival #media,body.arrival #poster{filter:grayscale(1)}
body.arrival #scroll-hint{top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%)}
body.arrival #scroll-hint .scroll-label{font:400 clamp(22px,3vw,38px)/1 Arial,sans-serif;letter-spacing:.06em}
body.arrival #scroll-hint .scroll-pulse>span[aria-hidden]{display:none}
body.arrival #scroll-hint .scroll-pulse{animation:none}
body.arrival:not(:has(#intro)) #scroll-hint .scroll-pulse{animation:arrival-scroll .5s steps(1,end) infinite}
@keyframes arrival-scroll{0%,34%,68%,100%{color:#fff;opacity:1}18%,52%{color:#000;opacity:.2}}
@media(prefers-reduced-motion:reduce){#media,#poster{transition:none}body.arrival:not(:has(#intro)) #scroll-hint .scroll-pulse{animation:none}}

/* Edge-to-edge list, retaining half its visibility at the viewport edges. */
.projects{top:0;bottom:0;padding-top:calc((100dvh - clamp(31px,4.05vw,57px))/2 - 7px);padding-bottom:calc((100dvh - clamp(31px,4.05vw,57px))/2 - 7px);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),#000 14%,#000 86%,rgba(0,0,0,.5));mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),#000 14%,#000 86%,rgba(0,0,0,.5))}
@media(max-width:700px){.projects{padding-top:calc((100dvh - 27px)/2 - 7px);padding-bottom:calc((100dvh - 27px)/2 - 7px)}}

.header-actions{display:flex;align-items:center;gap:18px;height:100%}#bomb{display:grid;place-items:center;width:28px;height:32px}#bomb:hover{transform:rotate(-15deg)}.details-open #bomb{display:grid}.destruction-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:10000;touch-action:none}.rebuild{position:fixed;top:18px;right:var(--gutter);z-index:10001;font:11px Arial,sans-serif;color:#fff;background:#000b;border:1px solid #fff5;padding:14px 18px;letter-spacing:.08em}.destroyed{background:#080808}

.destroyed .header,.destroyed .header *,.destroyed .stage,.destroyed .stage *{visibility:hidden!important}

.rebuild span{display:inline-block;font-size:19px;line-height:1;vertical-align:-2px;margin-left:5px}#bomb:hover,#bomb:focus-visible{animation:bomb-fuse .16s steps(2,end) infinite}@keyframes bomb-fuse{0%{transform:translate(-1px,0) rotate(-12deg);opacity:1}50%{transform:translate(1px,-1px) rotate(10deg);opacity:.3}100%{transform:translate(0,1px) rotate(-4deg);opacity:1}}@media(prefers-reduced-motion:reduce){#bomb:hover,#bomb:focus-visible{animation:none}}

#scroll-hint{pointer-events:none;cursor:default}
.film-mode #bomb,.details-open #bomb{display:grid}
.cinema-mode .header{visibility:visible}

.header,.film-toolbar,.film-bottom,.player-controls{transition:opacity .3s ease}
body.film-mode.player-idle:not(.details-open) .header,body.film-mode.player-idle:not(.details-open) .film-toolbar,body.film-mode.player-idle:not(.details-open) .film-bottom,body.film-mode.player-idle:not(.details-open) .player-controls{opacity:0;pointer-events:none;visibility:hidden}
body.film-mode.player-idle{cursor:none}

.destroyed #dialog-content,.destroyed #details>.film-toolbar{visibility:hidden!important}

.film-mode .media{transition:none}

/* Never show a stale poster while a selected video is loading. */
body.film-mode:not(.artwork-mode) #poster{visibility:hidden}
body:not(.film-mode) #poster{visibility:visible}
.media{transition:none}

@media(max-width:700px){.project,.project.active{margin-block:4px}.projects{padding-top:calc((100dvh - 27px)/2 - 4px);padding-bottom:calc((100dvh - 27px)/2 - 4px)}}

/* Keep the selected poster underneath until the first playing video frame. */
body:not(.film-mode) .media{transition:none}
body:not(.film-mode) .media.playing{transition:opacity .35s ease}
@media(prefers-reduced-motion:reduce){body:not(.film-mode) .media.playing{transition:none}}

body:not(.film-mode) #media-status{display:none}