.cinema-section{position:relative;overflow:hidden;background:#050505;border-top:1px solid #202020;color:#fff}
.cinema-section:before{content:"CINEMA";position:absolute;right:-.04em;top:.14em;color:rgba(255,255,255,.018);font:700 clamp(130px,24vw,420px)/.8 Syne,Arial,sans-serif;letter-spacing:-.09em;pointer-events:none}
.cinema-head{position:relative;display:grid;grid-template-columns:.45fr 1.55fr;gap:7vw;align-items:start;margin-bottom:clamp(65px,9vw,140px)}
.cinema-head .section-index{margin-top:11px}
.cinema-kicker{margin:0 0 25px;color:#676767;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.2em}
.cinema-head h2{font-size:clamp(54px,8vw,126px);line-height:.84;text-transform:uppercase}
.cinema-head h2 em{color:var(--orange)}
.cinema-intro{max-width:660px;margin:38px 0 0;color:#8a8a8a;font-size:16px;line-height:1.75}
.cinema-films{position:relative;display:flex;flex-direction:column;gap:clamp(55px,8vw,120px)}
.cinema-film{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;overflow:hidden;border:0;appearance:none;background:#121212;color:#fff;font:inherit;text-align:left;cursor:pointer;isolation:isolate}
.cinema-film img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .55s ease}
.cinema-shade{position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 15%,rgba(0,0,0,.18) 48%,rgba(0,0,0,.92) 100%),linear-gradient(90deg,rgba(0,0,0,.35),transparent 52%);transition:background .5s}
.cinema-film:after{content:"";position:absolute;z-index:3;inset:0;border:1px solid rgba(255,255,255,.18);pointer-events:none;transition:border-color .4s}
.cinema-meta{position:absolute;z-index:2;left:clamp(22px,4vw,62px);right:clamp(22px,4vw,62px);bottom:clamp(24px,4vw,58px);display:grid;grid-template-columns:1fr auto;gap:12px 40px;align-items:end;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.cinema-meta small{grid-column:1/-1;color:var(--orange);font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.cinema-meta strong{font:650 clamp(28px,4.5vw,72px)/.95 Syne,Arial,sans-serif;letter-spacing:-.05em}
.cinema-meta em{align-self:end;padding-bottom:7px;color:#c3c3c3;font-size:9px;font-style:normal;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.cinema-play{position:absolute;z-index:2;right:clamp(20px,3vw,45px);top:clamp(20px,3vw,45px);display:grid;place-items:center;width:clamp(52px,6vw,82px);height:clamp(52px,6vw,82px);border:1px solid rgba(255,255,255,.65);border-radius:50%;font-size:13px;transition:transform .45s cubic-bezier(.16,1,.3,1),background .35s,border-color .35s}
.cinema-film:hover img{transform:scale(1.045);filter:brightness(.72) saturate(.92)}
.cinema-film:hover:after{border-color:rgba(242,122,0,.75)}
.cinema-film:hover .cinema-play{transform:scale(1.12) rotate(8deg);border-color:var(--orange);background:var(--orange)}
.cinema-film:hover .cinema-meta{transform:translateY(-8px)}
.cinema-film:focus-visible{outline:2px solid var(--orange);outline-offset:6px}
.cinema-foot{position:relative;display:flex;justify-content:space-between;gap:28px;margin-top:28px;padding-top:19px;border-top:1px solid #222;color:#5e5e5e;font-size:8px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}

@media(max-width:900px){
  .cinema-head{grid-template-columns:1fr;gap:18px}
  .cinema-head .section-index{margin-top:0}
  .cinema-meta{grid-template-columns:1fr}
  .cinema-meta em{display:none}
}

@media(max-width:560px){
  .cinema-section:before{display:none}
  .cinema-head h2{font-size:15vw}
  .cinema-intro{margin-top:25px;font-size:14px}
  .cinema-film{aspect-ratio:16/10}
  .cinema-films{gap:38px}
  .cinema-meta strong{font-size:clamp(24px,8vw,35px)}
  .cinema-play{width:48px;height:48px;font-size:10px}
  .cinema-foot{align-items:flex-start;flex-direction:column;gap:8px}
}

@media(prefers-reduced-motion:reduce){
  .cinema-film img,.cinema-meta,.cinema-play{transition:none}
  .cinema-film:hover img,.cinema-film:hover .cinema-meta,.cinema-film:hover .cinema-play{transform:none}
}