/* the review video: its poster is the site's roller door, cracked open on the floor light, and the play click lifts it. Colours come from the page */
.film{--at:0;margin:0;min-width:0}
/* YouTube's 200px minimum. The width stays set: without it min-height passes through the ratio and pushes the screen out of a narrow column */
.film-screen{position:relative;width:100%;aspect-ratio:16/9;min-height:200px;overflow:hidden;border-radius:8px;background:#000;isolation:isolate}
.film-screen::before{content:"";position:absolute;inset:auto 0 0;height:30%;background:radial-gradient(60% 100% at 50% 100%,color-mix(in oklab,var(--glow,#9DB4D6) 45%,transparent),transparent)}
.film-slot,.film-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* YouTube pins its title and logo to the frame's edges and fits the video to the width: a frame this tall sets them outside the screen's clip. The plain embed fallback keeps its whole frame, its controls live there */
.film-screen iframe.bare{inset:-70% 0 auto;height:240%;transform-origin:0 0}
.film-door{position:absolute;inset:0;z-index:1;width:100%;padding:0;border:0;background:#000;color:var(--paper);cursor:pointer;translate:0 -2.5%;
  transition:translate .7s var(--ease);-webkit-tap-highlight-color:transparent}
.film-door::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#fff;box-shadow:0 0 12px 2px rgba(255,255,255,.75),0 0 54px 10px color-mix(in oklab,var(--glow,#9DB4D6) 55%,transparent)}
.film-door:is(:hover,:focus-visible){translate:0 -7%}
.film-door:focus-visible{outline:2px solid var(--paper);outline-offset:-4px}
.film-plate{position:absolute;inset:0;overflow:hidden}
.film-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(.8) contrast(1.06) brightness(.72);transition:opacity .9s;
  animation:film-pan 15s ease-in-out infinite alternate paused}
.film-plate img.on{opacity:1}
.film-plate img.bars{scale:1.34}
.film-plate img:nth-child(2){animation-name:film-push}
.film-plate img:nth-child(3){animation-direction:alternate-reverse}
.film.rolling .film-plate img{animation-play-state:running}
@keyframes film-pan{from{transform:scale(1.04) translateX(-1.5%)}to{transform:scale(1.12) translateX(1.5%)}}
@keyframes film-push{from{transform:scale(1.03)}to{transform:scale(1.14)}}
/* the door's slats, over everything on it */
.film-plate::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px calc(100%/12 - 2px),rgba(0,0,0,.42) calc(100%/12 - 2px) calc(100%/12)),
  radial-gradient(100% 90% at 50% 45%,transparent 40%,rgba(0,0,0,.72))}
.film-key{position:absolute;left:50%;top:50%;z-index:1;width:76px;height:76px;margin:-38px;display:grid;place-items:center;border-radius:50%;background:rgba(10,11,13,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .3s,color .3s}
.film-key::before{content:"";position:absolute;inset:3px;border-radius:50%;background:repeating-conic-gradient(var(--paper) 0 1.6deg,transparent 1.6deg 7.5deg);
  -webkit-mask:radial-gradient(closest-side,transparent 86%,#000 87%);mask:radial-gradient(closest-side,transparent 86%,#000 87%)}
.film-key svg{width:30px;height:30px;fill:currentColor}
.film-door:is(:hover,:focus-visible) .film-key{background:var(--paper);color:#000}
.starting .film-key::before{animation:film-rev 1s linear infinite}
@keyframes film-rev{to{rotate:1turn}}
.film.up .film-door{translate:0 -106%;pointer-events:none;visibility:hidden;transition:translate 1.3s cubic-bezier(.65,0,.25,1),visibility 0s 1.3s}

/* the deck sits below the player: a tach for a seek bar, the run's one */
.film-deck{display:flex;align-items:center;gap:10px;min-height:48px;color:var(--steel);font:400 .6rem/1 var(--m)}
.film-deck[hidden]{display:none}
@media (max-width:480px){.film-deck{gap:2px}.film-deck [data-all]{display:none}}
.film-deck button{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--paper);cursor:pointer}
.film-deck button[hidden]{display:none}
.film-deck button:hover{color:#fff}
.film-deck button:focus-visible{outline:2px solid var(--paper);outline-offset:-4px;border-radius:8px}
.film-deck svg{width:20px;height:20px;fill:currentColor}
.film-deck .stroke svg{fill:none;stroke:currentColor;stroke-width:2}
.film-gauge{position:relative;flex:1;min-width:0;height:28px}
/* phones have keys for this, and iPhones ignore setVolume */
.film-gauge.vol{flex:0 0 64px}
@media (hover:none){.film-gauge.vol{display:none}}
.film-gauge::before,.film-gauge::after{content:"";position:absolute;left:0;top:10px;height:8px;pointer-events:none}
.film-gauge::before{width:100%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,transparent 1px 6px)}
.film-gauge::after{width:calc(var(--at)*100%);background:repeating-linear-gradient(90deg,var(--paper) 0 1px,transparent 1px 6px);border-right:2px solid var(--paper);top:6px;height:16px;background-size:100% 8px;background-position:0 4px;background-repeat:no-repeat}
.film-gauge input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.film-gauge:has(input:focus-visible){outline:2px solid var(--paper);outline-offset:2px;border-radius:2px}

/* a real select: the keyboard, the screen reader and a phone's own picker come with it. Browsers without base-select keep their native list */
.film-res{flex:none;padding:17px 4px;border:0;background:none;color:var(--paper);font:400 .6rem/1 var(--m);cursor:pointer}
.film-res[hidden]{display:none}
.film-res:focus-visible{outline:2px solid var(--paper);outline-offset:-4px;border-radius:8px}
.film-res option{background:#0A0B0D;color:var(--paper)}
@supports (appearance:base-select){
  .film-res,.film-res::picker(select){appearance:base-select}
  .film-res::picker-icon{display:none}
  .film-res::picker(select){position-area:block-start;margin-bottom:6px;padding:4px;border:1px solid rgba(255,255,255,.24);border-radius:8px;background:rgba(10,11,13,.92)}
  .film-res option{padding:9px 12px;border-radius:5px;background:none;cursor:pointer}
  .film-res option::checkmark{display:none}
  .film-res option:is(:hover,:focus-visible){background:rgba(255,255,255,.12)}
  .film-res option:checked{color:#fff;box-shadow:inset 2px 0 var(--paper)}
}

.film-cap{display:grid;gap:2px;padding-top:12px;font-size:.84rem;line-height:1.4}
.film-deck:not([hidden])+.film-cap{padding-top:4px}
.film-cap>a{color:var(--paper);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.film-cap>a:hover{text-decoration:underline}
.film-cap span{color:var(--steel);font-size:.76rem}
.film-cap span a{color:var(--paper);padding-block:6px}

.film:fullscreen{display:flex;flex-direction:column;background:#000;--paper:#F2F2EF}
.film:fullscreen .film-screen{flex:1;aspect-ratio:auto;border-radius:0}
.film:fullscreen .film-cap{display:none}
.film:fullscreen .film-deck{padding:0 12px}

@media (prefers-reduced-motion:reduce){
  .film-plate img{animation:none}
  .film-door{transition:none}
  .film.up .film-door{translate:none;opacity:0;transition:opacity .3s,visibility 0s .3s}
  .starting .film-key::before{animation:none}
}