/* ===== Showreel stage ===== */
.reels{position:relative}
.reels__stage{position:relative;width:100%;aspect-ratio:16/9;max-height:82vh;container-type:size;border-radius:var(--r);overflow:hidden;
  background:#050505;isolation:isolate;border:1px solid var(--line);box-shadow:0 40px 120px -40px rgba(0,0,0,.9)}
.reels__layer{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.reels__layer.is-on{opacity:1}
.reels__layer .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reels__layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .7s}
.reels__layer iframe{position:absolute;left:50%;top:50%;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);transform:translate(-50%,-50%);border:0;opacity:0;transition:opacity .7s;pointer-events:none}
.reels__layer .is-live{opacity:1}
.reels__shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,.45) 0,rgba(5,5,5,0) 26%,rgba(5,5,5,0) 42%,rgba(5,5,5,.9) 100%),
             linear-gradient(90deg,rgba(5,5,5,.5) 0,rgba(5,5,5,0) 55%)}
.reels__live{position:absolute;z-index:3;top:clamp(.9rem,2vw,1.4rem);left:clamp(1rem,2.4vw,1.8rem);margin:0;display:flex;align-items:center;gap:.55rem;
  font-size:.78rem;color:var(--fg);padding:.4rem .85rem .4rem .7rem;border-radius:100px;background:rgba(9,9,9,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(244,243,238,.14)}
.reels__live i{width:7px;height:7px;border-radius:50%;background:var(--acid);animation:reelblink 1.8s ease-in-out infinite}
@keyframes reelblink{50%{opacity:.25}}
.reels__info{position:absolute;z-index:3;left:clamp(1.1rem,3vw,2.8rem);bottom:clamp(1.1rem,3vw,2.6rem);right:clamp(1.1rem,3vw,2.8rem);max-width:36rem;pointer-events:none}
.reels__info h3{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,4.6vw,3.9rem);line-height:1.02;letter-spacing:-.015em;color:var(--fg)}
.reels__info p{margin:.7rem 0 0;font-size:clamp(.85rem,1.2vw,1rem);line-height:1.55;color:var(--fg-dim);max-width:40ch}
.reels__info.swap{animation:reelswap .7s var(--ease)}
@keyframes reelswap{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.reels__watch{position:absolute;inset:0;z-index:4;margin:0;padding:0;border:0;background:none;cursor:pointer;color:inherit}
.reels__watch:focus-visible{outline:2px solid var(--acid);outline-offset:-4px;border-radius:var(--r)}
.reels__disc{position:absolute;left:var(--dx,84%);top:var(--dy,50%);width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;
  background:var(--acid);display:grid;place-items:center;pointer-events:none;
  transition:left .6s var(--ease),top .6s var(--ease),transform .3s var(--ease),width .3s,height .3s,margin .3s}
.reels__disc svg{width:28px;height:28px;fill:#0A0A0A;margin-left:3px}
.reels__disc::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--acid);animation:ping 2.8s var(--ease) infinite}
.reels__disc em{position:absolute;top:calc(100% + .7rem);left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:.8rem;font-weight:500;color:var(--fg);text-shadow:0 1px 12px rgba(0,0,0,.9)}
.reels__stage.is-pointer .reels__disc{transition:transform .3s var(--ease),width .3s,height .3s,margin .3s}
.reels__stage.is-pointer .reels__watch{cursor:none}
.reels__watch:active .reels__disc{transform:scale(.92)}
@media (hover:none),(pointer:coarse){
  .reels__disc{left:auto;right:1.1rem;top:auto;bottom:1.1rem;width:62px;height:62px;margin:0}
  .reels__disc svg{width:22px;height:22px}
  .reels__disc em{display:none}
}

/* rail */
.reels__rail{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.6rem);margin-top:clamp(1rem,2vw,1.6rem)}
.reel-card{display:block;text-align:left;font:inherit;color:var(--fg);background:none;border:0;padding:0;cursor:pointer;opacity:.55;transition:opacity .35s}
.reel-card:hover,.reel-card:focus-visible,.reel-card.is-active{opacity:1}
.reel-card:focus-visible{outline:2px solid var(--acid);outline-offset:6px;border-radius:4px}
.reel-card .bar{display:block;height:2px;background:var(--line);overflow:hidden}
.reel-card .bar i{display:block;height:100%;width:0;background:var(--acid)}
.reel-card.is-active .bar i{animation:reelfill var(--dur,14s) linear forwards}
.reels.is-paused .reel-card.is-active .bar i{animation-play-state:paused}
.reels.is-still .reel-card.is-active .bar i{animation:none;width:100%}
@keyframes reelfill{to{width:100%}}
.reel-card .row{display:flex;align-items:center;gap:.9rem;margin-top:.9rem}
.reel-card img{width:104px;height:58px;object-fit:cover;border-radius:6px;flex:none;background:#0A0A0A;display:block}
.reel-card .t{display:block;min-width:0}
.reel-card .t b{display:block;font-family:var(--serif);font-weight:700;font-size:1.05rem;line-height:1.2}
.reel-card .t small{display:block;margin-top:.25rem;font-size:.8rem;color:var(--muted)}
@media (max-width:760px){
  /* phones: show the whole 16:9 film, with the title underneath instead of over the picture */
  .reels__stage{aspect-ratio:auto;max-height:none;container-type:normal;overflow:visible;background:none;border:0;box-shadow:none;border-radius:0}
  .reels .reels__layers{position:relative;inset:auto;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#050505;border:1px solid var(--line)}
  .reels__layer .poster,.reels__layer video{object-fit:contain}
  .reels__layer iframe{left:0;top:0;width:100%;height:100%;transform:none}
  .reels__shade{display:none}
  .reels__info{position:static;max-width:none;padding-top:1.1rem}
  .reels__info h3{font-size:clamp(1.6rem,7vw,2rem)}
  .reels__info p{max-width:none;font-size:.9rem}
  .reels__watch{inset:auto;left:0;right:0;top:0;aspect-ratio:16/9;height:auto;border-radius:10px}
  .reels__disc{left:50%;top:50%;right:auto;bottom:auto;width:60px;height:60px;margin:-30px 0 0 -30px}
  .reels__live{top:.7rem;left:.7rem}
  .reels__rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin-right:calc(-1 * var(--gut,1.2rem));padding-right:var(--gut,1.2rem);scrollbar-width:none}
  .reels__rail::-webkit-scrollbar{display:none}
  .reel-card{flex:0 0 74%;scroll-snap-align:start}
  .reels__live{font-size:.72rem}
}

/* ===== Cinema player ===== */
html.lb-lock{overflow:hidden}
.lb{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.lb[hidden]{display:none}
.lb.is-open{opacity:1}
.lb__bg{position:absolute;inset:0;background:rgba(5,5,5,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lb__wrap{position:relative;width:min(94vw,calc((100dvh - 190px) * 16 / 9));min-width:min(94vw,320px)}
.lb__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.lb__title b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(1.15rem,2.4vw,1.7rem);line-height:1.1;color:var(--fg)}
.lb__title span{display:block;margin-top:.3rem;font-size:.82rem;color:var(--fg-dim)}
.lb__frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;box-shadow:0 40px 140px rgba(0,0,0,.7);transform:scale(.965);transition:transform .45s var(--ease)}
.lb.is-open .lb__frame{transform:none}
.lb__slot,.lb__slot video,.lb__slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:contain;background:#000}
.lb__shield{position:absolute;inset:0;z-index:2;border:0;background:none;cursor:pointer;padding:0}
.lb__shield::after{content:"";position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--acid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230A0A0A' d='M9 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat;opacity:0;transform:scale(.7);transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.lb.is-paused .lb__shield::after{opacity:1;transform:none}
.lb__bar{display:flex;align-items:center;gap:.35rem;margin-top:.8rem}
.lb__bar button,.lb__close{width:40px;height:40px;border-radius:50%;border:1px solid rgba(244,243,238,.16);background:transparent;display:grid;place-items:center;cursor:pointer;padding:0;flex:none;transition:background .25s,border-color .25s}
.lb__bar button svg,.lb__close svg{width:17px;height:17px;fill:var(--fg);transition:fill .25s}
.lb__bar button:hover,.lb__bar button:focus-visible,.lb__close:hover,.lb__close:focus-visible{background:var(--acid);border-color:var(--acid);outline:none}
.lb__bar button:hover svg,.lb__bar button:focus-visible svg,.lb__close:hover svg,.lb__close:focus-visible svg{fill:#0A0A0A}
.lb__seek{flex:1;min-width:0;margin:0 .7rem;height:20px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.lb__seek::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--acid) var(--p,0%),rgba(244,243,238,.18) var(--p,0%))}
.lb__seek::-moz-range-track{height:3px;border-radius:3px;background:rgba(244,243,238,.18)}
.lb__seek::-moz-range-progress{height:3px;border-radius:3px;background:var(--acid)}
.lb__seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--acid);margin-top:-5px;border:0}
.lb__seek::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--acid);border:0}
.lb__seek:focus-visible{outline:2px solid var(--acid);outline-offset:4px;border-radius:4px}
.lb__time{font-size:.8rem;color:var(--fg-dim);font-variant-numeric:tabular-nums;white-space:nowrap;margin-right:.5rem}
.lb:fullscreen .lb__wrap{width:min(96vw,calc((100vh - 170px) * 16 / 9))}
@media (max-width:560px){.lb__time{display:none}.lb__bar button{width:38px;height:38px}}
@media (prefers-reduced-motion:reduce){.reels__layer,.lb,.lb__frame{transition:none}.reels__info.swap{animation:none}.reels__disc::before,.reels__live i{animation:none}}
.reels__layers{position:absolute;inset:0}