/* ─────────────────────────────────────────────────────────────
   CLIMB TRANSITION · mountains sweep over the screen between stages
   ───────────────────────────────────────────────────────────── */
#climb { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
#climb .ridge { position: absolute; left: -5vw; top: 0; width: 110vw; height: 170vh; will-change: transform; transform: translateY(110vh); }
#climb .cl-back { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 45%, #2a1460, #120830 60%, #0a0518); }
#climb .cl-speed { position: absolute; inset: -10% 0; opacity: 0; background: repeating-linear-gradient(90deg, transparent 0 37px, rgba(255,236,210,.32) 37px 38.5px, transparent 38.5px 83px, rgba(255,170,220,.22) 83px 84px, transparent 84px 131px);
  -webkit-mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
#climb .puff { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(236,190,255,.55), rgba(170,110,230,.25) 45%, transparent 70%); filter: blur(10px); opacity: 0; }
#climb .cl-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,240,215,.9), rgba(255,120,190,.35) 40%, transparent 75%); opacity: 0; mix-blend-mode: screen; }
#climb .cl-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; opacity: 0; width: 96vw; }
.cl-step { font: italic 800 clamp(.8rem, 1.4vw, 1rem)/1 var(--f-ui); letter-spacing: .42em; color: var(--gold-soft); margin: 0; padding: 8px 22px; background: linear-gradient(90deg, transparent, rgba(43,13,82,.85) 15%, rgba(43,13,82,.85) 85%, transparent); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.cl-step b { font: 400 1.25em/1 var(--f-display); color: #fff; letter-spacing: .06em; }
.cl-name { position: relative; margin: 0; align-self: center; text-align: center; font: 400 clamp(2.4rem, 10vw, 8.4rem)/1 var(--f-display); letter-spacing: .04em; color: transparent; -webkit-text-stroke: clamp(5px, .9vw, 11px) #2b0d52; filter: drop-shadow(0 6px 0 #14052b) drop-shadow(0 0 30px rgba(255,79,160,.55)); white-space: nowrap; }
.cl-name::after { content: attr(data-l); position: absolute; left: 0; top: 0; -webkit-text-stroke: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%) no-repeat, linear-gradient(180deg, #fff 0%, #fff3d6 34%, #ffd679 48%, #f3a93c 53%, #ffe7a6 60%, #ffc6ea 82%, #ff8fcf 100%);
  background-size: 260% 100%, 100% 100%; background-position: 170% 0, 0 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
#climb.run .cl-name::after { animation: clShine 1s .35s ease-out forwards; }
@keyframes clShine { to { background-position: -70% 0, 0 0; } }
.cl-sub { margin: 0; font: italic 700 clamp(.9rem, 1.8vw, 1.25rem)/1.2 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: #fff4e0; text-shadow: 0 2px 0 #1c0838, 0 0 12px rgba(16,5,36,.9); }
.cl-track { position: relative; width: min(560px, 80vw); height: 34px; margin-top: 10px; }
.cl-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, rgba(245,220,164,.55) 0 8px, transparent 8px 14px); }
.cl-track .done { position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; background: linear-gradient(90deg, var(--magenta), var(--gold-soft)); box-shadow: 0 0 10px var(--gold); }
.cl-track .node { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; transform: rotate(45deg); border: 2px solid var(--gold); background: #1b0f3d; transition: background .3s, box-shadow .3s; }
.cl-track .node.lit { background: var(--gold-soft); box-shadow: 0 0 14px var(--gold); }
.cl-track .climber { position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; z-index: 1;
  background: conic-gradient(from 45deg, transparent 0 22%, #fff6d6 25%, transparent 28% 47%, #fff6d6 50%, transparent 53% 72%, #fff6d6 75%, transparent 78% 97%, #fff6d6 100%);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 64%); mask: radial-gradient(circle, #000 10%, transparent 64%); filter: drop-shadow(0 0 8px #ffd27a); }
.cl-track .climber::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: #fff; }
.cl-dir { margin: 0; font: italic 800 .74rem/1 var(--f-ui); letter-spacing: .36em; color: var(--mist); }