/* ==========================================================================
   Next-page navigator — sits directly above the footer on every main page
   ========================================================================== */

.nextp {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: clamp(4rem, 11vw, 9rem) 0;
  isolation: isolate;
  /* The band sits OUTSIDE <main>, so it misses the stacking context that lifts
     page content over the homepage's fixed orbit layers (stage z10, copy z20).
     Without this the orbit's headline paints straight through it. */
  z-index: 100;
}

/* The page's own image carries the band. It is part of the design rather than a
   hover reward, so it is present at rest and simply deepens on approach. */
.nextp__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .42;
  transition: opacity .7s cubic-bezier(.2,.6,.2,1);
}
/* A scrim under the type — the renders are bright enough that a white headline
   would otherwise lose its edges over the glazing. */
.nextp__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--footer-bg) 78%, transparent) 0%,
    color-mix(in srgb, var(--footer-bg) 46%, transparent) 46%,
    color-mix(in srgb, var(--footer-bg) 18%, transparent) 100%);
}
.nextp__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* --px is written by JS from the pointer, so the image drifts against the
     cursor — the band feels like a window rather than a flat panel */
  transform: scale(1.14) translateX(calc((var(--px, .5) - .5) * -3.5%));
  transition: transform .9s cubic-bezier(.2,.6,.2,1);
}
.nextp:hover .nextp__media,
.nextp:focus-visible .nextp__media { opacity: .62; }
.nextp:hover .nextp__media img { transform: scale(1.02) translateX(calc((var(--px, .5) - .5) * -3.5%)); }

.nextp__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}


.nextp__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 9vw, 8rem);
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
  transition: transform .7s cubic-bezier(.2,.6,.2,1);
}
.nextp:hover .nextp__title { transform: translateX(clamp(6px, 1.4vw, 22px)); }

/* Outlined duplicate trailing the solid one — it slides out from underneath on
   hover, so the word appears to peel apart. */
.nextp__ghost {
  position: absolute;
  left: clamp(1.5rem, 4vw, 4rem);
  top: 50%;
  z-index: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 9vw, 8rem);
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--footer-text) 34%, transparent);
  transform: translateY(-50%);
  opacity: 0;
  transition: transform .8s cubic-bezier(.2,.6,.2,1), opacity .6s ease;
  pointer-events: none;
}
.nextp:hover .nextp__ghost {
  opacity: 1;
  transform: translateY(-50%) translateX(clamp(14px, 3.4vw, 54px));
}

.nextp__arrow {
  flex: none;
  width: clamp(56px, 7vw, 96px);
  height: clamp(56px, 7vw, 96px);
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--footer-text) 30%, transparent);
  border-radius: 50%;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  overflow: hidden;
  transition: background .45s ease, border-color .45s ease, color .45s ease;
}
.nextp:hover .nextp__arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--footer-bg);
}
/* the glyph exits right and re-enters from the left — a continuous travel */
.nextp__arrow span { display: block; transition: transform .5s cubic-bezier(.7,0,.3,1); }
.nextp:hover .nextp__arrow span { animation: nextp-travel .55s cubic-bezier(.7,0,.3,1); }
@keyframes nextp-travel {
  0%   { transform: translateX(0); }
  49%  { transform: translateX(160%); }
  50%  { transform: translateX(-160%); }
  100% { transform: translateX(0); }
}

@media (max-width: 700px) {
  .nextp__inner { gap: 1.2rem; }
  .nextp__ghost { display: none; }   /* too tight to read two words stacked */
}

@media (prefers-reduced-motion: reduce) {
  .nextp__media, .nextp__media img, .nextp__title, .nextp__ghost,
  .nextp__arrow, .nextp__arrow span { transition: none; animation: none; }
  .nextp:hover .nextp__title { transform: none; }
}