/* Only the first showreel and its expanded state. */
.portfolio-reel [hidden]{display:none!important}
.portfolio-reel .reel-inline-meta{display:none;pointer-events:none;color:#fff;mix-blend-mode:difference}
.portfolio-reel.has-video .reel-inline-meta{display:flex}
.portfolio-reel.is-expanded .reel-inline-meta{display:none}
.portfolio-reel .reel-expand{position:absolute;right:5%;bottom:4%;z-index:3;display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 0;background:none;color:#fff;font:10px/1.2 var(--mono);letter-spacing:.02em;text-shadow:0 1px 6px #000;mix-blend-mode:difference}
.reel-expand svg{width:16px;height:16px}
.portfolio-reel .reel-expand:hover span{text-decoration:underline;text-underline-offset:4px}
.main-reel.reel-expanded-slot{aspect-ratio:16/9}
.portfolio-reel.is-expanded{position:fixed;inset:0;z-index:1000;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;aspect-ratio:auto;border-radius:0;background:#050505;outline:none;color:#fff;isolation:isolate}
.portfolio-reel.is-expanded video{display:block;width:100%;height:100%;object-fit:contain;background:#050505}
.portfolio-reel:fullscreen{width:100%;height:100%;background:#050505}
.portfolio-reel:-webkit-full-screen{width:100%;height:100%;background:#050505}
.portfolio-reel.is-expanded .reel-expand{display:none}
.reel-full-ui{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:1;transition:opacity .3s ease;font:11px/1.4 var(--mono);letter-spacing:.02em}
.reel-full-ui::before,.reel-full-ui::after{content:'';position:absolute;left:0;right:0;height:125px;z-index:-1;pointer-events:none}
.reel-full-ui::before{top:0;background:linear-gradient(#0008,transparent)}
.reel-full-ui::after{bottom:0;background:linear-gradient(transparent,#0009)}
.reel-full-top{position:absolute;top:max(15px,env(safe-area-inset-top));left:max(28px,env(safe-area-inset-left));right:max(28px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:20px}
.reel-full-ui button{pointer-events:auto;min-height:44px;padding:8px 0;color:inherit;background:none;font:inherit;letter-spacing:inherit;white-space:nowrap}
.reel-full-ui button:hover{text-decoration:underline;text-underline-offset:4px}
.reel-exit{display:flex;align-items:center;gap:12px}.reel-exit span{font:22px/1 var(--mono)}
.reel-full-bottom{position:absolute;left:max(28px,env(safe-area-inset-left));right:max(28px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}
.reel-actions{display:flex;align-items:center;gap:30px}.reel-clock{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8}
.reel-sound-wrap{position:relative;pointer-events:auto}.reel-tooltip{position:absolute;bottom:100%;left:0;white-space:nowrap;padding:6px 0;color:#d8d8d8;font-size:10px;opacity:0;transform:translateY(3px);transition:opacity .18s,transform .18s;pointer-events:none}
.reel-sound-wrap:hover .reel-tooltip,.reel-sound:focus-visible+.reel-tooltip{opacity:1;transform:translateY(0)}
.reel-timeline{--played:0%;display:block;pointer-events:auto;cursor:pointer;touch-action:none;width:100%;height:28px;margin:0;padding:0;border:0;border-radius:0;appearance:none;-webkit-appearance:none;background:transparent;color:white}
.reel-timeline::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#fff 0 var(--played),#ffffff45 var(--played) 100%)}
.reel-timeline::-moz-range-track{height:2px;background:#ffffff45}.reel-timeline::-moz-range-progress{height:2px;background:#fff}
.reel-timeline::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:8px;height:8px;border:0;border-radius:50%;background:#fff;margin-top:-3px}
.reel-timeline::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:#fff}
.reel-timeline:disabled{opacity:.4;cursor:default}
.portfolio-reel.is-expanded :focus-visible{outline:1px solid #fff;outline-offset:4px}
.portfolio-reel.controls-idle{cursor:none}.portfolio-reel.controls-idle .reel-full-ui{opacity:0}.portfolio-reel.controls-idle .reel-full-ui button,.portfolio-reel.controls-idle .reel-timeline,.portfolio-reel.controls-idle .reel-sound-wrap{pointer-events:none}
@media(max-width:600px){.reel-full-top{left:18px;right:18px;font-size:9px}.reel-full-bottom{left:18px;right:18px}.reel-actions{gap:22px;font-size:10px}.reel-tooltip{font-size:9px}.portfolio-reel .reel-expand{font-size:9px}}
@media(prefers-reduced-motion:reduce){.reel-full-ui,.reel-tooltip{transition:none}}