/* ============================================================
   Gallery — pinned single + double horizontal scroll
   Driven by src/gallery/gallery.js (GSAP ScrollTrigger).

   Uses BR brand tokens from br-market-group.br.css:
     --tiers--platinum  (light backdrop)
     --bg-primary       (dark backdrop)
     Satoshi font family inherits globally — no override here.
   ============================================================ */

/* ── Section header (existing About Us) ─────────────────────── */
.section-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
  color: #e5e4e2;
  padding: 4rem 2rem;
  text-align: center;
}

.section-header h1 {
  color: #e5e4e2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(2rem, 5vw, 7rem);
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
}

/* ── Shared ─────────────────────────────────────────────────── */
.container { position: relative; }

.container h1 {
  font-size: clamp(2rem, 5vw, 7rem);
  margin: 0;
}

/* ── First / last spacer containers ─────────────────────────── */
.firstContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* A full viewport height held 90px of type and 722px of nothing: the statement
     read as a caption lost in a field rather than a held moment. Shorter panel,
     bigger type, and the block sits against the gutter instead of floating in
     the middle of the void.
     svh, not vh: on a phone the browser chrome makes 100vh taller than the
     screen. min-height rather than height so a landscape phone grows the panel
     instead of clipping the words. */
  min-height: 64svh;
  align-items: flex-start;
  text-align: left;
  padding: clamp(3rem, 9vh, 7rem) clamp(1.5rem, 6vw, 5rem);
}

.firstContainer h1 {
  font-size: clamp(2rem, 5vw, 7rem);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.05;
}

/* ── The entrance statement ───────────────────────────────────────────────────
   These two panels used to read "Scroll Down" and "Keep Scrolling": two full
   viewport heights spent narrating the mechanic instead of giving anyone a
   reason to perform it. They carry the line that motivates the gallery now.

   Each line sits in its own overflow clip and rises out of it, so the reveal is
   a mask rather than a fade. The tracking starts wide and closes as the line
   seats, which is the type equivalent of the platter reaching speed: it arrives
   before it settles. Nothing here is hidden without JS — .is-revealed is added
   by the observer, and the no-JS default below leaves the words in place. */
.firstContainer h1.statement {
  /* Sized to fill the panel rather than sit in it. */
  font-size: clamp(3rem, 12vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: none;
  font-weight: 900;
  max-width: min(20ch, 100%);
  margin: 0;
  text-align: left;
}

.statement__line {
  display: block;
}

.statement__line > span {
  display: block;
  will-change: transform;
  /* Line one used to break as "Every campaign starts" + a lone "with", which is
     what made the alignment look accidental. Balance splits it evenly instead. */
  text-wrap: balance;
}

/* Words keep the line breaking at spaces; characters are what get struck. */
.statement__word {
  display: inline-block;
  white-space: nowrap;
}

.statement__char {
  display: inline-block;
  /* Grown from the centre, so a character arrives where it already belongs.
     Travelling upward reads as a slide — the letter comes from somewhere else
     and lands. A note does not slide into a chord; it is struck and it is
     there. */
  transform-origin: center;
  will-change: transform, opacity;
  transition:
    transform 520ms var(--motion-settle, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity 300ms ease-out;
  /* --d and --s are written per character by /src/reveal/reveal.js. */
  transition-delay: var(--d, 0ms);
}

html.reveal-ready [data-reveal]:not(.is-revealed) .statement__char {
  transform: scale(var(--s, 0.7));
  opacity: 0;
}

/* The second line starts after the first has largely played, so the two read as
   two phrases rather than one wall of movement. */
[data-reveal] .statement__line:nth-child(2) .statement__char {
  transition-delay: calc(var(--d, 0ms) + 240ms);
}

/* Reduced motion gets the words, immediately, with no travel at all. */
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready [data-reveal]:not(.is-revealed) .statement__char {
    transform: none;
    opacity: 1;
  }
  .statement__char {
    transition: none;
  }
}

.lastContainer {
  display: flex;
  /* 25vh of nothing was a quarter-screen of dead scroll between the gallery
     and the section that follows it. Enough to separate, not enough to stall. */
  height: 12vh;
  background: var(--bg-primary, #121212);
}

/* ── Tier-color backdrops (1 + 2 = platinum, 3 + 4 = dark) ─── */
.bg--platinum {
  background: var(--tiers--platinum, #e5e4e2);
  color: #121212;
}
.bg--platinum h1 { color: #121212; }

.bg--dark {
  background: var(--bg-primary, #121212);
  color: #e5e4e2;
}
.bg--dark h1 { color: #e5e4e2; }

/* ── Single container (one long row, horizontal scroll) ─────── */
.container.single {
  position: relative;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.container.single .inner-container {
  z-index: 2;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
}

.container.single .jump-btn {
  z-index: 5;
  white-space: nowrap;
  min-width: 5rem !important;
  height: 5rem;
  padding: 0 1.5rem;
  border-radius: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  /* Was #fff4e4 on #282623: a warm cream that exists nowhere else in a system
     built on #121212, whitesmoke and platinum. On this platinum section the
     control reads as the inverse of the header CTA, which is the same pill in
     the opposite polarity. */
  color: var(--text-colors--main, whitesmoke);
  background-color: var(--bg-primary, #121212);
  border: 1.5px solid var(--bg-primary, #121212);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  transition:
    background-color var(--motion-fast, 240ms) var(--motion-cue, ease),
    color var(--motion-fast, 240ms) var(--motion-cue, ease),
    transform var(--motion-base, 420ms) var(--motion-settle, ease);
}

.container.single .jump-btn:hover,
.container.single .jump-btn:focus-visible {
  background-color: transparent;
  color: var(--bg-primary, #121212);
  transform: translateY(-2px);
}

.container.single .jump-btn:focus-visible {
  outline: 2px solid #121212;
  outline-offset: 3px;
}

.container.single .container-text {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 3rem;
  z-index: 2;
  mix-blend-mode: color-burn;
  max-width: 100vw;
  pointer-events: none;
}

.container.single .container-text h1 {
  max-width: 900px;
}

.container.single .panel {
  position: relative;
  z-index: 3;
  width: min(700px, 78vw);
  max-width: 200vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}

.container.single .panel.behind { z-index: 1; }

.container.single .panel figure {
  width: 100%;
  margin: 0;
}

.container.single .panel img,
.container.single .panel video {
  height: 60vh;
  max-height: 95vh;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Capped in vw so the strip stays legible as the viewport narrows. The vw term
   only ever wins below roughly 1150px, so every desktop width renders the exact
   pixel widths that shipped. */
.container.single .panel.width--thin       { width: min(300px, 42vw); }
.container.single .panel.width--small      { width: min(500px, 62vw); }
.container.single .panel.width--normal     { width: min(700px, 78vw); }
.container.single .panel.width--wide       { width: min(900px, 88vw); }
.container.single .panel.width--extra-wide { width: min(1100px, 94vw); }

.container.single .panel.height--extra-short img,
.container.single .panel.height--extra-short video { height: 20vh; }
.container.single .panel.height--short img,
.container.single .panel.height--short video       { height: 40vh; }
.container.single .panel.height--normal img,
.container.single .panel.height--normal video      { height: 60vh; }
.container.single .panel.height--tall img,
.container.single .panel.height--tall video        { height: 75vh; }
.container.single .panel.height--extra-tall img,
.container.single .panel.height--extra-tall video  { height: 90vh; }

/* ── Double container (two rows, opposite directions) ───────── */
.container.double {
  position: relative;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.container.double .inner-container {
  z-index: 2;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.container.double .row--top,
.container.double .row--bottom {
  height: 50vh;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  position: relative;
  align-items: center;
  z-index: 1;
}

.container.double .container-text {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 3rem;
  z-index: 6;
  mix-blend-mode: color-burn;
  max-width: 100vw;
  pointer-events: none;
}

.container.double .container-text h1 {
  max-width: 800px;
}

.container.double .panel {
  position: relative;
  z-index: 7;
  width: min(700px, 78vw);
  max-width: 200vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
  margin: 0;
}

.container.double .panel.behind { z-index: 1; }

.container.double .panel figure {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container.double .panel img,
.container.double .panel video {
  height: 100%;
  max-height: 55vh;
  width: 100%;
  object-fit: cover;
  display: block;
}

.container.double .panel.width--thin       { width: min(150px, 26vw); }
.container.double .panel.width--small      { width: min(250px, 38vw); }
.container.double .panel.width--normal     { width: min(350px, 50vw); }
.container.double .panel.width--wide       { width: min(450px, 62vw); }
.container.double .panel.width--extra-wide { width: min(600px, 78vw); }

.container.double .panel.height--extra-short { height: 45%; }
.container.double .panel.height--short       { height: 60%; }
.container.double .panel.height--normal      { height: 70%; }
.container.double .panel.height--tall        { height: 85%; }
.container.double .panel.height--extra-tall  { height: 100%; }

/* ── Section intro ───────────────────────────────────────────────────────────
   The row of destinations under this used to begin with no introduction at all:
   eight names appearing after the gallery with nothing saying what they are or
   why they are a set. The heading is wayfinding, not a performance — it stays
   still while the entrance panels above it are the page's one authored moment.
   No eyebrow above it; the heading carries its own weight.
   =========================================================================== */
.section-intro {
  /* Exactly the row's own measure — .flex-container is min(100% - 4rem, 1400px)
     centred, so borrowing it is what keeps the heading on the same left edge as
     the thing it introduces. A gutter of its own put it 32px adrift. */
  width: min(100% - 4rem, 1400px);
  margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
  padding: 0;
  scroll-margin-top: calc(var(--site-header-h, 72px) + 1rem);
}

/* The row narrows to a 1rem inset wherever it stacks; the heading follows it,
   so the two keep one left edge in both layouts. */
@media (max-width: 768px), (hover: none) {
  .section-intro {
    width: calc(100% - 2rem);
  }
}

.section-intro__title {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-colors--main, whitesmoke);
}

.section-intro__note {
  margin: clamp(0.75rem, 1.5vw, 1.25rem) 0 0;
  max-width: 46ch;
  font-size: clamp(0.95rem, 1.15vw, 1.0625rem);
  line-height: 1.55;
  color: var(--text-colors--second, #d0d0d0);
}

/* ── Skip anchor target ─────────────────────────────────────── */
#skip {
  position: relative;
  height: 0;
  scroll-margin-top: 4rem;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Same vw caps as the base rules, so these tablet widths cannot win back a
     fixed pixel value that is wider than the viewport itself. */
  .container.single .panel.width--extra-wide { width: min(800px, 94vw); }
  .container.single .panel.width--wide       { width: min(650px, 88vw); }
  .container.double .panel.width--extra-wide { width: min(450px, 78vw); }
  .container.double .panel.width--wide       { width: min(350px, 62vw); }
}

@media (max-width: 768px) {
  /* The strip stays pinned and horizontal here. It used to be flattened into a
     vertical column of full-width stills, which threw away the one interaction
     this section exists for — the panels drifting past each other as you scroll.
     Narrowing the panels (below) is what makes the horizontal read work on a
     phone; the layout itself does not change. */
  .container.single .container-text,
  .container.double .container-text {
    padding: 1.5rem;
  }

  .container.single .jump-btn {
    right: 1.5rem;
    bottom: 1.5rem;
    height: 4rem;
    min-width: 4rem !important;
  }

  .firstContainer { height: 60vh; }
  .lastContainer { height: 9vh; }

  .section-header {
    min-height: 40vh;
    padding: 2rem 1rem;
  }

  .section-header h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
}

@media (max-width: 480px) {
  .section-header h1 { font-size: clamp(1.25rem, 3vw, 2rem); }
  .firstContainer h1 { font-size: clamp(1.5rem, 6vw, 3rem); }
}

/* ── Accessibility & performance ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .section-header,
  .firstContainer,
  .container.single,
  .container.double,
  .lastContainer {
    transition: none !important;
    animation: none !important;
  }
}

.container.single .panel,
.container.double .panel {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.container.single .panel img,
.container.double .panel img {
  will-change: opacity;
}