/* ================================================================
   SO MUCH PIĘKNIE - cinema mode (hero + song page video)
   data-cinema-host gets .is-cinema when the lite YouTube video is
   played (cinema.js): the copy (data-cinema-copy) slides out to the
   left, the video column grows to the container width (16:9, never
   taller than the viewport), the backdrop sinks towards night, a close
   button and a caption appear. ~450 ms ease-out; reduced motion =
   instant switch. Loaded last, after hero.css and song.css.
   ================================================================ */

:root { --cinema-time: .45s; --cinema-ease: cubic-bezier(.2, .7, .2, 1); }

/* Frame around the video: close button above, caption below */
.smp-cinema { position: relative; }
.smp-cinema__close {
  position: absolute; right: 0; bottom: calc(100% + .5rem); z-index: 3; display: inline-flex; align-items: center; gap: .5rem;
  min-width: 3rem; min-height: 3rem; padding: 0 1.25rem 0 1rem; border: 2px solid rgba(245, 240, 234, .5); border-radius: 999px;
  background: rgba(11, 11, 16, .75); color: var(--snow); font: 700 1.125rem/1 var(--sans); cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.smp-cinema__close:hover { border-color: var(--snow); background: rgba(245, 240, 234, .15); }
.smp-cinema__close[hidden] { display: none; }
.smp-cinema__caption {
  max-height: 0; margin: 0; overflow: hidden; opacity: 0; font-size: 1.125rem; color: rgba(245, 240, 234, .85);
  transition: max-height var(--cinema-time) var(--cinema-ease), margin var(--cinema-time) var(--cinema-ease), opacity .3s;
}
.smp-cinema__caption strong { margin-right: .5rem; font-family: var(--display); font-size: 1.5rem; font-weight: 600; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--snow); }
.is-cinema .smp-cinema__caption { max-height: 4rem; margin-top: 1rem; opacity: 1; transition-delay: 0s, 0s, .2s; }

/* The copy slides out */
[data-cinema-copy] { min-width: 0; transition: opacity .25s ease-out, transform var(--cinema-time) var(--cinema-ease), max-height var(--cinema-time) var(--cinema-ease); }
.is-cinema [data-cinema-copy] { opacity: 0; transform: translateX(-2.5rem); pointer-events: none; }

/* ---- Home hero ---- */
.smp-slide__grid { transition: grid-template-columns var(--cinema-time) var(--cinema-ease), column-gap var(--cinema-time) var(--cinema-ease), row-gap var(--cinema-time) var(--cinema-ease); }
.smp-slide__copy { overflow: hidden; max-height: 60rem; }
.smp-slide__media { justify-self: center; max-width: min(100%, calc((100svh - 15.5rem) * 16 / 9)); }
.smp-slide__shade::after { content: ""; position: absolute; inset: 0; background: var(--night); opacity: 0; transition: opacity var(--cinema-time) ease-out; }
.is-cinema .smp-slide__shade::after { opacity: .8; }
.smp-wave { transition: opacity var(--cinema-time) ease-out; }
.is-cinema .smp-wave { opacity: .35; }
[data-cinema-host].smp-slide { scroll-margin-top: 4rem; }
.is-cinema .smp-slide__grid { row-gap: 0; }
.is-cinema .smp-slide__copy { max-height: 0; }
@media (min-width: 768px) {
  .is-cinema .smp-slide__grid { grid-template-columns: 0fr 1fr; column-gap: 0; }
}
/* Room for the close button above the video, less below it (the slider controls are not shown here) */
.smp-slide__grid { transition-property: grid-template-columns, column-gap, row-gap, padding; }
.is-cinema .smp-slide__grid { padding-top: 4.5rem; padding-bottom: 3rem; }
/* Phones: the video goes edge to edge, the copy collapses */
@media (max-width: 767.98px) {
  .is-cinema .smp-slide__media { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
  .is-cinema .smp-video { border-radius: 0; }
  .is-cinema .smp-cinema__close { right: 1rem; }
  .is-cinema .smp-cinema__caption { padding: 0 1rem; }
}

/* ---- Song page header ---- */
.smp-release__grid { transition: grid-template-columns var(--cinema-time) var(--cinema-ease), gap var(--cinema-time) var(--cinema-ease); }
.smp-release__intro { overflow: hidden; max-height: 60rem; }
.smp-release__video { justify-self: center; width: 100%; }
/* Only in cinema mode is the video capped to fit the viewport; side by side it must fill its column
   so it keeps the cover's height. */
.smp-release.is-cinema .smp-release__video { max-width: min(100%, calc((100svh - 15.5rem) * 16 / 9)); }
.smp-release.is-cinema { scroll-margin-top: 4rem; }
.is-cinema .smp-release__grid { gap: 0; }
.is-cinema .smp-release__intro { max-height: 0; }
@media (min-width: 1024px) {
  .is-cinema .smp-release__grid { grid-template-columns: 0fr 1fr; }
}
@media (max-width: 767.98px) {
  .is-cinema .smp-release__video { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
  .is-cinema .smp-release__video .smp-video { border-radius: 0; }
  .is-cinema .smp-release__video .smp-cinema__close { right: 1rem; }
  .is-cinema .smp-release__video .smp-cinema__caption { padding: 0 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  [data-cinema-copy], .smp-slide__grid, .smp-release__grid, .smp-cinema__caption, .smp-slide__shade::after, .smp-wave { transition: none !important; }
}