/* ================================================================
   SO MUCH PIĘKNIE - cinematic lyrics on the song page
   A viewport-high frame from the video sticks behind the text and
   changes per lyric section (lyrics.js sets .is-on); the text column
   sits on the left over a left-to-right night gradient. Lines are
   large Cormorant, the line near the centre of the screen is bright.
   ================================================================ */

.smp-cine { position: relative; background: var(--night); color: var(--snow); }
/* The sticky frame is a viewport tall with a negative bottom margin, so at the end of the section it would
   hang a full screen below it and cover "Inne kawałki" and the footer. Clip it to the section; neither
   clip-path nor overflow: clip creates a scroll container, so position: sticky keeps working. */
.smp-cine { clip-path: inset(0); overflow: clip; }
.smp-cine__bg { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; }
.site-somuchpieknie .smp-cine__img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  opacity: 0; transition: opacity .8s ease;
}
.site-somuchpieknie .smp-cine__img.is-on { opacity: 1; }
.smp-cine__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(11, 11, 16, .85), rgba(11, 11, 16, .82));
}
@media (min-width: 768px) {
  .smp-cine__bg::after {
    background:
      linear-gradient(90deg, rgba(11, 11, 16, .94) 0%, rgba(11, 11, 16, .82) 48%, rgba(11, 11, 16, .25) 100%),
      linear-gradient(to bottom, var(--night) 0%, rgba(11, 11, 16, 0) 14%);
  }
}

.smp-cine__grid { position: relative; z-index: 1; padding-top: 16vh; padding-bottom: 28vh; }
.smp-lyrics { max-width: 36rem; }
.smp-lyrics__title {
  margin: 0; font-family: var(--display); font-size: 2.75rem; font-weight: 600; line-height: 1.1;
  text-transform: uppercase; letter-spacing: var(--tracking); color: var(--snow);
}
.smp-lyrics__body { margin-top: 3rem; display: grid; gap: 3rem; }
.smp-lyrics__label {
  margin: 0 0 .75rem; font-family: var(--sans); font-size: .875rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em; color: var(--pink);
}
.smp-lyrics__list { margin: 0; padding: 0; list-style: none; }
.smp-lyrics__chorus {
  margin: 0; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--lipstick);
  background: linear-gradient(90deg, rgba(224, 18, 60, .16), transparent 85%);
}
.smp-lyrics__item {
  padding: .375rem 0; font-family: var(--display); font-size: 1.625rem; font-weight: 600; line-height: 1.3;
  color: rgba(245, 240, 234, .92); transition: color .3s, transform .3s;
}
@media (min-width: 768px) { .smp-lyrics__item { font-size: 1.875rem; } }
.smp-lyrics__chorus .smp-lyrics__item { font-weight: 700; }
/* With JS the lines dim and the one near the centre lights up; without it all lines stay readable. */
.smp-cine.is-live .smp-lyrics__item { color: rgba(245, 240, 234, .62); }
.smp-cine.is-live .smp-lyrics__item.is-on { color: #fff; transform: translateX(.5rem); }

@media (prefers-reduced-motion: reduce) {
  .site-somuchpieknie .smp-cine__img, .smp-lyrics__item { transition: none !important; }
  .smp-cine.is-live .smp-lyrics__item.is-on { transform: none; }
}