/* ════════════════════════════════════════════════════════════
   SHOWCASE — Open the Door
   Siena-style: framed card, black gutter, next-film peek,
   lerp scroll + parallax bg.
   ════════════════════════════════════════════════════════════ */


/* ── Outer wrapper ───────────────────────────────────────── */

.showcase {
  position: relative;
  width: 100%;
}


/* ── Slide — scroll unit ─────────────────────────────────── */
/*
 * SLIDE_H = innerHeight − PEEK_PX (88)
 * No overflow:hidden here — next card must show through below.
 */
.showcase__slide {
  position: relative;
  width: 100%;
  /* height set by JS: innerHeight - 88 */
  flex-shrink: 0;
}


/* ── Card — the framed film screen ──────────────────────── */
/*
 * Left/right: 1.1rem gutters show the black body.
 * Top: clears the fixed header.
 * Bottom: flush — next card peeks naturally below.
 * border-radius + overflow:hidden clips the parallax bg.
 *
 * mask-image fades the very top and bottom edges of the card
 * into black — matches siena's [data-fade-y] trick.
 */
.showcase__card {
  position: absolute;
  top: clamp(5rem, 9.5vh, 7.5rem);
  left: 1.1rem;
  right: 1.1rem;
  bottom: 0;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 4%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 4%,
    black 90%,
    transparent 100%
  );
}


/* ── Background ──────────────────────────────────────────── */
/*
 * Extends 60% above + below the card height.
 * JS writes:  bg.style.transform = 'translateY(Npx)'
 * where N = -(scrollOffset × PARALLAX_RATIO)
 * At PARALLAX_RATIO=0.4 and 1 card of travel (innerHeight px),
 * max offset = 0.4 × innerHeight.  The 60% buffer = 0.6 × cardH ≈ 0.6 × innerHeight.
 * So there is always image to show — no edges exposed.
 */
.showcase__bg {
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: 0;
  right: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}


/* ── Vignette ────────────────────────────────────────────── */

.showcase__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to right,
      rgba(0,0,0,0.72) 0%,
      rgba(0,0,0,0.28) 36%,
      rgba(0,0,0,0.00) 62%
    ),
    linear-gradient(
      to top,
      rgba(0,0,0,0.88) 0%,
      rgba(0,0,0,0.00) 50%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.50) 0%,
      rgba(0,0,0,0.00) 30%
    );
}


/* ════════════════════════════════════════════════════════════
   AWARD — top left
   ════════════════════════════════════════════════════════════ */

.showcase__award {
  position: absolute;
  top: clamp(1.6rem, 3.5vh, 2.8rem);
  left: clamp(1.8rem, 3.2vw, 3.2rem);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.showcase__slide.is-active .showcase__award {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.7s ease 0.08s,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}

.showcase__award-year {
  display: block;
  font-size: clamp(0.76rem, 0.9vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  margin-bottom: 0.32rem;
}

.showcase__award-event {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.showcase__award-event span {
  display: block;
  font-size: clamp(0.48rem, 0.56vw, 0.62rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  line-height: 1.55;
}


/* ════════════════════════════════════════════════════════════
   REVIEWS — right column (siena style)
   ════════════════════════════════════════════════════════════ */

.showcase__reviews {
  position: absolute;
  right: clamp(1.8rem, 3.5vw, 4rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  text-align: center;
  max-width: 140px;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.showcase__slide.is-active .showcase__reviews {
  opacity: 1;
  transition: opacity 0.8s ease 0.45s;
}

.showcase__review {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
}

.showcase__review-source {
  font-size: clamp(0.44rem, 0.50vw, 0.56rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

.showcase__review-stars {
  font-size: 0.54rem;
  letter-spacing: 0.10em;
  color: #fff;
  line-height: 1;
}

.showcase__review-quote {
  font-size: clamp(0.64rem, 0.74vw, 0.84rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.2;
  white-space: pre-line;
}


/* ════════════════════════════════════════════════════════════
   FILM INFO — bottom left
   ════════════════════════════════════════════════════════════ */

.showcase__info {
  position: absolute;
  bottom: clamp(1.8rem, 4vh, 3.8rem);
  left: clamp(1.8rem, 3.2vw, 3.2rem);
  max-width: min(520px, 50vw);
}

/* Category label */
.showcase__label {
  font-size: clamp(0.50rem, 0.58vw, 0.66rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0 0 0.65rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.showcase__slide.is-active .showcase__label {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.7s ease 0.15s,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}


/* Film title — siena uses staggered horizontal offset per line */
.showcase__title {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.8rem, 5.2vw, 6.4rem);
  font-weight: 700;
  font-style: normal;
  line-height: 0.86;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1.5rem;
}

.showcase__title-line {
  display: block;
  overflow: hidden;
  opacity: 0;
  transform: translateY(110%);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Each line slides up from below and settles at a unique horizontal offset —
   same as siena's split-line-move per-line transform trick */
.showcase__slide.is-active .showcase__title-line:nth-child(1) {
  opacity: 1;
  transform: translateY(0) translateX(0);
  transition:
    opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.20s,
    transform 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.20s;
}

.showcase__slide.is-active .showcase__title-line:nth-child(2) {
  opacity: 1;
  transform: translateY(0) translateX(5%);
  transition:
    opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.30s,
    transform 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.30s;
}

.showcase__slide.is-active .showcase__title-line:nth-child(3) {
  opacity: 1;
  transform: translateY(0) translateX(-3%);
  transition:
    opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.38s,
    transform 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.38s;
}

/* Inactive state — reset offsets so next activation animates cleanly */
.showcase__slide:not(.is-active) .showcase__title-line {
  opacity: 0;
  transform: translateY(110%);
  transition: opacity 0.18s ease, transform 0.18s ease;
}


/* Metadata table */
.showcase__table {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.showcase__slide.is-active .showcase__table {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.75s ease 0.48s,
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.48s;
}

.showcase__table-row {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.30rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.45);
}

.showcase__table-row:first-child {
  border-top: 1px solid rgba(255,255,255,0.45);
}

.showcase__table-key {
  flex-shrink: 0;
  min-width: 66px;
  font-size: clamp(0.44rem, 0.50vw, 0.58rem);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

.showcase__table-val {
  font-size: clamp(0.44rem, 0.50vw, 0.58rem);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
}


/* ── CTA — cinema ticket ─────────────────────────────────── */

.showcase__cta {
  position: absolute;
  bottom: clamp(1.8rem, 4vh, 3.8rem);
  right: clamp(1.8rem, 3.5vw, 4rem);
  display: inline-flex;
  align-items: stretch;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.75);
  background-color: transparent;
  --cb: rgba(255,255,255,0.75);
  background-image:
    linear-gradient(var(--cb), var(--cb)),
    linear-gradient(var(--cb), var(--cb)),
    linear-gradient(var(--cb), var(--cb)),
    linear-gradient(var(--cb), var(--cb)),
    linear-gradient(var(--cb), var(--cb)),
    linear-gradient(var(--cb), var(--cb)),
    linear-gradient(var(--cb), var(--cb)),
    linear-gradient(var(--cb), var(--cb));
  background-size:
    7px 1px, 1px 7px,
    7px 1px, 1px 7px,
    7px 1px, 1px 7px,
    7px 1px, 1px 7px;
  background-position:
    left 3px top 3px,    left 3px top 3px,
    right 3px top 3px,   right 3px top 3px,
    left 3px bottom 3px, left 3px bottom 3px,
    right 3px bottom 3px, right 3px bottom 3px;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.28s ease;
}

.showcase__slide.is-active .showcase__cta {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.7s ease 0.58s,
    transform 0.7s ease 0.58s,
    background-color 0.28s ease;
}

.showcase__cta:hover { background-color: rgba(255,255,255,0.10); }

.showcase__cta-label {
  display: flex;
  align-items: center;
  padding: 0.78rem 1.15rem;
  font-size: clamp(0.48rem, 0.54vw, 0.62rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.showcase__cta-stub {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  font-size: 0.84rem;
  border-left: 1.5px dashed rgba(255,255,255,0.75);
  position: relative;
}

.showcase__cta-stub::before,
.showcase__cta-stub::after {
  content: '';
  position: absolute;
  left: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
}

.showcase__cta-stub::before { top:    -5px; }
.showcase__cta-stub::after  { bottom: -5px; }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {

  /* Reviews overlap with the film title on narrow screens — hide them */
  .showcase__reviews {
    display: none;
  }

  /* Reduce title font size so it fits comfortably in the narrower column */
  .showcase__title {
    font-size: clamp(2rem, 7.5vw, 4rem);
    margin-bottom: 1rem;
  }

  /* Tighten bottom anchors */
  .showcase__info {
    bottom: clamp(1.2rem, 3vh, 2.5rem);
    left: 1.4rem;
    /* Leave room on the right for the CTA (≈ 9rem = label + stub + gutter) */
    max-width: min(520px, calc(100% - 9rem));
  }

  .showcase__cta {
    bottom: clamp(1.2rem, 3vh, 2.5rem);
    right: 1.4rem;
  }

  /* Slightly compact CTA so it doesn't squeeze the info column */
  .showcase__cta-label {
    padding: 0.68rem 0.9rem;
    font-size: 0.46rem;
  }

  .showcase__cta-stub {
    width: 34px;
  }

  /* Award — tighter position */
  .showcase__award {
    top: clamp(1.2rem, 2.5vh, 2rem);
    left: 1.4rem;
  }

}