/* A viewfinder around the work. The film itself stays unobstructed in the player. */
.reel-home{--reel-accent:#f08a63}
.reel-home .masthead{background:#242424c9;border-color:#ffffff1a}
.reel-hero{padding:120px var(--pad) 30px;min-height:100svh;overflow:hidden}
.reel-intro,.reel-edit-heading,.reel-bottom,.reel-frame-top,.reel-frame-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:monospace;font-size:.75rem;line-height:1.4;letter-spacing:.035em}
.reel-intro{color:#aaa9a5;margin-bottom:20px}
.reel-wordmark{display:flex;justify-content:space-between;gap:.16em;font-size:clamp(56px,12.6vw,240px);line-height:.82;font-weight:500;letter-spacing:-.075em;white-space:nowrap}
.reel-wordmark span{display:block;animation:reel-type-in .85s var(--ease) both}
.reel-wordmark span:last-child{animation-delay:.07s}
.reel-frame{position:relative;isolation:isolate;height:clamp(300px,46svh,650px);margin-top:30px;background:#101817;overflow:hidden;animation:reel-frame-in 1s .08s var(--ease) both}
.reel-poster,.reel-preview,.reel-scrub-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center 48%}
.reel-preview{opacity:0;transition:opacity .6s}
.reel-frame.preview-playing .reel-preview{opacity:1}
.reel-scrub-image{z-index:1}
.reel-scrub-image[hidden]{display:none}
.reel-vignette{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,#0007,transparent 28%,transparent 70%,#0009);pointer-events:none}
.reel-frame-top,.reel-frame-bottom{position:absolute;left:26px;right:26px;z-index:3;color:#fff;text-shadow:0 1px 12px #0008}
.reel-frame-top{top:25px}
.reel-frame-top b{font-weight:400;color:#ffc3ac;margin-left:14px}
.reel-frame-bottom{bottom:20px}
.reel-frame-bottom button{font:inherit;min-height:44px;padding:8px 0;text-align:left;font-size:.875rem}
.reel-frame-bottom button:before{content:'';display:inline-block;width:7px;height:7px;margin-right:10px;background:var(--reel-accent)}
#reel-frame-time{font-variant-numeric:tabular-nums;position:absolute;left:50%;transform:translateX(-50%)}
.frame-corner{position:absolute;z-index:3;width:15px;height:15px;border-color:#fff8;border-style:solid;pointer-events:none}
.corner-tl{left:10px;top:10px;border-width:1px 0 0 1px}.corner-tr{right:10px;top:10px;border-width:1px 1px 0 0}.corner-bl{left:10px;bottom:10px;border-width:0 0 1px 1px}.corner-br{right:10px;bottom:10px;border-width:0 1px 1px 0}
.reel-watch{position:absolute;z-index:4;left:50%;top:50%;transform:translate(calc(-50% + var(--magnet-x,0px)),calc(-50% + var(--magnet-y,0px)));display:flex;flex-direction:column;align-items:center;gap:17px;padding:24px;transition:transform .35s var(--ease)}
.reel-play-ring{height:clamp(90px,8vw,138px);width:clamp(90px,8vw,138px);display:grid;place-items:center;border:1px solid #ffffffe0;border-radius:50%;background:#0b171b35;backdrop-filter:blur(4px);transition:background .3s,transform .4s var(--ease),border-color .3s}
.reel-play-ring svg{width:28px;height:28px;margin-left:4px}
.reel-watch:hover .reel-play-ring,.reel-watch:focus-visible .reel-play-ring{background:#efeee8;color:#111;transform:scale(1.07);border-color:#efeee8}
.reel-watch-label{font-family:monospace;font-size:.875rem;letter-spacing:.07em;background:#0a0a0a85;padding:8px 11px;white-space:nowrap}
.reel-watch-label>span{margin-left:14px;opacity:.65}
.reel-edit{margin-top:20px}
.reel-edit-heading{margin-bottom:11px;color:#b8b7b2}
.reel-edit-heading>span:last-child{color:#878682}
.reel-strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.reel-strip button{position:relative;padding:0;overflow:hidden;aspect-ratio:2.35;border:1px solid transparent;background:#151515;text-align:left}
.reel-strip img{opacity:.55;transition:opacity .25s,transform .5s var(--ease)}
.reel-strip button:hover img,.reel-strip button:focus-visible img,.reel-strip button.is-current img{opacity:1;transform:scale(1.06)}
.reel-strip button.is-current{border-color:var(--reel-accent)}
.reel-strip button span{position:absolute;left:8px;bottom:5px;z-index:1;font-family:monospace;font-size:.75rem;background:#0009;padding:2px 4px;font-variant-numeric:tabular-nums}
.reel-strip button:focus-visible{outline-offset:2px}
.reel-bottom{margin-top:22px;color:#969591}
.reel-bottom a{color:var(--white);padding:10px 0;font-size:.875rem;display:flex;align-items:center;gap:22px}
.reel-bottom a>span{font-size:1.4rem;transition:transform .3s}
.reel-bottom a:hover>span{transform:translateY(4px)}
.reel-noscript{padding:20px 0;font-size:1rem}
.reel-home .work-section{padding-top:90px;border-top:1px solid var(--line)}
.reel-dialog{position:fixed;inset:0;margin:0;border:0;padding:0;width:100%;height:100%;max-width:none;max-height:none;background:#080808;color:var(--white);overflow:hidden}
.reel-dialog::backdrop{background:#080808}
.reel-player-shell{width:100%;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;background:#080808;padding:24px clamp(16px,3vw,50px) 16px;gap:15px}
.reel-player-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:monospace}
.reel-player-heading h2{font-size:.875rem;font-weight:400;letter-spacing:.06em}
.reel-player-heading p{font-size:.75rem;color:#93938f;margin-top:7px}
#reel-close{display:flex;align-items:center;gap:20px;min-height:44px;font-size:.875rem;font-family:inherit}
#reel-close span{font-size:2rem;font-weight:300;line-height:1}
.reel-player-stage{position:relative;min-height:0;isolation:isolate}
#showreel-video{display:block;width:100%;height:100%;object-fit:contain;background:#080808}
.reel-player-start{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);height:88px;width:88px;border:1px solid #fff9;border-radius:50%;background:#0006;backdrop-filter:blur(6px);display:grid;place-items:center;padding:0}
.reel-player-start svg{width:28px;height:28px;display:block}
.reel-player-start[hidden],#reel-retry[hidden]{display:none}
.reel-player-feedback{position:absolute;z-index:3;left:50%;bottom:18px;transform:translateX(-50%);width:min(90%,560px);text-align:center;font-size:.875rem}
#reel-player-status:empty{display:none}
#reel-player-status:not(:empty){background:#000c;padding:12px;line-height:1.5}
#reel-retry{background:#1d1d1d;border:1px solid #aaa;padding:12px 22px;margin-top:12px}
.reel-controls{display:flex;align-items:center;gap:24px;padding-top:12px;border-top:1px solid #ffffff30;font-family:monospace;font-size:.875rem}
.reel-controls button{font-family:inherit;font-size:inherit;min-height:44px;white-space:nowrap;padding:8px 0}
.reel-controls button:hover,#reel-close:hover{color:var(--reel-accent)}
#reel-play{min-width:55px;text-align:left}
.reel-elapsed{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.75rem}
.reel-total{color:#8f8f8c}
.reel-seek-label{flex:1;min-width:70px;display:flex;align-items:center}
#reel-seek{appearance:none;-webkit-appearance:none;width:100%;height:36px;margin:0;background:transparent;cursor:pointer}
#reel-seek::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--reel-accent) var(--seek-progress,0%),#555 var(--seek-progress,0%))}
#reel-seek::-moz-range-track{height:2px;background:#555}
#reel-seek::-moz-range-progress{height:2px;background:var(--reel-accent)}
#reel-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;background:var(--white);border:0;border-radius:50%;margin-top:-4px}
#reel-seek::-moz-range-thumb{width:10px;height:10px;background:var(--white);border:0;border-radius:50%}
#reel-seek:focus-visible{outline:1px solid #fff;outline-offset:5px}
#reel-seek:disabled{cursor:wait;opacity:.4}
.reel-keyboard-hint{text-align:center;color:#797975;font-family:monospace;font-size:.75rem;line-height:1.5}
.reel-keyboard-hint span{margin-left:25px}
.reel-dialog:fullscreen{width:100vw;height:100vh}
.reel-player-shell:fullscreen{width:100vw;height:100vh}
#showreel-video:focus{outline:none}
.reel-dialog .cursor-trail{display:none}
@keyframes reel-type-in{from{clip-path:inset(100% 0 0);transform:translateY(30px)}to{clip-path:inset(0);transform:translateY(0)}}
@keyframes reel-frame-in{from{clip-path:inset(12% 8%);opacity:.5}to{clip-path:inset(0);opacity:1}}
@media(min-width:1700px){.reel-hero{max-width:2200px;margin:auto}.reel-wordmark{font-size:clamp(180px,12.6vw,275px)}}
@media(max-width:800px){.reel-hero{padding-top:112px}.reel-intro>p:last-child{display:none}.reel-frame{height:47svh;min-height:320px}.reel-frame-top,.reel-frame-bottom{left:20px;right:20px}.reel-frame-top{font-size:.75rem}.reel-sound-note{display:none}#reel-frame-time{position:static;transform:none}.reel-strip{gap:6px}.reel-strip button{aspect-ratio:1.4}.reel-strip button span{left:3px;bottom:3px;font-size:.75rem}.reel-bottom>span{max-width:200px}.reel-controls{gap:16px}.reel-player-shell{gap:12px}.reel-keyboard-hint{display:none}}
@media(max-width:540px){.reel-hero{padding:100px 16px 22px}.reel-intro{font-size:.75rem;margin-bottom:18px;letter-spacing:0}.reel-wordmark{font-size:12.3vw;letter-spacing:-.065em}.reel-frame{margin-top:24px;min-height:310px;height:46svh}.reel-frame-top{align-items:flex-start;gap:15px;top:20px}.reel-frame-top>span:last-child{max-width:110px;text-align:right}.reel-frame-top b{display:block;margin:3px 0 0}.reel-watch{gap:10px}.reel-play-ring{width:90px;height:90px}.reel-watch-label{font-size:.75rem}.reel-frame-bottom{bottom:15px;font-size:.75rem}.reel-frame-bottom button{font-size:.75rem}.reel-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.reel-strip button{aspect-ratio:2.1}.reel-edit-heading{font-size:.75rem;gap:25px;align-items:start}.reel-edit-heading>span:last-child{text-align:right;max-width:125px}.reel-bottom>span{display:none}.reel-bottom{justify-content:flex-end;margin-top:12px}.reel-controls{display:grid;grid-template-columns:auto 1fr auto;gap:0 16px;padding-top:10px}.reel-seek-label{grid-column:1/-1;grid-row:1}.reel-elapsed{grid-column:2;grid-row:2;text-align:center}#reel-play{grid-column:1;grid-row:2}#reel-sound{grid-column:3;grid-row:2}#reel-fullscreen{grid-row:3;grid-column:1/-1;text-align:right;font-size:.75rem}.reel-player-heading p{max-width:210px;line-height:1.4}.reel-player-heading h2{font-size:.75rem}.reel-player-shell{padding:14px 16px 8px;gap:8px}.reel-player-feedback{bottom:4px}}
@media(max-height:550px) and (orientation:landscape){.reel-player-shell{padding:8px 16px;gap:3px}.reel-player-heading p,.reel-keyboard-hint{display:none}.reel-player-heading h2{font-size:.75rem}.reel-controls{padding-top:2px}.reel-player-heading,#reel-close{min-height:36px}.reel-player-start{width:58px;height:58px}}
@media(prefers-reduced-motion:reduce){.reel-wordmark span,.reel-frame{animation:none}.reel-watch,.reel-play-ring,.reel-preview,.reel-strip img{transition:none}.reel-watch{transform:translate(-50%,-50%)}}

/* An optical opening plate: the film is revealed only after a decoded frame. */
.reel-opening{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 100%,#252a27 0,transparent 62%),#0c0e0d;transition:opacity .7s ease;contain:paint}
.reel-opening-light{position:absolute;inset:-35%;background:radial-gradient(ellipse at 64% 28%,#bba68420,transparent 32%),radial-gradient(ellipse at 30% 64%,#8fada31a,transparent 36%);transform:rotate(-18deg);animation:reel-light-drift 5s ease-in-out alternate infinite}
.reel-opening-light:after{content:'';position:absolute;left:20%;top:45%;width:60%;height:1px;background:linear-gradient(90deg,transparent,#ded6c22b,transparent);box-shadow:0 0 55px 15px #b9b09a09}
.reel-opening-line{position:absolute;left:calc(50% - 45px);top:calc(50% + 78px);width:90px;height:1px;overflow:hidden;background:#ffffff16}
.reel-opening-line:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#e8e5dc,transparent);transform:translateX(-100%);animation:reel-light-pass 1.6s ease-in-out infinite}
.reel-frame>.reel-opening>.reel-opening-line{display:none}
.reel-frame.preview-ready>.reel-opening{opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
.reel-frame.preview-ready .reel-opening-light,.reel-frame.preview-still .reel-opening-light{animation:none}
.atlas.reel-home .reel-preview{clip-path:inset(42% 0);transition:opacity .7s ease,clip-path 1s cubic-bezier(.22,1,.36,1),transform .55s ease}
.atlas.reel-home .reel-frame.preview-ready .reel-preview{opacity:1;clip-path:inset(0)}
.reel-player-opening{z-index:1;display:grid;place-items:center}
.reel-player-opening>img{position:relative;width:96px;height:auto;object-fit:contain;opacity:.85;filter:invert(1)}
#showreel-video{opacity:0;clip-path:inset(42% 0);transition:opacity .6s ease,clip-path .85s cubic-bezier(.22,1,.36,1)}
.reel-ready #showreel-video{opacity:1;clip-path:inset(0)}
.reel-ready .reel-player-opening{opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s .55s}
.reel-dialog:not(.reel-loading) .reel-opening-light,.reel-dialog:not(.reel-loading) .reel-opening-line:after{animation:none}
.reel-dialog:not(.reel-loading) .reel-opening-line{opacity:0}
.reel-dialog:not(.reel-ready):not(.reel-loading) .reel-player-opening>img{opacity:.12}
@keyframes reel-light-drift{to{transform:rotate(-12deg) translate3d(-3%,4%,0)}}
@keyframes reel-light-pass{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.reel-opening,.reel-ready .reel-player-opening,.reel-frame.preview-ready>.reel-opening,#showreel-video,.atlas.reel-home .reel-preview{transition:none}.reel-opening-light,.reel-opening-line:after{animation:none}}

.reel-loading #reel-player-status:not(:empty){background:none;padding:8px;font:400 10px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#c5c6bf}