/* Capsule teardown.
   Split two-column block: the capsule holds the centre, the formula reads
   down the right as a list. Pins over the heaps were tried and abandoned —
   the heaps are small and crowded and the pins pointed at nothing.

   Three type sizes only. The stage sticks for the length of the track so
   scrolling scrubs the sequence in place. No GSAP pin: pin builds a spacer
   and nothing can scroll over pinned content. */

.capsule {
  --cap-ink: #f2ede3;
  --cap-dim: #8a8f99;
  --cap-rule: rgba(242, 237, 227, .16);
  --cap-pad: clamp(1.25rem, 5vw, 5rem);
  color: var(--cap-ink);
  /* Sampled off the clip itself rather than guessed: its corners measure
     #000707 top left through #0b1215 to #151b1f bottom right, and they do not
     drift over the 13 seconds. Matching it means the letterbox the phone
     layout leaves above and below the video is genuinely invisible. */
  background: linear-gradient(160deg, #000707 0%, #0a1114 55%, #151b1f 100%);
}

/* Scroll distance. This was cut to 280vh to get a paid-traffic visitor to the
   content sooner, and that was the wrong call for this page: at 280vh the
   whole teardown is over inside two screens, a scroll tick jumps several
   frames at once, and it reads as an intro animation you sat through rather
   than something you are doing.

   The reels this page is built from all hold the pin for a long time — the
   Aurelia tower climbs for screens, All Star Burgers takes the burger apart a
   layer at a time and puts it back together. The length IS the experience.

   600vh over 313 frames is roughly 15px of scroll per frame, so it unfolds
   under your hand instead of flicking past. The ingredient data-at values are
   fractions of progress, so they self-scale and need no touching. */
/* 800vh: the birth now lives inside this track too — its film owns the
   first fifth, the dissolve the next breath, and the teardown the rest. */
.capsule__track { height: 800vh; position: relative; }

.capsule__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: block;
}

/* ---- the video ------------------------------------------------------ */
/* The clip is 16:9 and so is a laptop, so `cover` full-bleeds it with a crop
   small enough that nothing of the capsule is lost. See assets/js/capsule-video.js. */

.capsule__figure {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.capsule__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the clip's own black, so the poster and the video agree while it loads */
  background: #000707;
}

/* Darken the two edges the HUD lives on, and the foot. Without it the headline
   sits on whatever the capsule happens to be doing at that frame, and the
   contrast changes as it opens. Sits under the copy, over the canvas. */
.capsule__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,7,14,.72) 0%, rgba(5,7,14,0) 34%,
                           rgba(5,7,14,0) 66%, rgba(5,7,14,.55) 100%),
    linear-gradient(0deg,  rgba(5,7,14,.80) 0%, rgba(5,7,14,0) 30%);
}

/* ---- the headline, column one -------------------------------------- */

.capsule__head {
  position: absolute;
  z-index: 3;
  left: var(--cap-pad);
  bottom: 12vh;
  width: min(30rem, 44vw);
  text-align: left;
  transition: opacity .5s ease, transform .5s ease;
}

/* The headline owns the screen while the capsule is still shut, and gets out
   of the way the moment it starts coming apart — one idea per screen, and from
   there the ingredient rows are the words. This used to be a phones-only rule,
   so on a laptop the headline sat over the falling powder for the whole
   teardown and two things competed for the same screen. */
.is-open .capsule__head { opacity: 0; transform: translateY(-1rem); }

.capsule__tag {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cap-dim);
  margin: 0 0 .75rem;
  white-space: nowrap;
}

.capsule__title {
  font-size: clamp(2.2rem, 5.2vw, 4.6rem);
  text-wrap: balance;
  /* Measured off the Shopify Renaissance page and recorded in tokens.css:
     700, line-height .9, tracking -.03em. The build was inheriting 400/1.08,
     which is most of the "system is right but it does not feel premium" gap.
     Cormorant ships as a variable font with a real 300-700 axis, so 700 is
     drawn, not synthesised. */
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.03em;
  margin: 0;
}

.capsule__sub {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--cap-dim);
  margin: 1rem 0 0;
}

/* ---- the formula, column three ------------------------------------- */

.capsule__list {
  position: absolute;
  z-index: 3;
  right: var(--cap-pad);
  top: 50%;
  transform: translateY(-50%);
  width: min(17rem, 34vw);
  margin: 0;
  list-style: none;
}

.cap-row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--cap-rule);
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .4s ease, transform .4s ease;
}

.cap-row.is-on { opacity: 1; transform: none; }

/* The one thing the reels do that a plain list does not: tie the words to the
   thing. The row that has just arrived brightens and puts a short leader line
   out towards the heap that landed with it, so the eye connects the two. The
   line fades as the next row takes over, which keeps one connection live at a
   time rather than eleven crossing each other. */
.cap-row__name,
.cap-row__mg { transition: color .4s ease; }

.cap-row.is-live .cap-row__name { color: var(--cap-ink); }
.cap-row.is-live .cap-row__mg { color: #c9a96e; }

.cap-row::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: clamp(2rem, 7vw, 6rem);
  height: 1px;
  background: linear-gradient(to left, var(--cap-ink), transparent);
  opacity: 0;
  transition: opacity .45s ease;
}

.cap-row.is-live::before { opacity: .5; }

.cap-row__name { font-size: .88rem; }

.cap-row__mg {
  font-size: .8rem;
  color: var(--cap-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.capsule__note {
  position: absolute;
  z-index: 3;
  right: var(--cap-pad);
  bottom: 12vh;
  width: min(17rem, 34vw);
  text-align: right;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--cap-dim);
  margin: 1.25rem 0 0;
  opacity: 0;
  transition: opacity .4s ease;
}

.capsule__note.is-on { opacity: 1; }

/* ---- phones -------------------------------------------------------- */
/* Not a narrower copy of the desktop version. The capsule goes full width
   and the formula collapses to one line under it that changes as it opens. */

@media (max-width: 860px) {
  /* Shorter than desktop but still long: a thumb covers more screens per
     stroke, so the same 600vh would feel like work. */
  .capsule__track { height: 460vh; }

  /* Flavia, from her phone: the pill was not visible. She was right —
     `contain` fits the whole 16:9 frame into a tall screen and the film
     becomes a thin strip with a thumbnail capsule. `cover` instead: the
     capsule is centred so it fills the screen, and the outer heaps the side
     crop loses are exactly what the one-line ingredient ticker narrates. */
  .capsule__video { object-fit: cover; }

  .capsule__head {
    left: 0; right: 0;
    bottom: auto;
    top: clamp(1.25rem, 5svh, 2.5rem);
    width: auto;
    max-width: none;
    padding-inline: 1rem;
    text-align: center;
    pointer-events: none;
  }

  .capsule__sub { display: none; }

  .capsule__list {
    left: 0; right: 0;
    top: auto;
    transform: none;
    bottom: calc(clamp(1.25rem, 5svh, 2.5rem) + 1.6rem);
    width: auto;
    padding-inline: 1rem;
    text-align: center;
    pointer-events: none;
  }

  .capsule__note {
    left: 0; right: 0;
    bottom: clamp(1.25rem, 5svh, 2.5rem);
    width: auto;
    padding-inline: 1rem;
    text-align: center;
  }

  /* one row at a time, in place */
  .cap-row {
    display: none;
    border: 0;
    justify-content: center;
    padding: 0;
  }

  .cap-row.is-live { display: flex; }
  .cap-row::before { display: none; }

  .capsule__note { margin-top: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .capsule__track { height: auto; }
  .capsule__stage { position: static; height: auto; padding: 3rem 0; }
  .cap-row, .capsule__note { opacity: 1; transform: none; }
  .cap-row { display: flex; }
}

/* hero rating, column one */
.capsule__rating {
  font-size: .8rem;
  color: var(--cap-dim);
  margin: 1.25rem 0 0;
}

.capsule__stars { color: #c9a96e; letter-spacing: .1em; margin-right: .4rem; }

@media (max-width: 860px) {
  .capsule__rating { display: none; }
}

/* the birth layer: the golden capsule born from the touch, one layer above
   the teardown film. Scroll scrubs it, then it dissolves to reveal the same
   capsule real, already holding still beneath. Phones play it once on
   arrival and let it melt away on its own. */
.capsule__birth{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  background:#050708;
  pointer-events:none;
}
.capsule__birth.is-done{ opacity:0; transition:opacity 1.2s ease }
/* while the birth plays, the words wait — one idea per screen */
.is-birth .capsule__head{ opacity:0; transform:translateY(-1rem) }

/* the seam constellations: hidden until the tail hold, desktop only */
.capsule__seam{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover;
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
}
@media (max-width:860px){ .capsule__seam{ display:none } }