/* ==========================================================================
   PULSE — the chapters between the two interactive systems.

   These are the still parts. The brief's rhythm rule is that stillness is part
   of the music, so nothing in this file animates on scroll except one thing per
   chapter, and each of those happens once:

     LIVE    the photograph opens out of a horizontal frequency band
     TURN    one hard cut from sunset to night, with a single pale flash
     SOCIAL  one phrase replaces another on one beat
     PEAK    three words arrive, 220ms apart, over a photograph left alone
   ========================================================================== */

/* ------------------------------------------------------------------ live --- */
.live { padding-block: var(--stack); }
.live .lead { margin-bottom: clamp(2.4rem, 6vw, 4.5rem); }
.band__fig { position: relative; z-index: 0; }

/* ------------------------------------------------------------------ turn --- */
.turn { padding-block: var(--stack); }
.turn__stack {
  position: relative;
  width: min(92vw, 1140px);
  margin: clamp(2.4rem, 6vw, 4rem) auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.turn__fig {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
/* The swap is a CUT: the night frame is either there or it is not. No
   cross-fade, no slider handle, no before/after drag — the brief rules all
   three out, and a hard edit is the whole point of the chapter. */
.turn__fig--b { opacity: 0; }
.turn.is-night .turn__fig--b { opacity: 1; }

.turn__label {
  position: absolute;
  z-index: 4;
  left: clamp(0.9rem, 2vw, 1.6rem);
  bottom: clamp(0.9rem, 2vw, 1.6rem);
  padding: 0.5rem 0.9rem;
  background: color-mix(in srgb, var(--night) 72%, transparent);
  color: var(--bone);
  letter-spacing: 0.2em;
}
.turn .lead--small { margin-top: 1.4rem; }

/* ---------------------------------------------------------------- social --- */
.social {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.6rem, 5vw, 4rem);
  width: min(100% - var(--gut) * 2, var(--wrap));
  margin-inline: auto;
  padding-block: var(--stack);
}
.social__fig { width: 100%; }
.social__copy { position: relative; }

/* Both phrases occupy the same box. The second is stacked on the first and
   they trade places on ONE beat — the brief is explicit that this must not be
   a per-word animation, so there is nothing here but two opacities. */
.social__phrase { transition: opacity var(--cut); }
.social__phrase--second {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: 0;
}
.social__copy .eyebrow { color: var(--glow); }
.social.is-second .social__phrase--first  { opacity: 0; }
.social.is-second .social__phrase--second { opacity: 1; }

@media (max-width: 899px) {
  .social { grid-template-columns: 1fr; }
  .social__fig { width: 100%; }
}

/* ------------------------------------------------------------------ peak --- */
/* The visual peak. Nearly full screen, almost no interface: three words and a
   photograph that is allowed to be the whole thing. */
.peak {
  position: relative;
  min-height: 92svh;
  min-height: calc(var(--vh, 1vh) * 92);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.peak::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--bg) 0%, transparent 16%, transparent 78%, var(--bg) 100%);
}
.peak__words {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.2rem, 6vw, 5rem);
  padding-inline: var(--gut);
}
.peak__word {
  font-family: var(--display);
  font-size: clamp(1.7rem, 6vw, 4.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 2px 40px color-mix(in srgb, var(--night) 70%, transparent);
}
/* the words arrive by cover, like everything else that arrives here */
.js .peak__word {
  position: relative;
  overflow: hidden;
  padding-bottom: 0.06em;
}
.js .peak__word::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--night) 60%, transparent);
  transform: translateY(0);
  transition: transform 480ms cubic-bezier(0.76, 0, 0.14, 1);
  transition-delay: var(--delay, 0ms);
}
.js .peak__word.is-in::after { transform: translateY(-101%); }
@media (prefers-reduced-motion: reduce) {
  .js .peak__word::after { display: none; }
}