/* Crowd section + scroll motion. Uses tokens from styles.css. */

/* ---------- crowd ---------- */
.crowd { background: var(--tide); padding: 0 0 clamp(5rem, 10vw, 8rem); overflow: hidden; overflow: clip; } /* clip, not hidden: hidden would stop the sticky photo */
.crowd > :not(.crowd__stage):not(.river):not(.reels) { max-width: var(--max); margin-left: auto; margin-right: auto; padding: 0 var(--gutter); }

/* The photo grows from a framed print to full-bleed as you scroll in */
.crowd__stage { position: relative; height: 160vh; }
.crowd__photo {
  position: sticky; top: 0; height: 100vh; margin: 0; overflow: hidden;
  clip-path: inset(calc((1 - var(--p, 0)) * 14vh) calc((1 - var(--p, 0)) * 22vw) round calc((1 - var(--p, 0)) * 24px));
}
.crowd__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(calc(1.18 - var(--p, 0) * .18)); }
.crowd__fill { display: none; }
@media (min-width: 900px) {
  /* the photo is portrait: keep it sharp in the middle, with a blurred copy filling the wide stage */
  .crowd__fill { display: block; position: absolute; inset: 0; filter: blur(36px) saturate(1.2) brightness(.55); }
  .crowd__photo .crowd__img { position: relative; object-fit: contain; }
}
.crowd__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,38,58,0) 40%, rgba(22,38,58,.85) 100%); }
.crowd__title {
  position: absolute; left: 0; right: 0; bottom: 9vh; z-index: 2;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  opacity: calc(var(--p, 0) * 1.6 - .4); transform: translateY(calc((1 - var(--p, 0)) * 40px));
}
.crowd__title .serif-xl { font-size: clamp(3.2rem, 10vw, 8.5rem); text-shadow: 0 4px 40px rgba(22,38,58,.6); }
.crowd__title p { max-width: 44ch; margin: 1rem 0 0; color: var(--mist); font-size: 1.1rem; }

/* counters */
.counts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; margin-top: clamp(1rem, 3vw, 2rem); position: relative; z-index: 3; }
.counts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid rgba(244,166,198,.5); }
.counts dd { margin: 0; font-weight: 850; font-variation-settings: "wdth" 125; font-size: clamp(1.8rem, 3.3vw, 3rem); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.counts dt { margin-top: .5rem; font-size: .9rem; color: var(--mist); max-width: 18ch; }

/* reels */
.reels-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: clamp(4rem, 8vw, 6rem); }
.reels-hint { margin: 0 0 0 auto; font-size: .9rem; color: var(--haze); }
.reels-nav { display: none; gap: .5rem; }
.reels-nav__b { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(221,229,232,.3); background: transparent; color: var(--dove); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: border-color .2s, background-color .2s; }
.reels-nav__b:hover { border-color: var(--blush); background: rgba(244,166,198,.14); }
.reels-nav__b:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .reels-nav { display: flex; } .reels-hint { display: none; } }
.reels {
  list-style: none; margin: 0; padding: .5rem var(--gutter) 1.5rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 24vw, 300px); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--dusk) transparent;
}
.reels { --edge: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); padding-inline: var(--edge); scroll-padding-inline: var(--edge); }
.reels li { scroll-snap-align: start; }
.reel, .reels iframe {
  position: relative; display: block; width: 100%; aspect-ratio: 9/16; padding: 0; border: 0; border-radius: 14px;
  overflow: hidden; background: var(--tide-2); color: var(--dove); text-align: left; cursor: pointer;
}
.reel img { width: 100%; height: 100%; object-fit: cover; animation: drift-zoom 14s ease-in-out infinite alternate; }
.reels li:nth-child(2n) .reel img { animation-delay: -5s; }
.reels li:nth-child(3n) .reel img { animation-delay: -9s; }
@keyframes drift-zoom { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.12) translateY(-2%); } }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,38,58,.35) 0%, rgba(22,38,58,0) 25%, rgba(22,38,58,0) 55%, rgba(22,38,58,.9) 100%); }
.reel__tag { position: absolute; top: 12px; left: 12px; z-index: 1; padding: .3rem .65rem; border-radius: 999px; background: rgba(22,38,58,.6); backdrop-filter: blur(6px); font-size: .78rem; }
.reel__cap { position: absolute; left: 14px; right: 14px; bottom: 16px; z-index: 1; font: italic 400 1.3rem/1.15 var(--serif); }
.reel::before {
  content: ""; position: absolute; left: 50%; top: 45%; z-index: 1; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: rgba(244,166,198,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2316263A' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat;
  transform: scale(.9); opacity: .9; transition: transform .25s, opacity .25s;
}
.reel:hover::before, .reel:focus-visible::before { transform: scale(1.05); opacity: 1; }

/* comment river */
.river { margin-top: clamp(3rem, 7vw, 5rem); display: grid; gap: 1rem; }
.river__row { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.river__track { display: flex; gap: .8rem; width: max-content; animation: drift 60s linear infinite; }
.river__row--rev .river__track { animation-direction: reverse; animation-duration: 70s; }
.river__row:hover .river__track { animation-play-state: paused; }
.river q {
  quotes: none; white-space: nowrap; padding: .7rem 1.2rem; border-radius: 999px 999px 999px 6px;
  background: rgba(250,250,247,.07); border: 1px solid rgba(221,229,232,.14); font-size: 1.05rem;
}
.river__row--rev q { border-radius: 999px 999px 6px 999px; background: rgba(244,166,198,.12); }
.river__src { max-width: var(--max); margin: .4rem auto 0; padding: 0 var(--gutter); font-size: .85rem; color: var(--haze); }

/* ---------- scroll motion ---------- */
/* hero wordmark lifts and dissolves into the sky as you leave */
.hero__inner { transform: translateY(calc(var(--hs, 0) * -18vh)); opacity: calc(1 - var(--hs, 0) * 1.3); }
.wordmark__main { filter: blur(calc(var(--hs, 0) * 14px)); }

/* headings rise like a sunrise: clipped from below */
.js-motion :where(.serif-xl:not(.crowd__title .serif-xl)) { clip-path: inset(0 0 100% 0); transform: translateY(.25em); transition: clip-path 1.1s cubic-bezier(.2,.8,.1,1), transform 1.1s cubic-bezier(.2,.8,.1,1); }
.js-motion :where(.serif-xl).is-in { clip-path: inset(0 0 -10% 0); transform: none; }

/* cards arrive in a soft stagger */
:where(.js-motion) :where(.discs li, .sets li, .gig) { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
:where(.js-motion) :where(.discs li, .sets li, .gig).is-in { opacity: 1; transform: none; }

/* release cover follows the pointer */
.release__cover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s cubic-bezier(.2,.8,.2,1); will-change: transform; }

/* gig rows: a blush tide washes in on hover */
.gig { position: relative; isolation: isolate; }
.gig::after { content: ""; position: absolute; inset: 0 -1rem; z-index: -1; background: linear-gradient(90deg, rgba(244,166,198,.14), rgba(244,166,198,0)); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.8,.2,1); border-radius: 8px; }
.gig:hover::after { transform: scaleX(1); }

@media (max-width: 900px) {
  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crowd__stage { height: 140vh; }
}
@media (max-width: 640px) {
  .reels { grid-auto-columns: 72vw; }
  .crowd__title .serif-xl { font-size: 3.4rem; }
  .crowd__title { bottom: calc(6vh + 72px); }
}
@media (prefers-reduced-motion: reduce) {
  .crowd__stage { height: auto; }
  .crowd__photo { position: relative; height: 80vh; clip-path: none; }
  .crowd__photo img { transform: none; }
  .crowd__title { opacity: 1; transform: none; }
  .counts { margin-top: 3rem; }
  .hero__inner, .wordmark__main { transform: none; opacity: 1; filter: none; }
  .js-motion .serif-xl, .js-motion .discs li, .js-motion .sets li, .js-motion .gig { clip-path: none; opacity: 1; transform: none; }
}

/* ---------- the journey: a timeline down a glowing line that fills as you scroll ---------- */
.journey { padding: clamp(5rem, 11vw, 9rem) var(--gutter); background: linear-gradient(180deg, var(--tide) 0%, #1a2c44 100%); }
.journey > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.journey__head .lead { margin-top: 1rem; color: var(--mist); }
.journey__list { position: relative; list-style: none; margin-top: clamp(3rem, 6vw, 5rem); margin-bottom: 0; padding: 0; display: grid; gap: clamp(2.4rem, 5vw, 3.8rem); }
.journey__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: rgba(221,229,232,.14); }
.journey__line span { position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--jp, 0)); background: linear-gradient(180deg, var(--blush), var(--dove)); box-shadow: 0 0 14px rgba(244,166,198,.8); }
.jt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 8vw, 7rem); align-items: center; }
.jt::before { /* the node on the line */
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--tide); border: 2px solid rgba(221,229,232,.4); transition: background-color .4s, border-color .4s, box-shadow .4s;
}
.jt.is-on::before { background: var(--blush); border-color: var(--blush); box-shadow: 0 0 0 6px rgba(244,166,198,.18), 0 0 20px rgba(244,166,198,.8); }
.jt__year { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -150%); font: 400 clamp(1.2rem, 2vw, 1.5rem)/1 var(--serif); color: var(--haze); white-space: nowrap; padding: .2rem .5rem; background: var(--tide); border-radius: 6px; }
.jt.is-on .jt__year { color: var(--blush); }
.jt__img { margin: 0; justify-self: end; width: min(100%, 320px); border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(0,0,0,.7); }
.jt__img img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter 1s; filter: saturate(.6) brightness(.8); transform: scale(1.06); }
.jt.is-on .jt__img img { filter: none; transform: none; }
.jt__img--type { aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(244,166,198,.25), transparent 65%), var(--tide-2); }
.jt__img--type span { font: italic 400 clamp(2.4rem, 5vw, 3.6rem)/1 var(--serif); color: var(--mist); }
.jt__text { max-width: 44ch; }
.jt__when { margin: 0 0 .3rem; font-size: .85rem; color: var(--haze); font-variant-numeric: tabular-nums; }
.jt__title { margin: 0 0 .6rem; font-weight: 750; font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-variation-settings: "wdth" 112; line-height: 1.15; }
.jt__text p:not(.jt__when) { margin: 0; color: var(--mist); }
.jt:nth-child(odd) .jt__img { order: 2; justify-self: start; }
.jt:nth-child(odd) .jt__text { justify-self: end; text-align: right; }
.jt:nth-child(odd) .jt__play { flex-direction: row-reverse; }
.jt--next .btn { margin-top: 1.2rem; }
.jt__play {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.1rem; padding: .55rem 1rem .55rem .55rem; border-radius: 999px;
  border: 1px solid rgba(250,250,247,.3); background: rgba(11,21,34,.3); color: var(--dove); font: 650 .9rem/1 var(--wide); cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.jt__play svg { width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: var(--blush); fill: var(--tide); }
.jt__play .s { display: none; }
.jt__play.is-playing .p { display: none; }
.jt__play.is-playing .s { display: block; }
.jt__play:hover { border-color: var(--blush); background: rgba(244,166,198,.12); }
/* reveal: each step slides in from its own side */
:where(.js-motion) .jt__img, :where(.js-motion) .jt__text { opacity: 0; transition: opacity .9s ease, translate .9s cubic-bezier(.2,.8,.2,1); translate: -30px 0; }
:where(.js-motion) .jt:nth-child(odd) .jt__img, :where(.js-motion) .jt:nth-child(even) .jt__text { translate: 30px 0; }
:where(.js-motion) .jt.is-on .jt__img, :where(.js-motion) .jt.is-on .jt__text { opacity: 1; translate: 0 0; }

@media (max-width: 760px) {
  .journey__line { left: 7px; }
  .jt { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; padding-left: 2.2rem; }
  .jt::before { left: 7px; top: .5rem; }
  .jt__year { position: static; transform: none; padding: 0; background: none; justify-self: start; font-size: 1.4rem; }
  .jt__img, .jt:nth-child(odd) .jt__img { order: 0; justify-self: start; width: min(100%, 320px); }
  .jt:nth-child(odd) .jt__text { justify-self: start; text-align: left; }
  .jt:nth-child(odd) .jt__play { flex-direction: row; }
  :where(.js-motion) .jt__img, :where(.js-motion) .jt__text, :where(.js-motion) .jt:nth-child(odd) .jt__img, :where(.js-motion) .jt:nth-child(even) .jt__text { translate: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.js-motion) .jt__img, :where(.js-motion) .jt__text { opacity: 1; translate: none; transition: none; }
}