/* ==========================================================================
   Layout — shell, grid, section rhythm, reveal choreography
   ========================================================================== */

.cp-shell {
  width: 100%;
  max-width: var(--cp-max);
  margin-inline: auto;
  padding-inline: var(--cp-gutter);
}
.cp-shell--narrow { max-width: 62rem; }
.cp-shell--wide   { max-width: 96rem; }

.cp-section {
  position: relative;
  padding-block: var(--cp-space-2xl);
  /* Each section owns a stacking context so decorative layers never escape. */
  isolation: isolate;
}
.cp-section--tight { padding-block: var(--cp-space-xl); }
.cp-section--flush-top { padding-top: 0; }

/* Editorial split: text beside a visual. */
.cp-split {
  display: grid;
  gap: var(--cp-space-xl);
  align-items: start;
}
@media (min-width: 62rem) {
  .cp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cp-space-2xl); }
  .cp-split--text-lead { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .cp-split--sticky > :first-child { position: sticky; top: calc(var(--cp-header-h) + var(--cp-space-lg)); }
}

/* Section header: eyebrow + heading + optional lede. */
.cp-section-head { max-width: 46rem; margin-bottom: var(--cp-space-xl); }
.cp-section-head--wide { max-width: 58rem; }
.cp-section-head__lede { margin-top: var(--cp-space-md); }

.cp-stack > * + * { margin-top: var(--cp-space-md); }
.cp-stack-lg > * + * { margin-top: var(--cp-space-lg); }

.cp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cp-space-sm) var(--cp-space-md);
  margin-top: var(--cp-space-lg);
}

/* ==========================================================================
   Reveal choreography
   One consistent animation language, driven by an IntersectionObserver that
   adds .is-inview. Without JS everything is visible by default — the hidden
   state is only applied once .js is on <body>.
   ========================================================================== */



/* Body copy / generic blocks: fade + rise */
.js [data-reveal="fade"] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity var(--cp-dur-lg) var(--cp-ease-out),
              transform var(--cp-dur-lg) var(--cp-ease-out);
  transition-delay: calc(var(--d, 0) * var(--cp-stagger));
}
.js [data-reveal="fade"].is-inview {
  opacity: 1;
  transform: none;
}

/* Headings: masked upward reveal, word by word */
.cp-reveal-heading .cp-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Descenders need breathing room or the mask clips them. */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.js .cp-reveal-heading .cp-word__inner {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform var(--cp-dur-lg) var(--cp-ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.js .cp-reveal-heading.is-inview .cp-word__inner { transform: none; }

/* Images: smooth fade + lift reveal */
.js [data-reveal="image"] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity var(--cp-dur-lg) var(--cp-ease-out),
              transform var(--cp-dur-lg) var(--cp-ease-out);
}
.js [data-reveal="image"].is-inview {
  opacity: 1;
  transform: none;
}
.js [data-reveal="image"] img {
  transition: transform 900ms var(--cp-ease-out);
}

/* Rules and dividers: draw from the leading edge */
.js [data-reveal="rule"] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--cp-dur-lg) var(--cp-ease-out);
}
.js [data-reveal="rule"].is-inview { transform: scaleX(1); }

/* Groups stagger their direct children */
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--cp-dur-md) var(--cp-ease-out),
              transform var(--cp-dur-md) var(--cp-ease-out);
}
.js [data-reveal-group].is-inview > * {
  opacity: 1;
  transform: none;
}
.js [data-reveal-group].is-inview > *:nth-child(1) { transition-delay: calc(0 * var(--cp-stagger)); }
.js [data-reveal-group].is-inview > *:nth-child(2) { transition-delay: calc(1 * var(--cp-stagger)); }
.js [data-reveal-group].is-inview > *:nth-child(3) { transition-delay: calc(2 * var(--cp-stagger)); }
.js [data-reveal-group].is-inview > *:nth-child(4) { transition-delay: calc(3 * var(--cp-stagger)); }
.js [data-reveal-group].is-inview > *:nth-child(5) { transition-delay: calc(4 * var(--cp-stagger)); }
.js [data-reveal-group].is-inview > *:nth-child(6) { transition-delay: calc(5 * var(--cp-stagger)); }

/* Reduced motion: no transforms at all, just presence. */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .js .cp-reveal-heading .cp-word__inner { transform: none !important; }
  .js [data-reveal="image"] img { transform: none !important; }
}

/* ---- Scroll progress ---------------------------------------------------- */
.cp-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--cp-azure), var(--cp-azure-bright));
  z-index: calc(var(--cp-z-nav) + 5);
  pointer-events: none;
}
.no-js .cp-progress { display: none; }