/* ============================================================
   Athlete Name VB — Page Transition System
   Diagonal teal wipe, snappy 250ms
   ============================================================ */

/* The wipe overlay — two panels that form the diagonal slash */
.wipe-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: flex;
}

.wipe-panel {
  position: fixed;
  top: -5%;
  width: 55%;
  height: 110%;
  /* Resting: pushed far left — skewX(-6deg) on a left:0 panel still clips,
     so we use left:-60% + translateX(-200%) to guarantee nothing shows */
  left: -60%;
  transform: skewX(-6deg) translateX(-200%);
  transition: none;
  pointer-events: none;
}

.wipe-panel-1 {
  background: #1a9e96;
  z-index: 9999;
}

.wipe-panel-2 {
  background: #0d0f10;
  z-index: 9998;
}

/* Only animate when a wipe state class is active */
.wipe-overlay.wipe-in .wipe-panel,
.wipe-overlay.wipe-out .wipe-panel,
.wipe-overlay.wipe-cover .wipe-panel {
  transition: transform 0.25s cubic-bezier(0.7, 0, 0.3, 1);
}

/* ── WIPE COVER ─────────────────────────────────────────────
   Instant state (no transition) — panels ON screen.          */
.wipe-overlay.wipe-cover {
  pointer-events: all;
}
.wipe-overlay.wipe-cover .wipe-panel-1 {
  transform: skewX(-6deg) translateX(210%);
  transition: none;
}
.wipe-overlay.wipe-cover .wipe-panel-2 {
  transform: skewX(-6deg) translateX(200%);
  transition: none;
}
.wipe-overlay.wipe-cover .wipe-streak {
  transform: skewX(-6deg) translateX(1900%);
  transition: none;
}

/* ── WIPE IN ────────────────────────────────────────────────
   Exit animation — panels sweep left→right covering screen  */
.wipe-overlay.wipe-in {
  pointer-events: all;
}
.wipe-overlay.wipe-in .wipe-panel-1 {
  transform: skewX(-6deg) translateX(210%);
  transition: transform 0.25s cubic-bezier(0.7, 0, 0.3, 1);
  transition-delay: 0s;
}
.wipe-overlay.wipe-in .wipe-panel-2 {
  transform: skewX(-6deg) translateX(200%);
  transition: transform 0.25s cubic-bezier(0.7, 0, 0.3, 1);
  transition-delay: 0.03s;
}
.wipe-overlay.wipe-in .wipe-streak {
  transform: skewX(-6deg) translateX(1900%);
  transition: transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);
  transition-delay: 0s;
}

/* ── WIPE OUT ───────────────────────────────────────────────
   Entry animation — panels continue right, off screen       */
.wipe-overlay.wipe-out .wipe-panel-1 {
  transform: skewX(-6deg) translateX(420%);
  transition: transform 0.22s cubic-bezier(0.7, 0, 0.3, 1);
  transition-delay: 0s;
}
.wipe-overlay.wipe-out .wipe-panel-2 {
  transform: skewX(-6deg) translateX(440%);
  transition: transform 0.22s cubic-bezier(0.7, 0, 0.3, 1);
  transition-delay: 0.03s;
}
.wipe-overlay.wipe-out .wipe-streak {
  transform: skewX(-6deg) translateX(2600%);
  transition: transform 0.18s cubic-bezier(0.7, 0, 0.3, 1);
  transition-delay: 0s;
}

/* ── PAGE CONTENT ───────────────────────────────────────────*/
.page-content {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.2s ease 0.1s, transform 0.2s ease 0.1s;
}
.page-content.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── STREAK (resting) ───────────────────────────────────────
   No class active = snap back instantly, no transition.
   left: -60% matches the panels so skew overhang is off screen. */
.wipe-streak {
  position: fixed;
  top: -5%;
  height: 110%;
  width: 3px;
  background: rgba(255, 255, 255, 0.6);
  z-index: 10000;
  left: -60%;
  transform: skewX(-6deg) translateX(-200%);
  transition: none;
  pointer-events: none;
}

/* Only animate when a wipe state is active */
.wipe-overlay.wipe-in .wipe-streak,
.wipe-overlay.wipe-out .wipe-streak,
.wipe-overlay.wipe-cover .wipe-streak {
  transition: transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);
}