/* =========================================================
   "Bad design is the luxury" scroll-reveal manifesto
   ========================================================= */

.lb-manifesto {
  --lm-bg:      var(--bg, #0A0A0F);
  --lm-text:    var(--text, #F5F5F7);
  --lm-accent:  var(--accent-2, #B2ED3A);
  --lm-font:    var(--font-display, 'Cormorant Garamond', Georgia, serif);

  position: relative;
  background: var(--lm-bg);
  padding: 20vh 6vw;
}

/* short enough that already-revealed lines stay on screen while the
   next one reveals, tall enough to keep a pause between reveals */
.lb-line-wrap {
  min-height: 28vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A group of lines meant to read as one tight stanza — no gap
   between them, unlike the airy 28vh-per-line rhythm elsewhere
   in the manifesto. */
.lb-tight-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.lb-manifesto .scroll-reveal {
  margin: 0;
  max-width: 900px;
}

.lb-manifesto .scroll-reveal-text {
  margin: 0;
  font-family: var(--lm-font);
  font-weight: 500;
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1.5;
  color: var(--lm-text);
  text-align: center;
}

.lb-manifesto .word {
  display: inline-block;
  will-change: opacity, filter;
}

/* "Exhibit A" — the before-design, shown right after the
   "bad design is the luxury" line so the marquee's redesign
   lands as the payoff */
.lb-exhibit {
  margin: 8vh auto;
  padding: 0 1.5rem;
  max-width: min(420px, 82vw);
  text-align: center;
}

.lb-exhibit-card {
  transform: rotate(-2.5deg);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-2, rgba(20, 10, 45, 0.14));
  box-shadow: 0 30px 60px -20px rgba(20, 10, 50, 0.35);
  will-change: transform, opacity, filter;
}

.lb-exhibit-card img {
  display: block;
  width: 100%;
  height: auto;
  /* slightly dimmed — this is the "before", not the showpiece */
  filter: saturate(0.85) brightness(0.92);
}

.lb-exhibit-caption {
  margin-top: 1.4rem;
  font-family: monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--text-muted, #9A9AA8);
}

@media (prefers-reduced-motion: reduce) {
  .lb-manifesto .word { opacity: 1 !important; filter: none !important; }
  .lb-manifesto .scroll-reveal { transform: none !important; }
  .lb-exhibit-card { transform: rotate(-2.5deg) !important; opacity: 1 !important; filter: none !important; }
}

/* =========================================================
   "We exist to cancel it" full-screen marquee
   ========================================================= */

.cancel-marquee {
  --cm-bg:   var(--bg-2, #F5F4EF);       /* warm cream, matches the reference */
  --cm-ink:  rgba(178,237,58,0.45);       /* soft sage-lime watermark on cream */
  --cm-font: 'Syne', system-ui, sans-serif;

  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--cm-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* screen-reader-only heading; the marquee text itself is decorative */
.cm-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Back to the original overlay composition, like the reference:
   the image sits centered over both lines, but the two lines don't
   share one z-index. The first line sits BEHIND the image (its
   middle gets covered, only the edges peek out either side, same
   as "ISABELLE" in the reference). The second line sits IN FRONT
   of the image (fully visible, crossing over the photo, same as
   "BEAUCHEMIN"). No z-index on .cm-rows itself, so its two rows
   can be individually placed above/below .cm-media. */
.cm-rows {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6vh;
}

.cm-row {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.cm-row:first-child { z-index: 1; }  /* behind the image */
.cm-row:last-child  { z-index: 3; }  /* in front of the image */

/* two identical groups inside the track; the track slides by exactly
   one group's width (-50%) then loops, so the scroll is seamless */
.cm-track {
  display: inline-flex;
  width: max-content;
  will-change: transform;
  animation: cm-scroll-left 28s linear infinite;
}
.cm-track-reverse { animation-name: cm-scroll-right; }

.cm-group {
  display: inline-flex;
  flex-shrink: 0;
}

/* smaller and a touch less heavy than before — at full size the
   bold weight crowded the letterforms together and hurt legibility */
.cm-group span {
  display: inline-block;
  padding-right: 0.45em;
  font-family: var(--cm-font);
  font-weight: 700;
  font-size: clamp(3rem, 11vw, 11rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--cm-ink);
}

@keyframes cm-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes cm-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* the image: original full size, sitting between the two lines
   in the stacking order (z-index 2) */
.cm-media {
  position: relative;
  z-index: 2;
  margin: 0;
}

.cm-media img {
  display: block;
  height: min(88vh, 88svh);
  width: auto;
  max-width: 86vw;
  object-fit: cover;
  border-radius: clamp(14px, 2vw, 28px);
}

@media (max-width: 640px) {
  .cm-rows { gap: 4vh; }
  .cm-group span { font-size: clamp(2.2rem, 15vw, 4.5rem); }
  .cm-media img { height: min(72vh, 72svh); }
}

@media (prefers-reduced-motion: reduce) {
  .cm-track { animation: none; }
}

/* =========================================================
   "Let's build" scroll-shatter section
   ========================================================= */

.lb-shatter {
  --lb-bg:      var(--bg, #0A0A0F);
  --lb-text:    var(--text, #F5F5F7);
  --lb-accent:  var(--accent-2, #B2ED3A);
  --lb-font:    var(--font-display, 'Cormorant Garamond', Georgia, serif);

  /* Total height = 100vh pin + scroll "runway" that drives the word-meet/
     shatter/tagline animation via scroll progress (see js/lets-build.js).
     Was 340vh (240vh runway) — trimmed to cut the dead scroll distance
     before the words meet and after the shatter/tagline settle. */
  position: relative;
  height: 200vh;
  background: var(--lb-bg);
}

.lb-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* full-bleed flash */
.lb-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.lb-content {
  position: relative;
  padding: 0 1.5rem;
  text-align: center;
}

.lb-textwrap { position: relative; }

.lb-heading {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.3em;
  font-family: var(--lb-font);
  font-weight: 700;
  font-size: clamp(2.5rem, 9vw, 7rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--lb-text);
}
.lb-heading .lb-word-b { color: var(--lb-accent); }
.lb-word {
  display: inline-block;
  will-change: transform;
}

/* shard duplicates, clipped into irregular cracked-glass cells
   generated at runtime. Positions/clip-paths are fixed once
   computed; only opacity + transform are driven by scroll progress. */
.lb-shard {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: transform, opacity;
}
.lb-shard .lb-heading {
  font-size: clamp(2.5rem, 9vw, 7rem);
}

.lb-tagline {
  margin-top: 2rem;
  font-family: var(--lb-font);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  color: var(--lb-accent);
  opacity: 0;
  transform: translateY(-18px);
  will-change: transform, opacity;
  display: none;
}

.lb-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--text-muted, #9A9AA8);
  opacity: 0;
  pointer-events: none;
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .lb-shatter { height: auto; }
  .lb-pin { position: relative; height: auto; padding: 8rem 0; }
  .lb-word { transform: none !important; }
  .lb-shard, .lb-flash { display: none; }
  .lb-tagline { opacity: 1; transform: none; }
}