.hero-reel{position:relative}
.video-shell{position:relative;width:min(100%,calc(80svh * var(--film-ratio)));aspect-ratio:var(--film-ratio);max-height:80svh;margin-inline:auto;background:var(--surface)}
.project-film .video-shell video{display:block;width:100%!important;height:100%!important;max-width:none;max-height:none;object-fit:contain;background:transparent}
.project-film.is-portrait .video-shell{width:min(58vw,720px,calc(80svh * var(--film-ratio)))}
.video-actions{position:absolute;z-index:7;right:10px;bottom:10px;display:flex;align-items:center;gap:2px;opacity:0;pointer-events:none;transition:opacity .18s ease}
.video-actions>*{pointer-events:none}
.video-control-toggle{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;padding:0;border:0;border-radius:0;background:transparent;color:#fff;mix-blend-mode:difference;cursor:pointer;pointer-events:auto}
.video-control-toggle svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.video-play-toggle svg path:first-child{stroke:none;fill:currentColor}
.video-audio-toggle svg path:first-child{stroke:none;fill:currentColor}
.video-volume-range{position:absolute;top:50%;right:36px;width:62px;height:26px;margin:0;padding:0;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,#fff var(--volume-progress,0%),rgba(255,255,255,.48) var(--volume-progress,0%)) center/100% 1px no-repeat;opacity:.7;cursor:pointer;pointer-events:auto;touch-action:pan-x;transform:translateY(-50%)}
.video-actions .video-control-toggle,.video-actions .video-volume-range{pointer-events:none}
.video-volume-range::-webkit-slider-runnable-track{height:1px;background:transparent}
.video-volume-range::-moz-range-track{height:1px;background:transparent}
.video-volume-range::-webkit-slider-thumb{-webkit-appearance:none;width:5px;height:5px;margin-top:-2px;border:0;border-radius:50%;background:#fff;box-shadow:none}
.video-volume-range::-moz-range-thumb{width:5px;height:5px;border:0;border-radius:50%;background:#fff;box-shadow:none}
.video-volume-range:focus-visible{outline:1px solid currentColor;outline-offset:2px}
.video-control-toggle:focus-visible{outline:1px solid currentColor;outline-offset:1px}
.hero-reel .video-actions{right:clamp(20px,4vw,64px);bottom:34px}
@media(min-width:810px){.hero-reel .video-actions{bottom:20px}}
.video-actions.is-audio-idle{opacity:1;pointer-events:none}.video-actions.is-audio-idle .video-audio-toggle{position:absolute;right:0;opacity:1;pointer-events:auto}.video-actions.is-audio-idle>:not(.video-audio-toggle){opacity:0!important;pointer-events:none!important}
.is-keyboard-focus .video-actions{opacity:1;pointer-events:auto}.is-keyboard-focus .video-actions>*{pointer-events:auto}.is-keyboard-focus .video-actions.is-audio-idle .video-audio-toggle{position:static}.is-keyboard-focus .video-actions.is-audio-idle>*{opacity:1!important;pointer-events:auto!important}.is-keyboard-focus .video-actions.is-audio-idle .video-fullscreen-toggle{margin-right:70px}.is-keyboard-focus .video-actions.is-audio-idle .video-volume-range{opacity:.7!important}
@media(hover:hover) and (pointer:fine){.hero-reel:hover .video-actions,.video-shell:hover .video-actions{opacity:1;pointer-events:auto}.hero-reel:hover .video-actions>*,.video-shell:hover .video-actions>*{pointer-events:auto}.hero-reel:hover .video-actions.is-audio-idle .video-audio-toggle,.video-shell:hover .video-actions.is-audio-idle .video-audio-toggle{position:static}.hero-reel:hover .video-actions.is-audio-idle>* ,.video-shell:hover .video-actions.is-audio-idle>*{opacity:1!important;pointer-events:auto!important}.hero-reel:hover .video-actions.is-audio-idle .video-fullscreen-toggle,.video-shell:hover .video-actions.is-audio-idle .video-fullscreen-toggle{margin-right:70px}.hero-reel:hover .video-actions.is-audio-idle .video-volume-range,.video-shell:hover .video-actions.is-audio-idle .video-volume-range{opacity:.7!important}}
.video-actions.is-touch-open:has(.video-volume-range) .video-fullscreen-toggle,.video-actions:not(.is-audio-idle):has(.video-volume-range) .video-fullscreen-toggle{margin-right:70px}
@media(max-width:760px){.hero-reel .video-actions{right:16px;bottom:18px}}
@media(max-width:480px){.hero-reel .video-actions{right:16px;bottom:18px}}
@media(hover:none),(pointer:coarse){.video-actions.is-touch-open{opacity:1;pointer-events:auto}.video-actions.is-touch-open>*{opacity:1;pointer-events:auto}}
@media(prefers-reduced-motion:reduce){.video-actions{transition:none}}
.video-shell:fullscreen{width:100vw!important;height:100vh!important;max-height:none!important;max-width:none!important;aspect-ratio:auto!important;margin:0!important;background:#000;display:grid;place-items:center}
.video-shell:fullscreen video{width:100%!important;height:100%!important;max-width:100vw!important;max-height:100vh!important;object-fit:contain!important;background:#000!important}
.video-shell:fullscreen .video-actions{right:18px;bottom:14px}

.video-control-toggle:disabled{opacity:.4;cursor:not-allowed}
.hero-reel:fullscreen{width:100vw!important;height:100vh!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;background:#000;display:grid;place-items:center}
.hero-reel:fullscreen video{width:100%!important;height:100%!important;max-width:100vw!important;max-height:100vh!important;object-fit:contain!important}
.hero-reel:fullscreen .video-actions,.video-shell:fullscreen .video-actions{right:18px;bottom:14px;opacity:1;pointer-events:auto}

/* Fullscreen owns a fixed viewport: video and controls must not create grid tracks. */
.video-shell:fullscreen,.hero-reel:fullscreen{position:fixed!important;inset:0!important;overflow:hidden!important;isolation:isolate}
.video-shell:fullscreen video,.hero-reel:fullscreen video{position:absolute!important;inset:0!important;z-index:0;margin:0!important;min-height:0!important}
.video-shell:fullscreen .video-actions,.hero-reel:fullscreen .video-actions,.is-video-fullscreen .video-actions{position:absolute!important;inset:auto max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) auto!important;z-index:2147483647!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;mix-blend-mode:normal;isolation:isolate;background:rgba(0,0,0,.28)}.video-shell:fullscreen .video-actions>*,.hero-reel:fullscreen .video-actions>*,.is-video-fullscreen .video-actions>*{opacity:1!important;pointer-events:auto}
.is-video-fullscreen .video-control-toggle,.video-shell:fullscreen .video-control-toggle,.hero-reel:fullscreen .video-control-toggle{color:#fff!important;mix-blend-mode:normal!important;visibility:visible!important}

.video-loading-indicator{display:none;position:absolute;inset:50% auto auto 50%;z-index:6;width:24px;height:24px;margin:-12px 0 0 -12px;border:1.5px solid color-mix(in srgb,var(--foreground) 24%,transparent);border-top-color:var(--foreground);border-radius:50%;color:var(--foreground);opacity:.9;pointer-events:none;mix-blend-mode:difference;animation:video-loading-spin .8s linear infinite}
.video-shell.is-video-loading .video-loading-indicator,.hero-reel.is-video-loading .video-loading-indicator{display:block}
@keyframes video-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.video-loading-indicator{animation:none}}

/* The inactivity state wins over hover and fullscreen; audio keeps its idle toggle. */
.is-controls-auto-hidden .video-actions:not(.is-audio-idle){opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.is-controls-auto-hidden .video-actions:not(.is-audio-idle)>*{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.is-controls-auto-hidden .video-actions.is-audio-idle{opacity:1!important;visibility:visible!important;pointer-events:none!important;isolation:auto!important;background:transparent!important}
.is-controls-auto-hidden .video-actions.is-audio-idle .video-audio-toggle{position:absolute!important;right:0!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.hero-reel.is-controls-auto-hidden .video-actions.is-audio-idle>:not(.video-audio-toggle),.video-shell.is-controls-auto-hidden .video-actions.is-audio-idle>:not(.video-audio-toggle){opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.is-controls-auto-hidden .project-video-seek{opacity:0!important;visibility:hidden!important;pointer-events:none!important}