/* ─────────────────────────────────────────────────────────────
   OSMO PORT — "curved-wipe-page-transition"
   slug: curved-wipe-page-transition
   source: osmo/resources/curved-wipe-page-transition/style.css
   demo:   https://osmo-curved-wipe-transition.webflow.io/

   Copied VERBATIM. Geometry (panel top:100%, curve blocks 125%/500%,
   border-radius 50%, transform-origins, 1px seam overlap) untouched.
   Deviations, colour + stacking only:
     · .transition z-index 100 → 10000  (must sit above the nav at z 100 and
       above the pre-cover layer html.wipe-covering::before at z 9999)
     · .transition__panel color #201d1d → house ink   #1B1714
     · .transition__logo  color #f4f4f4 → house bone   #F5F0E8
     · the logo is the typographic brand lockup "Awear of Love" — same
       Fraunces italic 300 lockup as .nav__brand (shared/nav.css), set at
       display optical size (opsz 144), bone on ink. The osmo demo inlined
       a 4-path wordmark SVG animated per-path; here 3 word elements
       (Awear / of / Love) restore that exact per-element yPercent stagger
       instead of collapsing it into one masked mark.
   ───────────────────────────────────────────────────────────── */

.transition {
  z-index: 10000;
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: clip;
}

.transition__panel {
  color: var(--transition-ink, #1B1714);
  background-color: currentColor;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
}

.transition__panel-top {
  transform-origin: bottom;
  flex-flow: column;
  align-items: center;
  width: 100%;
  height: 0%;
  display: flex;
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  overflow: hidden;
}

.transition__panel-bottom {
  transform-origin: top;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 0%;
  display: flex;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  overflow: hidden;
}

.transition__panel-circle {
  aspect-ratio: auto;
  background-color: currentColor;
  border-radius: 50%;
  width: 125%;
  height: 500%;
  position: absolute;
}

.transition__logo {
  color: var(--transition-logo, #F5F0E8);
  opacity: 0;
  display: flex;
  align-items: baseline;
  gap: 0.32em;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

/* typographic wordmark — same Fraunces italic lockup as .nav__brand, at
   display optical size; each word is its own [data-transition-logo-path]
   element so the leave/enter timelines' stagger animates word-by-word */
.transition__logo-word {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(34px, 5.5vw, 76px);
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: currentColor;
}

/* reload-adaptation: the overlay only exists while a transition runs. */
.transition[hidden] { display: none; }