/* Cinema layer: artwork from your own library (hero, poster rails, wall, ambient backdrop) and the motion that goes with it. */
html.cn-js .rv{opacity:0;transform:translateY(22px)}
html.cn-js .rv.in{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.pgin{animation:cnpg .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes cnpg{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cnimg{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.pw img,.card>img,.cn-pw img,.npi img,.cn-thumbs img{animation:cnimg .7s ease both}

/* ambient backdrop behind the whole app */
#amb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#amb i{position:absolute;inset:-10%;background-size:cover;background-position:center;filter:blur(54px) saturate(1.5);opacity:0;transform:scale(1.2);transition:opacity 2.6s ease}
#amb i.on{opacity:.36}
:root[data-theme=light] #amb i.on{opacity:.2}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) #amb i.on{opacity:.2}}
#amb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,var(--bg) 100%)}

/* hero billboard */
.cn-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:34px;min-height:clamp(400px,44vw,560px);margin-bottom:26px;color:#fff;background:#0b0b16;box-shadow:0 34px 70px -34px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.1);display:flex}
.cn-bg{position:absolute;inset:-3%;z-index:-3;transition:transform .7s ease-out}
.cn-sl{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.3s ease}
.cn-sl.on{opacity:1;animation:cnkb 18s ease-out both}
.cn-sl:nth-child(even).on{animation-name:cnkb2}
@keyframes cnkb{from{transform:scale(1.03)}to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}
@keyframes cnkb2{from{transform:scale(1.14) translate3d(1.5%,0,0)}to{transform:scale(1.03)}}
.cn-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(6,6,16,.92) 0%,rgba(6,6,16,.6) 36%,rgba(6,6,16,.08) 74%),linear-gradient(0deg,rgba(6,6,16,.9) 0%,transparent 52%)}
.cn-body{position:relative;padding:clamp(22px,4vw,52px);max-width:680px;display:flex;flex-direction:column;gap:14px;justify-content:flex-end;min-height:inherit;width:100%}
.cn-body h2{margin:0;font-size:clamp(36px,6.4vw,74px);line-height:.98;letter-spacing:-.05em;font-weight:820;text-wrap:balance;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.cn-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:rgba(255,255,255,.86)}
.cn-meta .cn-k{padding:3px 11px;border-radius:99px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:650}
.cn-meta .cn-r{color:#ffd166;font-weight:700}
.cn-body p{margin:0;font-size:clamp(14.5px,1.5vw,17px);line-height:1.55;color:rgba(255,255,255,.88);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:56ch}
.cn-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.cn-act button{border:0;border-radius:99px;padding:11px 22px;font-weight:700;background:rgba(255,255,255,.16);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cn-act button:hover{background:rgba(255,255,255,.28)}
.cn-act button.p{background:#fff;color:#0b0b16}.cn-act button.p:hover{background:#ffe9b8}
.cn-in>*{animation:cnup .8s cubic-bezier(.2,.8,.2,1) both}
.cn-in>*:nth-child(2){animation-delay:.07s}.cn-in>*:nth-child(3){animation-delay:.14s}.cn-in>*:nth-child(4){animation-delay:.21s}
@keyframes cnup{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.cn-thumbs{position:absolute;right:clamp(16px,3vw,36px);bottom:clamp(18px,3vw,38px);display:flex;gap:10px;align-items:flex-end}
.cn-thumbs button{position:relative;width:64px;aspect-ratio:2/3;padding:0;border-radius:13px;overflow:hidden;border:2px solid rgba(255,255,255,.25);background:#1b1b30;opacity:.62;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s,border-color .3s}
.cn-thumbs button:hover{opacity:.95;transform:translateY(-4px)}
.cn-thumbs button.on{opacity:1;transform:translateY(-10px) scale(1.08);border-color:#fff;box-shadow:0 14px 28px -10px rgba(0,0,0,.7)}
.cn-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.cn-ring{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent)}
.cn-thumbs button.on .cn-ring{animation:cnring var(--dur,9s) linear forwards}
.cn-hero.hold .cn-ring{animation-play-state:paused}
@keyframes cnring{to{width:100%}}
@media(max-width:760px){.cn-hero{border-radius:26px;min-height:440px;flex-direction:column}.cn-thumbs{position:static;padding:0 22px 20px;justify-content:flex-start}.cn-thumbs button{width:42px;border-radius:10px}.cn-body{padding-bottom:12px}.cn-body h2{font-size:clamp(32px,10vw,46px)}}

/* poster rails */
.cn-rh{display:flex;align-items:center;gap:10px}.cn-rh h2{flex:1;margin:0}
.cn-arrows{display:flex;gap:6px}.cn-arrows button{width:34px;height:34px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:20px;line-height:1}
.cn-rs{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:14px 6px 22px;margin:0 -6px;scrollbar-width:none}
.cn-rs::-webkit-scrollbar{display:none}
.cn-card{flex:none;scroll-snap-align:start;width:clamp(128px,14vw,172px);padding:0;border:0;background:none;color:inherit;text-align:left;display:block;transform:perspective(760px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cn-card:hover:not(:disabled){background:none}
.rv.in .cn-card{animation:cnup .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.cn-pw{position:relative;display:block;aspect-ratio:2/3;border-radius:20px;overflow:hidden;background:var(--s2);box-shadow:0 18px 34px -16px rgba(0,0,0,.75);transition:box-shadow .3s}
.cn-card:hover .cn-pw,.cn-card:focus-visible .cn-pw{box-shadow:0 0 0 2px var(--accent),0 26px 44px -16px rgba(0,0,0,.85)}
.cn-pw img{width:100%;height:100%;object-fit:cover;display:block}
.cn-pw::after,.card[data-v]::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.34),transparent 55%);opacity:0;transition:opacity .3s}
.cn-card:hover .cn-pw::after,.card[data-v]:hover::after{opacity:1}
.cn-badge{position:absolute;top:10px;left:10px;padding:3px 9px;border-radius:99px;font-size:12.5px;font-weight:700;color:#ffd166;background:rgba(8,8,18,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cn-ov{position:absolute;inset:auto 0 0;padding:44px 12px 12px;color:#fff;background:linear-gradient(0deg,rgba(4,4,12,.92),transparent);transform:translateY(38%);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
.cn-ov small{display:block;font-size:12.5px;opacity:.85;margin-top:2px}
.cn-card:hover .cn-ov,.cn-card:focus-visible .cn-ov{transform:none;opacity:1}
.cn-t{display:block;margin-top:10px;font-size:14px;font-weight:650;line-height:1.3;padding:0 2px}
@media(hover:none){.cn-ov{display:none}}

/* poster ticker across the top */
.cn-tk{display:flex;align-items:center;gap:18px;margin:0 0 18px;padding:14px 16px 14px 22px;border-radius:28px;background:var(--glass,var(--s1));border:1px solid var(--line);overflow:hidden}
.cn-tkh{flex:none;display:grid;grid-template-columns:auto auto;gap:0 7px;align-items:baseline;font-size:14px;color:var(--mute)}
.cn-tkh .cn-n{font-size:32px;font-weight:800;letter-spacing:-.04em;color:var(--text);text-align:right;line-height:1.1}
.cn-tkw{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cn-tkr{display:flex;gap:12px;width:max-content;animation:cnmq 80s linear infinite}
.cn-tkw:hover .cn-tkr{animation-play-state:paused}
@keyframes cnmq{to{transform:translateX(-50%)}}
.cn-tt{flex:none;width:84px;aspect-ratio:2/3;padding:0;border:0;border-radius:13px;overflow:hidden;background:var(--s2);box-shadow:0 8px 16px -8px rgba(0,0,0,.7);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.cn-tt:hover{transform:translateY(-4px) scale(1.12);box-shadow:0 0 0 2px var(--accent),0 14px 24px -10px rgba(0,0,0,.8);position:relative;z-index:2}
.cn-tt img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:600px){.cn-tkh{display:none}.cn-tk{padding:12px}.cn-tt{width:72px}}

/* library grid cards and detail banner */
.card[data-v]{position:relative;transform:perspective(760px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.card[data-v]:hover{box-shadow:0 22px 44px -18px rgba(0,0,0,.8)}
.card .cn-star{position:absolute;top:10px;left:10px;padding:2px 9px;border-radius:99px;font-size:12.5px;font-weight:700;color:#ffd166;background:rgba(8,8,18,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2}
.dbd{flex-basis:100%;height:clamp(130px,26vw,210px);border-radius:18px;background-size:cover;background-position:center;position:relative;overflow:hidden;animation:cnimg .8s ease both}
.dbd::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--s1),transparent 70%)}

@media(prefers-reduced-motion:reduce){
  .cn-sl.on,.cn-in>*,.pgin,.pw img,.card>img,.cn-pw img,.rv.in .cn-card,.dbd{animation:none}
  html.cn-js .rv{opacity:1;transform:none}
  .cn-tkr{animation:none}.cn-tkw{overflow-x:auto}
  .cn-thumbs button.on .cn-ring{animation:none;width:100%}
  #amb i{transition:none}
}