/* The film controls share the site's warm whites, coral and pixel geometry. */
.cinema-player {
  position:relative;
  isolation:isolate;
  background:#080808;
  color:#fef9f9;
  --player-ease:cubic-bezier(.23,1,.32,1);
  --film-glass:linear-gradient(115deg,#65524a9c,#191b1eab 72%);
}
.cinema-player.is-enhanced { overflow:visible; box-shadow:0 0 0 1px #ffffff12; }
.cinema-player.is-enhanced video { cursor:pointer; }
.cinema-player .film-play { bottom:0; z-index:1; padding-bottom:50px; }
.cinema-player .film-play-label { font-size:clamp(18px,1.6vw,30px); letter-spacing:-.025em; }
.cinema-player .play-circle {
  --play-step:14px;
  position:relative;
  display:grid;
  place-items:center;
  width:112px;
  height:112px;
  flex:none;
  padding:0;
  border:0;
  border-radius:0;
  background:#fff;
  backdrop-filter:none;
  clip-path:polygon(
    var(--play-step) 0,calc(100% - var(--play-step)) 0,
    calc(100% - var(--play-step)) var(--play-step),100% var(--play-step),
    100% calc(100% - var(--play-step)),calc(100% - var(--play-step)) calc(100% - var(--play-step)),
    calc(100% - var(--play-step)) 100%,var(--play-step) 100%,
    var(--play-step) calc(100% - var(--play-step)),0 calc(100% - var(--play-step)),
    0 var(--play-step),var(--play-step) var(--play-step)
  );
  transition:transform 260ms var(--player-ease);
}
.cinema-player .play-circle::after {
  content:'';
  width:25%;
  height:30%;
  background:#080808;
  clip-path:polygon(0 0,100% 50%,0 100%);
  transform:translateX(10%);
}
.cinema-player .film-play:focus-visible { outline:2px solid #00e5cc; outline-offset:-6px; }
@media(hover:hover) and (pointer:fine) {
  .cinema-player .film-play:hover .play-circle { transform:scale(1.06); background:#fff; }
}
.cinema-player .film-play:active .play-circle { transform:scale(.98); }

/* Play, sound and speed anchor a small glass strip; fullscreen stays separate. */
.cinema-dock {
  position:absolute;
  isolation:isolate;
  z-index:3;
  left:24px;
  bottom:24px;
  width:154px;
  max-width:calc(100% - 112px);
  height:58px;
  padding:6px;
  border:1px solid transparent;
  border-radius:18px;
  background:transparent;
  font-family:Inter,Arial,sans-serif;
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  overflow:visible;
  transition:width 260ms var(--player-ease),height 220ms var(--player-ease),opacity 180ms ease,transform 180ms var(--player-ease),visibility 0s;
}
.cinema-dock::before {
  content:''; position:absolute; z-index:-1; inset:-1px;
  border:1px solid #ffffff4d; border-radius:inherit; background:var(--film-glass);
  box-shadow:0 8px 28px #0004,inset 0 1px 1px #ffffff30;
  backdrop-filter:blur(24px) saturate(135%); -webkit-backdrop-filter:blur(24px) saturate(135%);
  pointer-events:none;
}
.cinema-player[data-dock-expanded=true] .cinema-dock { width:420px; }
.cinema-player[data-controls-hidden=true] :is(.cinema-dock,.cinema-fullscreen) {
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  pointer-events:none;
  transition:width 260ms var(--player-ease),height 220ms var(--player-ease),opacity 180ms ease,transform 180ms var(--player-ease),visibility 0s 180ms;
}
.cinema-primary { display:flex; align-items:center; gap:4px; width:140px; height:44px; }
.cinema-button {
  display:grid;
  place-items:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid #ffffff12;
  border-radius:12px;
  background:#ffffff06;
  color:#fef9f9;
  transition:background-color 150ms ease,transform 150ms var(--player-ease);
}
.cinema-button:active { transform:scale(.94); }
.cinema-toggle { background:#fef9f9; color:#470c0c; border-color:#ffffff99; box-shadow:0 2px 12px #0002; }
.cinema-fullscreen {
  position:absolute;
  z-index:3;
  right:24px;
  bottom:31px;
  background:var(--film-glass);
  border:1px solid #ffffff4d;
  border-radius:13px;
  box-shadow:0 8px 28px #0004,inset 0 1px 1px #ffffff30;
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity 180ms ease,transform 180ms var(--player-ease),visibility 0s,background-color 150ms ease;
}
.cinema-button:focus-visible,.cinema-player input:focus-visible { outline:2px solid #00e5cc; outline-offset:-3px; transition:none; }
.cinema-details {
  position:absolute;
  top:6px;
  bottom:6px;
  left:168px;
  right:14px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:14px;
  padding-left:14px;
  border-left:1px solid #ffffff24;
  min-width:0;
  clip-path:inset(0);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-5px);
  transition:opacity 100ms ease,transform 180ms var(--player-ease),visibility 0s 100ms;
}
.cinema-player[data-dock-expanded=true] .cinema-details {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition:opacity 160ms ease 60ms,transform 200ms var(--player-ease),visibility 0s;
}
.cinema-scrub { min-width:0; }
.cinema-timeline { position:relative; height:26px; display:flex; align-items:center; }
.cinema-time { display:flex; gap:6px; align-items:center; font-size:10px; line-height:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cinema-duration { color:#d9ccca; }
.cinema-time-divider { color:#b4a39f; }
.cinema-primary .cinema-audio { position:relative; flex:0 0 44px; width:44px; height:44px; }
.cinema-speed { width:44px; font-size:11px; font-weight:500; border-color:transparent; }
.cinema-icon { display:block; width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.icon-play { margin-left:1px; }
.icon-pause,.icon-muted,.icon-contract { display:none; }
.cinema-player[data-state=playing] .icon-play,.cinema-player[data-state=loading] .icon-play { display:none; }
.cinema-player[data-state=playing] .icon-pause,.cinema-player[data-state=loading] .icon-pause { display:block; }
.cinema-player[data-muted=true] .icon-sound { display:none; }
.cinema-player[data-muted=true] .icon-muted { display:block; }
.cinema-player[data-fullscreen=true] .icon-expand { display:none; }
.cinema-player[data-fullscreen=true] .icon-contract { display:block; }
.cinema-seek,.cinema-volume { display:block; padding:0; border:0; margin:0; height:26px; border-radius:0; background:transparent; appearance:none; -webkit-appearance:none; cursor:pointer; touch-action:pan-y; }
.cinema-seek { width:100%; --played:0%; --buffered:0%; }
.cinema-seek::-webkit-slider-runnable-track { height:3px; border-radius:8px; background:linear-gradient(to right,#fa746c var(--played),#ffffff55 var(--played),#ffffff55 var(--buffered),#ffffff26 var(--buffered)); }
.cinema-seek::-moz-range-track { height:3px; border-radius:8px; background:linear-gradient(to right,#fa746c var(--played),#ffffff55 var(--played),#ffffff55 var(--buffered),#ffffff26 var(--buffered)); }
.cinema-seek::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:9px; height:9px; margin-top:-3px; border:0; border-radius:50%; background:#ffb5ae; box-shadow:0 0 0 4px #ee716215,0 0 14px #e8483f55; }
.cinema-seek::-moz-range-thumb { width:9px; height:9px; border:0; border-radius:50%; background:#ffb5ae; box-shadow:0 0 0 4px #ee716215,0 0 14px #e8483f55; }
.cinema-seek:disabled { cursor:default; opacity:.45; }
.cinema-seek-preview { position:absolute; bottom:31px; left:0; transform:translateX(-50%); pointer-events:none; padding:6px 9px; border:1px solid #fff3; border-radius:7px; background:#211b1bf2; color:#fff; font-size:11px; font-variant-numeric:tabular-nums; box-shadow:0 3px 15px #0004; }
.cinema-volume { width:64px; height:30px; --volume:100%; }
.cinema-volume::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:linear-gradient(to right,#e7d7d5 var(--volume),#ffffff2a var(--volume)); }
.cinema-volume::-moz-range-track { height:3px; border-radius:3px; background:linear-gradient(to right,#e7d7d5 var(--volume),#ffffff2a var(--volume)); }
.cinema-volume::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:7px; height:7px; margin-top:-2px; border:0; border-radius:50%; background:#fef9f9; }
.cinema-volume::-moz-range-thumb { width:7px; height:7px; border:0; border-radius:50%; background:#fef9f9; }

.cinema-seek-preview { bottom:auto; top:22px; z-index:1; padding:2px 6px; border-radius:5px; font-size:10px; }
.cinema-status { position:absolute; z-index:4; top:44%; left:50%; transform:translate(-50%,-50%); padding:12px 18px; border:1px solid #ffffff26; border-radius:30px; font-size:14px; color:#fff; background:#211b1be6; text-align:center; }
.cinema-dock[hidden],.cinema-status[hidden],.cinema-seek-preview[hidden],.cinema-player [hidden] { display:none; }
.cinema-player:fullscreen,.cinema-player[data-fullscreen=true] { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.cinema-player:fullscreen video,.cinema-player[data-fullscreen=true] video { width:100%; height:100%; object-fit:contain; }
.cinema-player:fullscreen :is(.cinema-dock,.cinema-fullscreen),.cinema-player[data-fullscreen=true] :is(.cinema-dock,.cinema-fullscreen) { bottom:max(24px,env(safe-area-inset-bottom)); }
.cinema-player:fullscreen .cinema-fullscreen,.cinema-player[data-fullscreen=true] .cinema-fullscreen { bottom:calc(max(24px,env(safe-area-inset-bottom)) + 7px); }
.cinema-player:focus-visible { outline:2px solid #fa746c; outline-offset:6px; }
@media(hover:hover) and (pointer:fine) {
  .cinema-button:hover { background-color:#ffffff20; }
  .cinema-toggle:hover { background-color:#ffddd8; }
}
@media(max-width:900px) {
  .cinema-dock { left:16px; bottom:16px; max-width:calc(100% - 96px); }
  .cinema-fullscreen { right:16px; bottom:23px; }
  .cinema-details { gap:10px; }
  .cinema-volume { width:52px; }
}
@media(max-width:700px) {
  .cinema-player .film-play { padding-bottom:0; gap:8px; }
  .cinema-player .play-circle { --play-step:8px; width:64px; height:64px; }
  /* Two full touch targets in a narrow side rail leave the film visible. */
  .cinema-dock,.cinema-player[data-dock-expanded=true] .cinema-dock { left:8px; bottom:8px; width:52px; max-width:none; height:100px; padding:3px; border-radius:15px; }
  .cinema-primary { position:static; display:flex; flex-direction:column; width:44px; height:92px; gap:4px; }
  .cinema-speed { display:none; }
  .cinema-fullscreen { right:8px; bottom:12px; }
  /* Progress sits beside the rail with a generous invisible touch target. */
  .cinema-details { top:2px; bottom:2px; left:calc(100% + 6px); right:auto; width:44px; padding:0; border:0; gap:0; overflow:visible; clip-path:none; }
  .cinema-icon { width:19px; height:19px; }
  .cinema-scrub { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; width:44px; height:94px; }
  .cinema-timeline { flex:none; width:44px; height:76px; }
  .cinema-seek { writing-mode:vertical-lr; direction:rtl; width:44px; height:76px; touch-action:none; }
  .cinema-seek::-webkit-slider-runnable-track { width:3px; height:100%; background:linear-gradient(to top,#fa746c var(--played),#ffffff55 var(--played),#ffffff55 var(--buffered),#ffffff26 var(--buffered)); }
  .cinema-seek::-moz-range-track { width:3px; height:100%; background:linear-gradient(to top,#fa746c var(--played),#ffffff55 var(--played),#ffffff55 var(--buffered),#ffffff26 var(--buffered)); }
  .cinema-seek::-webkit-slider-thumb { margin:0 0 0 -3px; }
  .cinema-seek::-moz-range-thumb { margin:0; }
  .cinema-time { flex:none; justify-content:center; gap:0; width:44px; font-size:9px; line-height:12px; text-shadow:0 1px 4px #000; }
  .cinema-time-divider,.cinema-duration,.cinema-seek-preview { display:none; }
  .cinema-player:fullscreen :is(.cinema-dock,.cinema-fullscreen),.cinema-player[data-fullscreen=true] :is(.cinema-dock,.cinema-fullscreen) { bottom:max(8px,env(safe-area-inset-bottom)); }
  .cinema-player:fullscreen .cinema-fullscreen,.cinema-player[data-fullscreen=true] .cinema-fullscreen { bottom:calc(max(8px,env(safe-area-inset-bottom)) + 4px); }
}

.cinema-player[data-dock-instant=true] :is(.cinema-dock,.cinema-details,.cinema-fullscreen) { transition:none; }
@media(prefers-reduced-motion:reduce) {
  .cinema-dock,.cinema-details,.cinema-button,.cinema-player .play-circle { transition:none !important; }
  .cinema-player .film-play:hover .play-circle,.cinema-player .film-play:active .play-circle,.cinema-button:active { transform:none; }
  .cinema-player[data-controls-hidden=true] :is(.cinema-dock,.cinema-fullscreen),.cinema-details { transform:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .cinema-dock { background:#302b2a; } }

/* The volume well rises from the Sound control, within the same glass family. */
.cinema-volume-popover {
  position:absolute; z-index:4; bottom:calc(100% + 8px); left:50%;
  display:grid; grid-template-columns:minmax(0,1fr); place-items:center; width:32px; height:142px; padding:14px 0; overflow:visible;
  border:1px solid #ffffff4d; border-radius:16px; background:var(--film-glass);
  box-shadow:0 8px 28px #0004,inset 0 1px 1px #ffffff30;
  backdrop-filter:blur(24px) saturate(135%); -webkit-backdrop-filter:blur(24px) saturate(135%);
  opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,6px) scaleY(.96); transform-origin:bottom center;
  transition:opacity 130ms ease,transform 200ms var(--player-ease),visibility 0s 200ms;
}
.cinema-volume-popover::after { content:''; position:absolute; left:0; right:0; bottom:-14px; height:14px; }
.cinema-player[data-volume-open=true] .cinema-volume-popover { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition:opacity 130ms ease,transform 200ms var(--player-ease),visibility 0s; }
/* The transparent input extends beyond the slim well, keeping a 44px target. */
.cinema-volume-popover .cinema-volume { display:block; justify-self:center; writing-mode:vertical-lr; direction:rtl; width:44px; height:112px; touch-action:none; }
.cinema-volume-popover .cinema-volume::-webkit-slider-runnable-track { width:3px; height:100%; background:linear-gradient(to top,#e7d7d5 var(--volume),#ffffff2a var(--volume)); }
.cinema-volume-popover .cinema-volume::-moz-range-track { width:3px; height:100%; background:linear-gradient(to top,#e7d7d5 var(--volume),#ffffff2a var(--volume)); }
.cinema-volume-popover .cinema-volume::-webkit-slider-thumb { width:9px; height:9px; margin:0 0 0 -3px; }
.cinema-volume-popover .cinema-volume::-moz-range-thumb { width:9px; height:9px; margin:0; }
@media(max-width:700px) { .cinema-volume-popover { height:98px; padding-block:10px; } .cinema-volume-popover .cinema-volume { height:76px; } }
.cinema-player[data-dock-instant=true] .cinema-volume-popover,.cinema-player[data-volume-instant=true] .cinema-volume-popover { transition:none; }
@media(prefers-reduced-motion:reduce) { .cinema-volume-popover { transition:none; transform:translateX(-50%); } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .cinema-player { --film-glass:#302b2a; } .cinema-dock { background:transparent; } }
@media(max-width:360px) { .cinema-volume-popover { height:72px; padding-block:10px; } .cinema-volume-popover .cinema-volume { height:50px; } }

/* On phones the volume well opens alongside the rail, inside the film. */
@media(max-width:700px) {
  /* The 13px offset preserves the old centre while narrowing 58px to 32px. */
  .cinema-volume-popover { top:-2px; bottom:auto; left:calc(100% + 69px); height:96px; padding-block:8px; transform:translate(6px,-50%); transform-origin:left center; }
  .cinema-player[data-volume-open=true] .cinema-volume-popover { transform:translate(0,-50%); }
  /* A hover bridge across this gap would intercept the adjacent seek slider. */
  .cinema-volume-popover::after { display:none; }
  .cinema-volume-popover .cinema-volume { height:76px; }
}
@media(max-width:700px) and (prefers-reduced-motion:reduce) { .cinema-volume-popover { transform:translate(0,-50%); } }