/* ============================================================ films
   "See it in motion": one featured film with a silent loop, a grid of the
   section films, and a full-screen player. Motion starts quick, ends slow. */
.films{--glide:cubic-bezier(.16,.84,.3,1)}

.film-feature{position:relative;display:block;width:100%;max-width:1080px;margin:0 auto clamp(28px,4vw,48px);padding:0;border:0;cursor:pointer;
  border-radius:24px;overflow:hidden;background:#fff;box-shadow:var(--lift-lg);aspect-ratio:16/9;color:inherit;font:inherit;text-align:left;
  transition:transform 1s var(--glide),box-shadow 1s var(--glide)}
.film-feature:hover,.film-feature:focus-visible{transform:translateY(-6px);box-shadow:0 6px 14px rgba(28,45,95,.07),0 44px 90px -30px rgba(28,45,95,.34)}
.film-feature video,.film-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-feature .ff-shade{display:block;position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,rgba(255,255,255,.96),rgba(255,255,255,0))}
.film-feature .ff-copy{position:absolute;left:clamp(18px,3vw,36px);right:clamp(18px,3vw,36px);bottom:clamp(16px,2.6vw,30px);display:flex;align-items:center;gap:18px}
.film-feature .ff-copy b{display:block;font-size:clamp(19px,2.2vw,28px);font-weight:700;letter-spacing:-.01em}
.film-feature .ff-copy small{display:block;color:var(--ink-soft);font-size:clamp(13px,1.3vw,15.5px)}

.film-play{flex:none;display:grid;place-items:center;width:clamp(48px,5vw,64px);height:clamp(48px,5vw,64px);border-radius:50%;
  background:linear-gradient(135deg,var(--c,var(--c-blue)),var(--c2,var(--c-teal)));color:#fff;font-size:clamp(16px,1.6vw,20px);
  box-shadow:0 10px 26px -8px color-mix(in srgb,var(--c,#1E7FD0) 70%,transparent);transition:transform 1s var(--glide)}
.film-play::before{content:'';width:0;height:0;margin-left:4px;border-style:solid;border-width:.55em 0 .55em .9em;border-color:transparent transparent transparent #fff}
.film-feature:hover .film-play,.film-card:hover .film-play{transform:scale(1.08)}

.film-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(14px,1.8vw,22px);max-width:1080px;margin:0 auto}
.film-card{display:block;padding:0;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:var(--lift);transition:transform 1s var(--glide),box-shadow 1s var(--glide)}
.film-card:hover,.film-card:focus-visible{transform:translateY(-6px);box-shadow:var(--lift-lg)}
.film-card .fc-pic{display:block;position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 14%,#fff),color-mix(in srgb,var(--c2) 14%,#fff))}
.film-card .fc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-card .film-play{position:absolute;right:12px;bottom:12px;width:40px;height:40px;font-size:13px}
.film-card .fc-meta{display:block;padding:12px 16px 16px}
.film-card .fc-meta b{display:block;font-size:16px;font-weight:650;line-height:1.3}
.film-card .fc-meta small{display:block;margin-top:3px;color:var(--ink-soft);font-size:13.5px;line-height:1.45}
.film-card .fc-meta i{float:right;font-style:normal;color:var(--ink-faint);font-size:12px;margin-left:8px}
.films-note{margin:clamp(22px,3vw,34px) auto 0;max-width:62ch;text-align:center;color:var(--ink-faint);font-size:13px}

/* the player */
.film-player{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:clamp(12px,3vw,40px);
  background:rgba(20,31,58,.0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
  transition:background .8s var(--glide),backdrop-filter .8s var(--glide),-webkit-backdrop-filter .8s var(--glide)}
.film-player[hidden]{display:none}
.film-player.on{background:rgba(20,31,58,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.film-player .fp-box{position:relative;width:min(100%,calc((100vh - 120px) * 16 / 9),1400px);opacity:0;transform:translateY(18px) scale(.98);
  transition:opacity .8s var(--glide),transform 1s var(--glide)}
.film-player.on .fp-box{opacity:1;transform:none}
.film-player video{display:block;width:100%;aspect-ratio:16/9;border-radius:16px;background:#fff;box-shadow:0 40px 100px -30px rgba(0,0,0,.6)}
.film-player .fp-bar{display:flex;align-items:center;gap:12px;margin-top:12px;color:#fff}
.film-player .fp-bar b{font-size:16px;font-weight:600}
.film-player .fp-bar span{flex:1}
.film-player .fp-bar button{border:0;cursor:pointer;font:inherit;font-size:14px;color:#fff;background:rgba(255,255,255,.14);border-radius:999px;padding:8px 14px;
  transition:background .6s var(--glide)}
.film-player .fp-bar button:hover,.film-player .fp-bar button:focus-visible{background:rgba(255,255,255,.26)}

@media(max-width:640px){
  .film-feature{border-radius:18px}
  .film-feature .ff-shade{height:60%}
  .film-feature .ff-copy small{display:none}
  .film-player .fp-bar .fp-next{display:none}
  .film-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .film-card .fc-meta{padding:9px 11px 12px}
  .film-card .fc-meta b{font-size:14px}
  .film-card .fc-meta small,.film-card .fc-meta i{display:none}
  .film-card .film-play{width:32px;height:32px;right:8px;bottom:8px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .film-feature,.film-card,.film-play,.film-player,.film-player .fp-box{transition:none}
}