/* ============================================================================
   18.09.26 — "WE ARE Chyk"
   The chapter that closes the horizontal journey. The travel stops with the
   last archive frame dead centre (the LEAD frame), then the frame zooms out
   and thins away, white turns to black, gold strands drift behind it, WE and
   ARE come in from the edges, and the Chyk signature writes itself across the
   middle. Everything here lives inside .horizontal-sticky, so it is pinned
   with the journey and scrubs off the same scroll. Driven by js/chyk-reveal.js.
   ========================================================================== */

/* -- the dark stage, behind the photograph (the track sits at z-index 30) --- */
.cr-back {
  position: absolute; inset: 0; z-index: 26;
  background: #050505;
  opacity: 0; pointer-events: none;
  contain: layout paint;
}
.cr-swirl { display: block; width: 100%; height: 100%; }
/* Painted over the strands (::after is the canvas's next sibling): a dark well
   in the middle so the strands never read as crossing in front of the
   photograph, ringed by a soft pool of gold light. */
.cr-back::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(30% 36% at 50% 50%, rgba(5, 5, 5, .82), rgba(5, 5, 5, 0) 74%),
    radial-gradient(58% 52% at 50% 50%, rgba(201, 162, 74, .13), rgba(5, 5, 5, 0) 68%);
}

/* -- WE / ARE / the signature, in front of the photograph ------------------- */
/* three columns: WE, the gap the photograph shrinks into, ARE */
.cr-fore {
  position: absolute; inset: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr var(--cr-mid) 1fr; align-items: center;
  --cr-mid: clamp(240px, 36vw, 560px);
  pointer-events: none;
}
/* ARE is the wider word, so centring it in its column leaves it further from
   the photograph than WE is and hard against the right edge. It starts at the
   head of its column instead, pulled in far enough that the two words sit the
   same distance off the shrunken frame. (.cr-fore raises the specificity so
   this beats the justify-self below.) */
.cr-we  { grid-column: 1; margin-left: clamp(0px, 1.5vw, 30px); }
.cr-fore .cr-are { grid-column: 3; justify-self: start; margin-left: clamp(-42px, -1.75vw, 0px); }
.cr-word {
  justify-self: center;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 800; font-size: clamp(2.4rem, 7.6vw, 8.5rem);
  line-height: .9; letter-spacing: -.02em;
  color: #f4d271;
  text-shadow: 0 0 .28em rgba(240, 206, 107, .42), 0 0 1.1em rgba(201, 162, 74, .28);
  opacity: 0;
  will-change: transform, opacity;
}

.cr-sign {
  position: absolute; left: 50%; top: 50%;
  width: min(42vw, 600px);
  /* sat right of centre on purpose, so the tail of the name runs into ARE */
  transform: translate(-42%, -50%);
  /* the name is written over the two words, not between them — the overlap is
     the point, so it has to sit above ARE, which follows it in the markup */
  z-index: 2;
}
.cr-sign .cs-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------------------------------------------------------------------------
   The curve that carries the black frame into the white Milestones sheet.
   A black strip with a white dome rising through it, sitting on the seam.
   ------------------------------------------------------------------------- */
.cr-seam { position: relative; }
/* the journey used to slide Milestones in over itself and fade this sheet up
   from nothing; it now starts its own chapter, so the sheet is white outright */
.cr-seam .chyk-core { background-color: #fdfdfd !important; }
.cr-curve {
  position: absolute; left: -2vw; top: -1px; z-index: 6;
  width: 104vw; height: clamp(46px, 6.5vw, 108px);
  background: #050505; overflow: hidden; pointer-events: none;
}
/* a shallow dome of the white sheet, wider than the strip so it meets the
   bottom corners cleanly and leaves black only in the top two crescents */
.cr-curve::after {
  content: ''; position: absolute; left: -20%; top: 0; width: 140%; height: 100%;
  background: #fdfdfd;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* ---------------------------------------------------------------------------
   Phones and tablets never run the horizontal journey, so the chapter gets its
   own sticky section there (.cr-mobile, built by js/chyk-reveal.js).
   ------------------------------------------------------------------------- */
.cr-mobile { position: relative; height: 100vh; background: #050505; overflow: hidden; }
.cr-mobile .cr-hold { position: relative; height: 100%; }
.cr-mobile .cr-back { opacity: 1; }
/* a narrow screen has no room for WE · name · ARE side by side, so they stack */
.cr-mobile .cr-fore {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(.5rem, 3vh, 1.75rem); padding: 0 1rem;
}
.cr-mobile .cr-word { font-size: clamp(2.4rem, 15vw, 5rem); opacity: 1; }
.cr-mobile .cr-sign { position: static; transform: none; width: min(88vw, 470px); }

@media (prefers-reduced-motion: reduce) {
  .cr-word { transition: none; }
}