/* BRASA — FROM THE SEA / THROUGH THE FIRE.
   A horizontal rail of seafood frames that drifts as the section passes, with
   the two halves of the phrase swapping as you scroll. */

.sea {
  position: relative;
  padding-block: clamp(5rem, 13vh, 10rem);
  overflow: hidden;
}

.sea__type {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  pointer-events: none;
}
.sea__phrase {
  font-family: var(--font-display);
  font-size: clamp(3rem, 13vw, 11rem);
  line-height: var(--lh-huge);
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.sea__phrase + .sea__phrase {
  margin-top: -.1em;
  justify-self: end;
  text-align: right;
  color: var(--ember);
}
.js .sea__phrase[data-phase] { opacity: .25; }
.js .sea__phrase.is-lit { opacity: 1; }

.sea__rail {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  width: max-content;
  margin-block: clamp(2rem, 5vw, 4rem);
  will-change: transform;
}
.sea__rail figure {
  flex: 0 0 clamp(240px, 34vw, 460px);
  margin: 0;
}
.sea__rail .frame { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
.sea__rail figcaption {
  margin-top: .7rem;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}
.sea__rail figure:nth-child(2n) { margin-top: clamp(1rem, 3vw, 3rem); }

.sea__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .sea__rail {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
    transform: none !important;
  }
  .sea__rail::-webkit-scrollbar { display: none; }
  .sea__rail figure { scroll-snap-align: start; margin-top: 0 !important; }
  /* Stacked on the left, the orange half used to be pulled up into the white
     one: a line-height below the cap height plus a negative margin, which on a
     phone meant THROUGH sat on top of THE SEA. Opened just enough to read as
     two phrases — still one block, no longer one smudge. */
  .sea__phrase + .sea__phrase { justify-self: start; text-align: left; margin-top: .2em; }
  .js .sea__phrase[data-phase] { opacity: 1; }
}