/* ==========================================================================
   Transition layers — slide seam/shade, wipe, slats, expand, paint, slider
   ========================================================================== */

/* All transition layers swallow clicks while they run */
.fx-shade, .fx-seam, .fx-wipe, .fx-slats, .fx-expand, .fx-paint, .fx-slider { pointer-events: auto; }

/* Slide ------------------------------------------------------------------- */
.fx-shade {
  position: absolute; inset: 0; z-index: 2;
  background: var(--ink);
  opacity: 0;
}
.fx-seam {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 4;
  width: 28px;
  will-change: transform;
}
.fx-seam i {
  position: absolute; inset: 0;
  background: var(--lime);
  border-left: var(--bw) solid var(--ink);
  border-right: var(--bw) solid var(--ink);
  background-image: repeating-linear-gradient(180deg, transparent 0 22px, rgba(11, 11, 11, .14) 22px 24px);
}
/* soft shadow cast onto the outgoing page */
.fx-seam::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 70px;
  background: linear-gradient(270deg, rgba(11, 11, 11, .28), transparent);
}
.fx-seam.is-rev::after { right: auto; left: 100%; background: linear-gradient(90deg, rgba(11, 11, 11, .28), transparent); }

/* Wipe -------------------------------------------------------------------- */
.fx-wipe { position: absolute; inset: 0; z-index: 10; overflow: hidden; }
.fx-wipe__ink, .fx-wipe__lime { position: absolute; inset: 0; will-change: transform; }
.fx-wipe__ink { background: var(--ink); }
.fx-wipe__lime {
  background: var(--lime);
  background-image: var(--bricks-lime);
  display: grid; place-items: center;
  overflow: hidden;
}
.fx-wipe__label {
  font-size: clamp(80px, 16vw, 260px);
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: -.01em;
}

/* Slats ------------------------------------------------------------------- */
.fx-slats { position: absolute; inset: 0; z-index: 10; overflow: hidden; }
.fx-slat {
  position: absolute; left: 0; right: 0;
  background: var(--ink);
  transform: scaleX(0);
  will-change: transform;
}
.fx-slat.is-lime { background: var(--lime); }

/* Expand ------------------------------------------------------------------ */
.fx-expand {
  position: fixed; z-index: 10;
  border: var(--bw) solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}

/* Paint ------------------------------------------------------------------- */
.fx-paint { position: fixed; inset: 0; z-index: 10; }
.fx-paint__sheet { position: absolute; inset: 0; will-change: transform; }
.fx-paint__sheet.is-solid { background: var(--lime); }
.fx-paint.is-ink .fx-paint__sheet.is-solid { background: var(--ink); }
.fx-paint__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-brush { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fx-brush--bristle { stroke: rgba(11, 11, 11, .09); }
.fx-paint.is-ink .fx-brush--bristle { stroke: rgba(255, 255, 255, .07); }
.fx-paint__drips { position: absolute; left: 0; top: 100%; display: block; width: 100%; margin-top: -1px; }
.fx-paint__drips.is-flipped { top: auto; bottom: 100%; margin: 0 0 -1px; transform: scaleY(-1); }

/* Brand moment used by paint + slider */
.fx-brand {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  color: var(--ink);
  visibility: hidden;
  text-align: center;
}
.fx-brand.is-on { visibility: visible; }
.fx-brand__mark { color: var(--ink); }
.fx-brand__word { display: flex; gap: .22em; font-size: clamp(64px, 11vw, 168px); line-height: .82; }
.fx-brand__word > span { display: inline-block; }
.fx-brand__sub { font: 600 13px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.fx-paint.is-ink .fx-brand, .fx-slider__panel.is-ink .fx-brand { color: var(--paper); }
.fx-paint.is-ink .fx-brand__mark, .fx-slider__panel.is-ink .fx-brand__mark { color: var(--paper); }
.fx-slider__panel.is-ink .fx-brand__sub { color: var(--lime); }

/* Slider deck ------------------------------------------------------------- */
.fx-slider { position: fixed; inset: 0; z-index: 10; overflow: hidden; }
.fx-slider__panel { position: absolute; inset: 0; transform: translateX(100%); will-change: transform; }
.fx-slider__panel.is-lime { background: var(--lime); background-image: var(--bricks-lime); }
.fx-slider__panel.is-paper { background: var(--paper); border-left: var(--bw) solid var(--ink); }
.fx-slider__panel.is-ink { background: var(--ink); background-image: var(--bricks-ink); border-left: var(--bw) solid var(--lime); }

/* Skip control for the landing entry */
.fx-skip {
  position: absolute; right: 24px; bottom: 24px; z-index: 30;
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--lime);
  border: var(--bw) solid var(--lime);
  font: 700 13px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  pointer-events: auto;
}
.fx-skip:focus-visible { outline: 2.5px solid var(--paper); outline-offset: 3px; }