/* Start screen: the logo and tagline over the product line-up on the beige backdrop, then the title, intro and Start button. */

.screen-start {
  display: flex;
  flex-direction: column;
}

.start-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  height: clamp(300px, 46svh, 480px);
  padding: calc(var(--safe-top) + 28px) var(--gutter) 0;
  background: var(--color-backdrop);
  overflow: hidden;
}

/* The logo, large and centred, with the tagline under it */
.brand-lockup {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  align-self: center;
  text-align: center;
}

.brand-lockup .logo { width: min(240px, 64vw); }
.brand-lockup .logo-text { font-size: var(--step-4); }
.brand-lockup .tagline { color: var(--color-ink); }

/*
  The line-up: the products straight on the backdrop (every photo is a cut-out), standing on one
  line, evenly spaced and centred as a group. .lineup is the space left under the logo.
  Each .lineup-item is a pack: start.js sets its --height (the tallest is 1) and shape, and
  --count and --width (the group's width in units of the tallest's height). The packs are then
  as large as the space's height allows, or its width, whichever is smaller.
  A splash or bubbles round a pack show through .lineup-window: the space's height, and half
  the gap either side, faded out towards its edges so they never reach a neighbour.
*/
.lineup {
  --gap: 7; /* % of the space's width between neighbours */
  container-type: size;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--gap) * 1%);
  margin: 20px 0 24px;
}

.lineup-item {
  --pack: min(
    calc(var(--height) * 100cqh),
    calc(var(--height) * (100cqw - (var(--count) - 1) * var(--gap) * 1cqw) / var(--width))
  );
  --reach: calc(var(--gap) * 0.5cqw);
  position: relative;
  flex: none;
  height: var(--pack);
}

.lineup-window {
  position: absolute;
  bottom: 0;
  left: calc(var(--reach) * -1);
  right: calc(var(--reach) * -1);
  height: 100cqh;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--reach), #000 calc(100% - var(--reach)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--reach), #000 calc(100% - var(--reach)), transparent);
}

/* start.js gives the photo's size and place in units of the pack's height */
.lineup-window img {
  position: absolute;
  max-width: none;
  width: calc(var(--pack) * var(--photo-w));
  height: auto;
  left: calc(var(--reach) - var(--pack) * var(--photo-x));
  bottom: calc(var(--pack) * var(--photo-y) * -1);
}

.start-copy {
  display: flex;
  flex-direction: column;
  padding: 28px var(--gutter) calc(var(--safe-bottom) + 28px);
}

.start-title {
  font: var(--display-weight) clamp(2.5rem, 10.6vw, 3.75rem) / 1.06 var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.start-intro {
  margin-top: 16px;
  font-size: var(--step-0);
  color: var(--color-ink);
  max-width: 34ch;
}

.start-copy .button { margin-top: 28px; }

.start-meta {
  margin-top: 14px;
  font: 500 var(--step--2) / 1.4 var(--font-text);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.start-copy .fine-print { margin-top: 20px; }

/* Desktop and tablet landscape: line-up on the left, words on the right */
@media (min-width: 900px) {
  .screen-start {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 100svh;
  }

  .start-stage {
    height: auto;
    min-height: 100svh;
    padding: calc(var(--safe-top) + 48px) 48px 0 max(48px, var(--safe-left));
  }

  .brand-lockup .logo { width: 300px; }

  .lineup { margin: 40px 0 56px; }

  .start-copy {
    justify-content: center;
    max-width: 520px;
    padding: 48px max(64px, var(--safe-right)) calc(var(--safe-bottom) + 48px) 64px;
  }

  .start-copy .button { width: auto; align-self: flex-start; min-width: 240px; }
}