/* ==================== SPOT MOVIE ==================== */
.spotMovie{
  position:relative;
  z-index:3;
  padding:clamp(34px,4.8vw,68px) 5vw clamp(42px,5.5vw,76px);
  overflow:hidden;
  background-color:var(--surface-ink);
  background-image:var(--paper-ink-rich);
  background-size:1024px 1024px;
  border-top:1px solid rgba(244,232,0,.18);
}

.spotMovie__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:clamp(18px,2vw,28px);
  width:min(1180px,90vw);
  margin:0 auto;
}

.spotMovie__item{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(244,232,0,.48);
  background:#111;
  cursor:pointer;
  box-shadow:0 20px 50px rgba(0,0,0,.28);
}

.spotMovie__thumb{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease-out),filter .45s ease;
}

.spotMovie__item::before{
  position:absolute;
  inset:0;
  z-index:1;
  content:"";
  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.18));
  transition:background .4s ease;
}

.spotMovie__play{
  position:absolute;
  top:50%;
  left:50%;
  z-index:2;
  width:clamp(64px,7vw,92px);
  height:clamp(64px,7vw,92px);
  border-radius:50%;
  background:var(--yellow);
  transform:translate(-50%,-50%);
  box-shadow:0 10px 32px rgba(0,0,0,.34);
  transition:transform .5s var(--ease-out),background-color .3s ease;
}

.spotMovie__play::after{
  position:absolute;
  top:50%;
  left:53%;
  width:0;
  height:0;
  content:"";
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:16px solid var(--ink);
  transform:translate(-50%,-50%);
}

.spotMovie__item:hover .spotMovie__thumb{transform:scale(1.025);filter:brightness(.88);}
.spotMovie__item:hover .spotMovie__play{transform:translate(-50%,-50%) scale(1.08);}

/* ==================== MOVIE MODAL ==================== */
.movieModal{
  position:fixed;
  inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  padding:64px 4vw 32px;
  background:rgba(10,10,9,.92);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}

.movieModal.is-open{opacity:1;visibility:visible;}

.movieModal__dialog{
  position:relative;
  width:min(1180px,92vw);
  transform:translateY(18px) scale(.985);
  transition:transform .55s var(--ease-out);
}

.movieModal.is-open .movieModal__dialog{transform:none;}

.movieModal__frame{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#000;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}

.movieModal__frame iframe{display:block;width:100%;height:100%;border:0;}

.movieModal__close{
  position:absolute;
  right:0;
  bottom:calc(100% + 14px);
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(244,232,0,.65);
  background:var(--surface-black);
  cursor:pointer;
}

.movieModal__close::before,
.movieModal__close::after{
  position:absolute;
  top:50%;
  left:50%;
  width:22px;
  height:2px;
  content:"";
  background:var(--yellow);
}

.movieModal__close::before{transform:translate(-50%,-50%) rotate(45deg);}
.movieModal__close::after{transform:translate(-50%,-50%) rotate(-45deg);}

body.is-movie-open{overflow:hidden;}

@media(max-width:800px){
  .spotMovie{padding:28px 16px 38px;}
  .spotMovie__grid{width:100%;}
  .spotMovie__play{width:58px;height:58px;}
  .spotMovie__play::after{border-top-width:8px;border-bottom-width:8px;border-left-width:13px;}
  .movieModal{padding:58px 12px 24px;}
  .movieModal__dialog{width:100%;}
  .movieModal__close{right:0;bottom:calc(100% + 10px);width:38px;height:38px;}
}