/* ==========================================================================
   BIKA BAKERY — scroll film (replaces the 3D hero)
   The section is tall; inside it a sticky screen shows 5 keyframes
   (assets/film/01–05.webp). Scrolling drives a slow push-in and a
   cross-dissolve from one frame to the next, with one caption per stage.
   To swap in real video frames later, only js/film.js FRAMES changes.
   ========================================================================== */

.film {
  position: relative;
  height: 520vh;
  background: var(--plum);
  color: var(--on-dark);
}

.film__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* Frames */
.film__frames { position: absolute; inset: 0; }
.film__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  opacity: 0;
  will-change: opacity, transform;
  transform-origin: 50% 58%;
}
.film__frame:first-child { opacity: 1; }

/* Shade: dark at the bottom-left where captions sit, light elsewhere */
.film__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(28,13,21,.78) 0%, rgba(28,13,21,.35) 38%, rgba(28,13,21,0) 62%),
    linear-gradient(0deg, rgba(28,13,21,.7) 0%, rgba(28,13,21,0) 38%);
}

/* Captions */
.film__caps { position: absolute; inset: 0; pointer-events: none; }
.film__cap {
  position: absolute;
  left: clamp(20px, 5vw, 80px);
  bottom: clamp(88px, 14vh, 150px);
  max-width: min(26vw, 460px);
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
.film__cap.is-live { pointer-events: auto; }
.film__cap:first-child { opacity: 1; transform: none; }

.film__eyebrow {
  margin: 0 0 14px;
  font: 600 var(--t-micro, .72rem)/1.2 var(--f-ui);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--pink);
}
.film__num { color: var(--gold); margin-right: .6em; }

.film__title {
  margin: 0 0 16px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--on-dark);
}
.film__title em { font-style: italic; color: var(--pink); }

.film__text {
  margin: 0;
  font: 400 clamp(1rem, 1.3vw, 1.15rem)/1.55 var(--f-ui);
  color: var(--on-dark-soft);
  max-width: 44ch;
}
.film__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Giant BIKA, revealed on the last frame */
.film__word {
  position: absolute; left: 50%; top: 7%;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--f-didone);
  font-weight: 400;
  font-size: clamp(5rem, 19vw, 19rem);
  line-height: .9;
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(253,154,183,.55);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Progress rail */
.film__rail {
  position: absolute;
  right: clamp(16px, 3vw, 40px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.film__rail li {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(251,239,242,.3);
  transition: background .3s, transform .3s;
}
.film__rail li.is-on { background: var(--pink); transform: scale(1.5); }

/* Scroll hint */
.film__hint {
  position: absolute; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: 600 .68rem/1 var(--f-ui);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-dark-soft);
}
.film__hint i {
  display: block; width: 1px; height: 34px;
  background: linear-gradient(var(--pink), transparent);
  animation: film-hint 1.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes film-hint {
  0% { transform: scaleY(0); opacity: 1; }
  70% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* Phones: frames sit in a 4:5 window at the top so the cake isn't cropped,
   captions sit below on plum */
@media (max-width: 699px) {
  .film { height: 480vh; }
  .film__frames {
    inset: auto 0 auto 0;
    top: 64px;
    height: min(125vw, 62svh);
  }
  .film__frames::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
    background: linear-gradient(0deg, var(--plum), rgba(28,13,21,0));
  }
  .film__shade { display: none; }
  .film__cap { left: 20px; right: 20px; bottom: 64px; max-width: none; }
  .film__title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .film__word { top: calc(64px + min(125vw, 62svh) - 18vw); font-size: 24vw; }
  .film__rail { top: auto; bottom: 28px; right: 50%; transform: translateX(50%); flex-direction: row; }
  .film__hint { display: none; }
}

/* Reduced motion: one still screen, finished cake, intro caption only */
.film--static { height: auto; }
.film--static .film__sticky { position: relative; height: 100svh; min-height: 560px; }
.film--static .film__frame { opacity: 0 !important; transform: none !important; }
.film--static .film__frame[data-i="3"] { opacity: 1 !important; }
.film--static .film__cap { display: none; }
.film--static .film__cap:first-child { display: block; opacity: 1 !important; transform: none !important; }
.film--static .film__rail, .film--static .film__hint, .film--static .film__word { display: none; }

/* Tablets: a bit more room for captions */
@media (min-width: 700px) and (max-width: 1100px) {
  .film__cap { max-width: 34vw; }
}