/* =============================================================================
   Text Block — Shared base for all three variations
   ============================================================================= */

.cb-tb {
  --cb-tb-bg: transparent;
  --cb-tb-max-w: 64rem;
  --cb-tb-pt: 80px;
  --cb-tb-pb: 80px;
  --cb-tb-dur: 700ms;
  --cb-tb-stagger: 120ms;
  box-sizing: border-box;
  background: var(--cb-tb-bg);
  padding: var(--cb-tb-pt) 0 var(--cb-tb-pb);
  overflow: hidden;
}

.cb-tb *,
.cb-tb *::before,
.cb-tb *::after {
  box-sizing: inherit;
}

.cb-tb__wrap {
  max-width: var(--cb-tb-max-w);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}

/* =============================================================================
   Alignment
   ============================================================================= */

.cb-tb--align-left   .cb-tb__wrap { text-align: left; }
.cb-tb--align-center .cb-tb__wrap { text-align: center; }
.cb-tb--align-right  .cb-tb__wrap { text-align: right; }

/* =============================================================================
   Text Block – Heading Body
   ============================================================================= */

.cb-tb-hb__heading {
  --cb-tb-hb-color: #E8E4DE;
  --cb-tb-hb-size: 56px;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-size: var(--cb-tb-hb-size);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cb-tb-hb-color);
}

.cb-tb-hb__body {
  --cb-tb-hb-body-color: #A8A29E;
  --cb-tb-hb-body-size: 20px;
  margin: 0;
  font-size: var(--cb-tb-hb-body-size);
  line-height: 1.6;
  color: var(--cb-tb-hb-body-color);
}

/* =============================================================================
   Text Block – Bold Subtle
   ============================================================================= */

.cb-tb-bs__bold {
  --cb-tb-bs-color: #FFFFFF;
  --cb-tb-bs-size: 44px;
  --cb-tb-bs-weight: 800;
  margin: 0;
  font-size: var(--cb-tb-bs-size);
  font-weight: var(--cb-tb-bs-weight);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--cb-tb-bs-color);
  display: inline;
}

.cb-tb-bs__subtle {
  --cb-tb-bs-subtle-color: #78716C;
  --cb-tb-bs-subtle-size: 44px;
  --cb-tb-bs-subtle-weight: 700;
  margin: 0;
  font-size: var(--cb-tb-bs-subtle-size);
  font-weight: var(--cb-tb-bs-subtle-weight);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--cb-tb-bs-subtle-color);
  display: inline;
}

/* =============================================================================
   Text Block – Tiered
   ============================================================================= */

.cb-tb-ti__large {
  --cb-tb-ti-lg-color: #FFFFFF;
  --cb-tb-ti-lg-size: 56px;
  --cb-tb-ti-lg-weight: 800;
  --cb-tb-ti-lg-lh: 1.1;
  margin: 0;
  font-size: var(--cb-tb-ti-lg-size);
  font-weight: var(--cb-tb-ti-lg-weight);
  line-height: var(--cb-tb-ti-lg-lh);
  letter-spacing: -0.02em;
  color: var(--cb-tb-ti-lg-color);
}

.cb-tb-ti__medium {
  --cb-tb-ti-md-color: #D6D3D1;
  --cb-tb-ti-md-size: 32px;
  --cb-tb-ti-md-weight: 600;
  --cb-tb-ti-md-lh: 1.3;
  --cb-tb-ti-gap-lg: 24px;
  margin: var(--cb-tb-ti-gap-lg) 0 0;
  font-size: var(--cb-tb-ti-md-size);
  font-weight: var(--cb-tb-ti-md-weight);
  line-height: var(--cb-tb-ti-md-lh);
  color: var(--cb-tb-ti-md-color);
}

.cb-tb-ti__normal {
  --cb-tb-ti-nm-color: #A8A29E;
  --cb-tb-ti-nm-size: 18px;
  --cb-tb-ti-nm-weight: 400;
  --cb-tb-ti-nm-lh: 1.6;
  --cb-tb-ti-gap-md: 20px;
  margin: var(--cb-tb-ti-gap-md) 0 0;
  font-size: var(--cb-tb-ti-nm-size);
  font-weight: var(--cb-tb-ti-nm-weight);
  line-height: var(--cb-tb-ti-nm-lh);
  color: var(--cb-tb-ti-nm-color);
}

/* =============================================================================
   Entrance Animations — applied to .cb-tb__line elements
   ============================================================================= */

/*
 * Base transition: duration is hardcoded here as a safe default.
 * JS overrides transition-duration and transition-delay via inline style
 * so the configurable CP values always take effect reliably.
 */
.cb-tb__line {
  transition:
    opacity   1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    filter    1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- none --- */
.cb-tb--anim-none .cb-tb__line {
  transition: none;
}

/* --- fade-in --- */
.cb-tb--anim-fade-in:not(.cb-tb--visible) .cb-tb__line {
  opacity: 0 !important;
}
.cb-tb--anim-fade-in.cb-tb--visible .cb-tb__line {
  opacity: 1;
}

/* --- fade-in-up --- */
.cb-tb--anim-fade-in-up:not(.cb-tb--visible) .cb-tb__line {
  opacity: 0 !important;
  transform: translateY(2rem) !important;
}
.cb-tb--anim-fade-in-up.cb-tb--visible .cb-tb__line {
  opacity: 1;
  transform: none;
}

/* --- fade-in-down --- */
.cb-tb--anim-fade-in-down:not(.cb-tb--visible) .cb-tb__line {
  opacity: 0 !important;
  transform: translateY(-2rem) !important;
}
.cb-tb--anim-fade-in-down.cb-tb--visible .cb-tb__line {
  opacity: 1;
  transform: none;
}

/* --- slide-in-left --- */
.cb-tb--anim-slide-in-left:not(.cb-tb--visible) .cb-tb__line {
  opacity: 0 !important;
  transform: translateX(-3rem) !important;
}
.cb-tb--anim-slide-in-left.cb-tb--visible .cb-tb__line {
  opacity: 1;
  transform: none;
}

/* --- slide-in-right --- */
.cb-tb--anim-slide-in-right:not(.cb-tb--visible) .cb-tb__line {
  opacity: 0 !important;
  transform: translateX(3rem) !important;
}
.cb-tb--anim-slide-in-right.cb-tb--visible .cb-tb__line {
  opacity: 1;
  transform: none;
}

/* --- slide-in-top --- */
.cb-tb--anim-slide-in-top:not(.cb-tb--visible) .cb-tb__line {
  opacity: 0 !important;
  transform: translateY(-3rem) !important;
}
.cb-tb--anim-slide-in-top.cb-tb--visible .cb-tb__line {
  opacity: 1;
  transform: none;
}

/* --- slide-in-bottom --- */
.cb-tb--anim-slide-in-bottom:not(.cb-tb--visible) .cb-tb__line {
  opacity: 0 !important;
  transform: translateY(3rem) !important;
}
.cb-tb--anim-slide-in-bottom.cb-tb--visible .cb-tb__line {
  opacity: 1;
  transform: none;
}

/* --- zoom-in --- */
.cb-tb--anim-zoom-in:not(.cb-tb--visible) .cb-tb__line {
  opacity: 0 !important;
  transform: scale(0.8) !important;
}
.cb-tb--anim-zoom-in.cb-tb--visible .cb-tb__line {
  opacity: 1;
  transform: none;
}

/* --- zoom-out --- */
.cb-tb--anim-zoom-out:not(.cb-tb--visible) .cb-tb__line {
  opacity: 0 !important;
  transform: scale(1.15) !important;
}
.cb-tb--anim-zoom-out.cb-tb--visible .cb-tb__line {
  opacity: 1;
  transform: none;
}

/* --- flip-up --- */
.cb-tb--anim-flip-up:not(.cb-tb--visible) .cb-tb__line {
  opacity: 0 !important;
  transform: perspective(800px) rotateX(-15deg) !important;
  transform-origin: bottom center;
}
.cb-tb--anim-flip-up.cb-tb--visible .cb-tb__line {
  opacity: 1;
  transform: none;
}

/* --- blur-in --- */
.cb-tb--anim-blur-in:not(.cb-tb--visible) .cb-tb__line {
  opacity: 0 !important;
  filter: blur(12px) !important;
}
.cb-tb--anim-blur-in.cb-tb--visible .cb-tb__line {
  opacity: 1;
  filter: blur(0);
}

/* --- typewriter --- */
/* Line container stays visible; individual .cb-tb__char spans reveal via JS */
.cb-tb--anim-typewriter .cb-tb__line {
  opacity: 1;
  transform: none;
  transition: none;
}

/* --- stagger-words --- */
/*
 * The line container stays fully visible — only the individual word spans
 * animate. Hiding the container and the words at the same time creates
 * a double-opacity conflict where words never visually transition.
 */
.cb-tb--anim-stagger-words .cb-tb__line {
  opacity: 1;
  transform: none;
  transition: none;
}

/* word spans created by JS for stagger-words animation */
.cb-tb__word {
  display: inline-block;
  /* Duration overridden by inline style from JS; this is the safe fallback */
  transition:
    opacity   1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.cb-tb--anim-stagger-words:not(.cb-tb--visible) .cb-tb__word {
  opacity: 0;
  transform: translateY(0.5em);
}
.cb-tb--anim-stagger-words.cb-tb--visible .cb-tb__word {
  opacity: 1;
  transform: none;
}

/* typewriter cursor pseudo-element on the last visible character wrapper */
.cb-tb--anim-typewriter .cb-tb__char-wrap {
  display: inline;
}

.cb-tb--anim-typewriter .cb-tb__char {
  display: inline;
  opacity: 0;
}

.cb-tb--anim-typewriter.cb-tb--visible .cb-tb__char.cb-tb__char--revealed {
  opacity: 1;
}

/* =============================================================================
   Reduced motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .cb-tb__line,
  .cb-tb__word,
  .cb-tb__char {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 40rem) {
  .cb-tb {
    --cb-tb-pt: 48px;
    --cb-tb-pb: 48px;
  }
}