/* Match the paper in the original animation, rather than the wordmark lettering. */
:root{--cream:#fcfaf8;--paper:#fcfaf8}

/* Each square print travels on the scroll track; its photograph has its own zoom. */
.film-deck .flipbook-image .deck-photo{position:absolute;top:50%;left:50%;width:var(--photo-size);height:var(--photo-size);aspect-ratio:1;overflow:hidden;transform:var(--card-transform,translate(-50%,-50%));transform-origin:center;will-change:transform,opacity;backface-visibility:hidden;background:var(--cream);box-shadow:0 14px 32px #17332322;pointer-events:none}
.film-deck .flipbook-image .deck-photo>img{position:relative;inset:0;top:0;left:0;display:block;width:100%;height:100%;object-fit:cover;transform:scale(var(--image-zoom,1.035))!important;transform-origin:center;opacity:1!important;border:0;box-shadow:none;will-change:transform}

/* Reveal from the top, with a frame outside the image's full canvas. */
.redesign-story{transform:translateY(calc((1 - var(--redesign-show,0))*-26px))}
.redesign-visual{border:0;outline:3px solid var(--redesign-accent,#f2bd47);outline-offset:3px}
.redesign-after{clip-path:inset(0 0 calc((1 - var(--redesign-progress,0))*100%) 0)}
.redesign-wipe{top:calc(var(--redesign-progress,0)*100%)}
.web-result{border:0;outline:4px solid #74cba4;outline-offset:0}
.web-start{border:0;outline:4px solid #f2bd47;outline-offset:0}

/* The portfolio's last control occupies the familiar bottom-right position. */
.film-controls .film-fullscreen{display:inline-grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;border:0;background:transparent;color:var(--cream);flex:0 0 44px;cursor:pointer}
.film-fullscreen svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.film-fullscreen .fullscreen-exit{display:none}
.film-fullscreen[aria-pressed="true"] .fullscreen-enter{display:none}
.film-fullscreen[aria-pressed="true"] .fullscreen-exit{display:block}
.film-controls .film-fullscreen:hover{background:#fcfaf81c;border-radius:4px}
.film-controls .film-fullscreen:focus-visible{outline:2px solid var(--cream);outline-offset:-3px}
.full-film:fullscreen{display:block;width:100vw;height:100dvh;max-height:none;aspect-ratio:auto;margin:0;border:0;background:#000}
.full-film:-webkit-full-screen{display:block;width:100vw;height:100vh;max-height:none;aspect-ratio:auto;margin:0;border:0;background:#000}
.full-film:fullscreen>video,.full-film:-webkit-full-screen>video{width:100%;height:100%;object-fit:contain}
.full-film.is-expanded{position:fixed;inset:0;z-index:10000;width:100vw;height:100svh;max-height:none;aspect-ratio:auto;margin:0;border:0;background:#000}
.full-film.is-expanded>video{width:100%;height:100%;object-fit:contain}
.full-film.is-expanded .film-controls,.full-film:fullscreen .film-controls{padding-bottom:max(14px,env(safe-area-inset-bottom))}
@media(max-width:1050px){.web-start{outline-width:3px}}
@media(max-width:760px){.film-controls{gap:8px}.film-controls .film-fullscreen{width:38px;height:38px;min-width:38px;min-height:38px;flex-basis:38px;padding:8px}.film-controls output{font-size:10px}.film-controls input{width:auto;min-width:28px}}
@media(prefers-reduced-motion:reduce){.film-deck .flipbook-image .deck-photo{will-change:auto;transform:translate(-50%,-50%)!important}.film-deck .flipbook-image .deck-photo>img{will-change:auto;transform:none!important}.film-deck .flipbook-image .deck-photo:not(.active){display:none}.redesign-story{transform:none}.redesign-after{clip-path:none}}