/* Clear polished surfaces. No color filter, geometry changes, or input capture. */
/* Keep the reel play-button styling off the full-image sheen layer. */
#filmsView .reel-card>div>span.film-gloss{inset:0;width:auto;height:auto;display:block;border-radius:inherit;background:linear-gradient(125deg,#fff2 0%,#fff0 23%,#fff0 69%,#ffffff0d 100%);font-size:inherit}
.film-video-surface{position:relative;isolation:isolate;border-radius:18px;min-width:0}
.film-gloss-surface{position:relative}
.film-gloss{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;overflow:hidden;
 background:linear-gradient(125deg,#fff2 0%,#fff0 23%,#fff0 69%,#ffffff0d 100%);
 box-shadow:inset 0 1px 0 #ffffff65,inset 1px 0 0 #ffffff1f,inset -1px -1px 0 #ffffff18;
 opacity:.65;transition:opacity .45s ease}
.film-gloss::before{content:"";position:absolute;inset:0;border-radius:inherit;
 background:radial-gradient(ellipse at var(--gloss-x,28%) var(--gloss-y,15%),#ffffff32 0%,#ffffff0d 25%,transparent 60%);
 opacity:.4;transition:opacity .45s ease}
.film-gloss::after{content:"";position:absolute;inset:0;border-radius:inherit;
 background:linear-gradient(115deg,transparent 18%,#ffffff08 35%,#ffffff38 46%,#ffffff0a 55%,transparent 72%);
 transform:translateX(-125%);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
/* Replace the earlier one-off sweep rather than stacking highlights. */
#filmsView.films-cinema :is(.collection-poster,.filmmaking-poster,.reel-card>div).film-gloss-surface::after{content:none}
.film-card .film-play,.film-card .film-label{z-index:3}
.film-video-surface .film-gloss{bottom:54px;border-radius:18px 18px 0 0;mask-image:linear-gradient(#000 65%,transparent);-webkit-mask-image:linear-gradient(#000 65%,transparent)}
.film-video-surface.gloss-playing .film-gloss{opacity:0}
@media(hover:hover) and (pointer:fine){
 .film-gloss-surface:is(:hover,:focus-within)>.film-gloss{opacity:1}
 .film-gloss-surface:is(:hover,:focus-within)>.film-gloss::before{opacity:1}
 .film-gloss-surface:is(:hover,:focus-within)>.film-gloss::after{transform:translateX(125%)}
 .film-video-surface.gloss-playing:is(:hover,:focus-within)>.film-gloss{opacity:0}
}
@media(max-width:700px){.film-video-surface{border-radius:12px}.film-video-surface .film-gloss{border-radius:12px 12px 0 0}}
@media(prefers-reduced-motion:reduce){.film-gloss,.film-gloss::before{transition:none}.film-gloss::after{display:none}}
