/* Bottle film. Default state is a still photograph with its text below, for reduced motion and no JavaScript.
   .is-live (added by me-launch.js) makes it a sticky stage where scroll moves the camera. Rounded rem: 1rem = 10px. */
.me-film { position: relative; overflow: clip; background: var(--me-film-ground); color: #f4efe6; }
.me-film__stage { position: relative; display: grid; gap: 3.2rem; justify-items: center; padding: 8rem 1.6rem; text-align: center; }
.me-film__frame { width: min(56rem, 100%); overflow: hidden; }
.me-film__photo img { display: block; width: 100%; height: auto; }
.me-film__intro { max-width: 72rem; }
.me-film__eyebrow { margin: 0 0 1.2rem; color: inherit; opacity: 0.78; }
.me-film__title, .me-film__sub { margin: 0; color: inherit; }
.me-film__sub { margin-top: 1.6rem; opacity: 0.86; }
.me-film__shade { display: none; }
.me-film__beats { display: grid; gap: 2.4rem; width: 100%; max-width: 96rem; margin: 0; padding: 0; list-style: none; }
.me-film__label { margin: 0 0 0.8rem; font-size: 1.2rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.78; }
.me-film__notes, .me-film__closing { margin: 0; color: inherit; }
.me-film__line { margin: 0.8rem 0 0; font-size: 1.5rem; opacity: 0.78; }
.me-film__price { margin: 1.2rem 0 2rem; font-size: 1.7rem; }
.me-film .button--primary { --color-button: 244, 239, 230; --color-button-text: 23, 28, 26; }

@media screen and (min-width: 750px) {
  .me-film__beats { grid-template-columns: repeat(3, 1fr); }
}

/* Live: the height sets how long the shot lasts. Text waits hidden until GSAP takes over. */
.me-film.is-live [data-me-film-beat], .me-film.is-live [data-me-film-end] { visibility: hidden; }
.me-film.is-live { height: 340svh; }
/* Below the sticky header, so as the first section the opening line sits on the first screen. */
.me-film.is-live .me-film__stage { position: sticky; top: var(--header-height, 8.8rem); display: block; height: calc(100svh - var(--header-height, 8.8rem)); padding: 0; overflow: hidden; }
.me-film.is-live .me-film__frame { position: absolute; inset: 0; width: auto; }
.me-film.is-live .me-film__photo { position: absolute; top: 0; left: 50%; width: 80svh; height: 100%; margin-left: -40svh; }
.me-film.is-live .me-film__photo img { width: 100%; height: 100%; object-fit: cover; }
.me-film.is-live .me-film__shade { display: block; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--me-film-ground) 8%, transparent 46%); }
.me-film.is-live .me-film__intro { position: absolute; left: 0; right: 0; bottom: 4rem; z-index: 2; }
.me-film.is-live .me-film__beats { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 4rem; display: block; max-width: none; z-index: 2; }
.me-film.is-live .me-film__beat { position: absolute; left: 0; right: 0; bottom: 0; }
.me-film.is-live .me-film__end { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 4rem; z-index: 3; }

/* Phone: each beat carries its own ground, so it fades with the text and the bottle label never shows as a box behind the words. */
@media screen and (max-width: 989px) {
  .me-film.is-live .me-film__beat::before { content: ""; position: absolute; inset: -8rem -1.6rem -4rem; z-index: -1; background: linear-gradient(to top, var(--me-film-ground) 68%, transparent); }
}

@media screen and (min-width: 990px) {
  /* Soften the edges of the photograph into the background on wide screens. Eased stops: a straight ramp shows a line where it starts. */
  .me-film.is-live .me-film__photo { --me-film-feather: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.03) 7%, rgba(0, 0, 0, 0.12) 13%, rgba(0, 0, 0, 0.32) 20%, rgba(0, 0, 0, 0.62) 27%, rgba(0, 0, 0, 0.86) 34%, #000 42%, #000 70%, rgba(0, 0, 0, 0.8) 78%, rgba(0, 0, 0, 0.42) 86%, rgba(0, 0, 0, 0.1) 94%, transparent); -webkit-mask-image: var(--me-film-feather); mask-image: var(--me-film-feather); }
  .me-film.is-live .me-film__intro { top: 0; bottom: 0; left: 7vw; right: auto; display: flex; flex-direction: column; justify-content: center; width: 42rem; max-width: none; padding: 0; text-align: left; }
  .me-film.is-live .me-film__beats { top: 40%; bottom: auto; left: 7vw; right: auto; width: 26rem; }
  .me-film.is-live .me-film__beat { top: 0; bottom: auto; text-align: left; }
  .me-film.is-live .me-film__end { top: 0; bottom: 0; left: auto; right: 7vw; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 32rem; text-align: left; }
}