/* ============================================================
   TRÁNSITO POR EL ATLAS — riel de secciones + interludios animados
   ============================================================ */

/* ── Section rail (right) ──────────────────────────── */
.rail {
    position: fixed;
    right: clamp(10px, 1.6vw, 26px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
}
.rail::before {
    content: '';
    position: absolute; left: 50%; top: 0; bottom: 0;
    width: 1px; transform: translateX(-50%);
    background: var(--hairline-strong);
}
.rail::after {
    content: '';
    position: absolute; left: 50%; top: 0;
    width: 1px; transform: translateX(-50%);
    height: var(--rail-p, 0%);
    background: var(--accent);
    transition: height 0.2s linear;
}
.rail-node {
    position: relative;
    width: 26px; height: 30px;
    display: grid; place-items: center;
    cursor: pointer;
    background: none; border: 0; padding: 0;
    z-index: 1;
}
.rail-node i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--hairline-strong);
    transition: transform 0.35s var(--spring), background 0.3s var(--ease);
}
.rail-node:hover i { transform: scale(1.5); background: var(--accent); }
.rail-node.active i { background: var(--accent); transform: scale(1.7); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.rail-label {
    position: absolute;
    right: 30px; top: 50%; transform: translateY(-50%) translateX(6px);
    white-space: nowrap;
    font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--on-light); background: var(--card-solid);
    border: 1px solid var(--hairline); border-radius: 100px;
    padding: 0.32rem 0.7rem; box-shadow: var(--sh-sm);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.4s var(--spring);
}
.rail-node:hover .rail-label,
.rail-node.active .rail-label { opacity: 1; transform: translateY(-50%) translateX(0); }
.rail-node.active .rail-label { color: var(--accent-dk); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
@media (max-width: 1100px) { .rail { display: none; } }

/* ── Interludios (transiciones entre secciones) ─────── */
.transit {
    position: relative;
    height: 168px;
    overflow: hidden;
    isolation: isolate;
}
.transit-horizon {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    display: block;
}
.transit-horizon .dune { fill: color-mix(in srgb, var(--accent) 9%, transparent); }
.transit-horizon .dune2 { fill: color-mix(in srgb, var(--accent) 6%, transparent); }
.transit-horizon .ridge { fill: none; stroke: color-mix(in srgb, var(--accent) 40%, transparent); stroke-width: 1.5; stroke-dasharray: 4 7; }
[data-theme="dark"] .transit-horizon .ridge { stroke: color-mix(in srgb, var(--accent) 55%, transparent); }

/* paw-print trail revealed left→right by scroll */
.transit-trail {
    position: absolute; left: 0; right: 0; bottom: 44px; height: 22px;
    z-index: 1; overflow: hidden;
}
.transit-trail-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: calc(var(--p, 0) * 100%);
    overflow: hidden;
}
.transit-pads {
    position: absolute; left: 0; bottom: 0; height: 100%;
    width: 100vw;
    display: flex; align-items: center; gap: 52px; padding-left: 40px;
}
.transit-pad { width: 9px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 38%, transparent); flex-shrink: 0; }
.transit-pad:nth-child(even) { transform: translateY(7px); }

/* the trotting mascot */
.transit-dog {
    position: absolute; bottom: 30px; left: 0;
    width: 78px; height: 82px;
    z-index: 2;
    transform: translateX(var(--x, 0px));
    will-change: transform;
}
.transit-dog-inner { width: 100%; height: 100%; animation: transitHop 0.62s ease-in-out infinite; transform-origin: bottom center; }
@keyframes transitHop { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } }
.transit-dog .m-dog { width: 100%; }

/* upcoming-section label */
.transit-label {
    position: absolute; right: clamp(1.2rem, 5vw, 4rem); top: 50%;
    transform: translateY(-50%) translateX(14px);
    z-index: 1;
    text-align: right;
    opacity: 0;
    transition: opacity 0.5s var(--ease), transform 0.6s var(--cinema);
}
.transit.in-band .transit-label { opacity: 1; transform: translateY(-50%) translateX(0); }
.transit-label .num { display: block; font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-dk); margin-bottom: 0.3rem; }
.transit-label .nm { font-family: var(--f-display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -0.02em; color: var(--on-light); line-height: 1; font-variation-settings: "opsz" 72,"SOFT" 100,"WONK" 1; }
.transit-label .nm::after { content: ' →'; font-style: normal; color: var(--accent-dk); }

[data-mascots="off"] .transit-dog, [data-mascots="off"] .transit-trail { display: none; }
[data-motion="reduced"] .transit-dog-inner { animation: none; }
@media (prefers-reduced-motion: reduce) { .transit-dog-inner { animation: none; } }
@media (max-width: 760px) { .transit { height: 120px; } .transit-dog { width: 58px; height: 62px; } }