/* Curtain Slider - full-bleed drop-in image slider. Advancing runs a
   direction-aware clip-path curtain wipe on the incoming layer paired with a
   slide-in, while the outgoing layer counter-drifts and darkens. No Webflow -
   CSS variables + @font-face allowed. */

@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

.cs_preview {
  margin: 0;
  background: #101010;
}

.cs_preview .cs_wrap {
  --cs-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.cs_wrap {
  --cs-bg:      #101010;
  --cs-fg:      rgba(255, 250, 242, 0.92);
  --cs-fg-soft: rgba(255, 255, 255, 0.85);
  --cs-fg-dim:  rgba(255, 255, 255, 0.75);
  --cs-line:    rgba(255, 255, 255, 0.25);
  --cs-line-on: rgba(255, 255, 255, 0.9);
  --cs-pill-bg: rgba(255, 255, 255, 0.1);
  --cs-circle:  rgba(255, 255, 255, 0.1);
  --cs-circle-hover: rgba(255, 255, 255, 0.22);
  --cs-margin:  40px;
  --cs-sans:    "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.cs_wrap {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--cs-bg);
  font-family: var(--cs-sans);
  -webkit-font-smoothing: antialiased;
  touch-action: pan-y;
  outline: none;
}

.cs_slides {
  display: none;
}

.cs_stage {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ---- Image layers: each layer is N column strips. A strip is an
   overflow-hidden mask; its inner is the full stage rect offset left so
   the strips reassemble one seamless cover-fit photo. Strip left/width
   and inner left/width are integer-snapped px, set by JS. ---- */
.cs_layers {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cs_layer {
  position: absolute;
  inset: 0;
}

/* No will-change here on purpose: promoting all strips to their own
   compositor layers caused tile-rasterization churn on 120Hz retina
   fullscreen (flashing rectangles during the wipe). The shipped
   wipe-slider/step-wipe clip wipes run clean with zero will-change. */
.cs_strip {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
}

.cs_strip_inner {
  position: absolute;
  top: 0;
  height: 100%;
}

.cs_layer_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: 50% 50%;
}

/* Per-strip darkening overlay - dimming tweens THIS element's opacity
   (GPU-composited) instead of filter: brightness on the image (animated
   filters repaint per frame and flicker at fullscreen retina). */
.cs_shade {
  position: absolute;
  inset: 0;
  background: #0a0a0a;
  opacity: 0;
  pointer-events: none;
}

/* ---- Scrim for text legibility ---- */
.cs_scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0.05) 45%, rgba(10, 10, 10, 0.3) 100%);
  pointer-events: none;
}

/* ---- Label, top-left ---- */
.cs_label {
  position: absolute;
  left: var(--cs-margin);
  top: var(--cs-margin);
  z-index: 4;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--cs-fg-soft);
  pointer-events: none;
}

.cs_label_line {
  position: relative;
  display: block;
  white-space: nowrap;
  width: max-content;
  overflow: hidden;
}

/* ---- Display title, bottom-left ---- */
.cs_title {
  position: absolute;
  left: var(--cs-margin);
  bottom: var(--cs-margin);
  z-index: 4;
  margin: 0;
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--cs-fg);
  width: max-content;
  max-width: calc(100% - var(--cs-margin) * 2);
  pointer-events: none;
}

.cs_title_line {
  position: relative;
  display: block;
  white-space: nowrap;
  width: max-content;
  overflow-x: visible;
  overflow-y: hidden;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}

.cs_title_char {
  position: relative;
  display: inline-block;
}

/* ---- Index roller, bottom-right ---- */
.cs_index {
  position: absolute;
  right: var(--cs-margin);
  bottom: var(--cs-margin);
  z-index: 4;
  display: flex;
  /* center, not baseline: an overflow-hidden digit box's flex baseline is
     its BOTTOM edge, which rides the rollers up relative to the divider */
  align-items: center;
  line-height: 1;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--cs-fg-dim);
  pointer-events: none;
}

.cs_digit_wrap {
  position: relative;
  display: inline-block;
  overflow-x: visible;
  overflow-y: hidden;
  height: 1em;
  width: 0.62em;
  vertical-align: top;
}

.cs_digit_roller {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
}

.cs_digit_roller span {
  display: block;
  height: 1em;
  line-height: 1;
}

.cs_index_divider {
  display: inline-block;
  margin: 0 0.25em;
  color: var(--cs-line);
  line-height: 1;
}

.cs_index_total {
  display: inline-block;
  line-height: 1;
}

/* ---- Progress hairline, top edge ---- */
.cs_progress {
  position: absolute;
  left: var(--cs-margin);
  right: var(--cs-margin);
  top: 24px;
  z-index: 4;
  height: 1px;
  background: var(--cs-line);
  overflow: hidden;
}

.cs_progress_fill {
  position: absolute;
  inset: 0;
  background: var(--cs-line-on);
  transform: scaleX(0);
}

/* ---- Control pill, bottom center ---- */
.cs_pill {
  position: absolute;
  left: 50%;
  bottom: 40px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px;
  border-radius: 999px;
  background: var(--cs-pill-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
}

.cs_arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: none;
  background: var(--cs-circle);
  color: var(--cs-fg);
  cursor: pointer;
}

.cs_arrow:hover {
  background: var(--cs-circle-hover);
}

.cs_arrow:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

.cs_arrow_icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}

/* ---- Screen-reader-only live region ---- */
.cs_live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Outgoing text lines get lifted onto an absolute overlay inside the same
   element so the exit tween keeps running while the new line animates in.
   Declared LAST: it must win the cascade against the *_line rules above
   (equal specificity - source order decides). */
.cs_line_out {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  min-width: 100%;
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .cs_wrap {
    --cs-margin: 20px;
  }

  .cs_title {
    font-size: clamp(36px, 12vw, 64px);
    max-width: calc(100% - var(--cs-margin) * 2 - 60px);
  }

  .cs_index {
    display: none;
  }

  .cs_progress {
    top: 16px;
  }

  .cs_pill {
    bottom: 28px;
  }
}