@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,500;9..40,700&display=swap');

/* ========================================
   SHARED SIDE NAV
   collapsible drawer sliding in from the right.
   Three staggered slides in the wave palette:
   deep #0284c7 (front) -> mid #0ea5e9 ->
   light #38bdf8 (back). Slide cascade is the
   only animation — links ride the front panel.
   Toggle fixed top-right.
   ======================================== */

.sidenav-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    left: auto;
    z-index: 210;

    width: 46px;
    height: 46px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    background: #0284c7;
    border: 2px solid #ffffff;
    border-radius: 12px;
    cursor: pointer;

    box-shadow:
        0 8px 24px rgba(2, 132, 199, .45);
}

/*
 * Wave icon: three rolling strokes that fade
 * out as the X close mark fades in.
 */

.sidenav-waves {
    width: 24px;
    height: 18px;

    transition:
        opacity .25s ease,
        transform .35s cubic-bezier(.22, 1, .36, 1);
}

.sidenav-waves path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    will-change: transform;
}

.sidenav-toggle.open .sidenav-waves {
    opacity: 0;
    transform: scale(.7);
}

.sidenav-x {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 24px;
    height: 3px;

    border-radius: 3px;
    background: #ffffff;

    opacity: 0;

    transition:
        opacity .25s ease;
}

.sidenav-x-1 {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}

.sidenav-x-2 {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}

.sidenav-toggle.open .sidenav-x {
    opacity: 1;
}

/* ---------- Backdrop ---------- */

.sidenav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 150;

    background: rgba(2, 132, 199, .35);
    opacity: 0;
    pointer-events: none;

    transition: opacity .35s ease;
}

.sidenav-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.sidenav-backdrop[hidden] {
    display: none;
}

/* ---------- Drawer wrapper ----------
   Transparent; the slides do the moving. */

.sidenav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 200;

    width: min(320px, 84vw);

    pointer-events: none;
}

.sidenav.open {
    pointer-events: auto;
}

/* ---------- Wave slides ----------
   Front slide carries the links; mid and back
   trail behind with delays for the cascade.
   Base delays run on close (front leaves first);
   the .open overrides above reverse them so the
   cascade is visible on open too. */

.sidenav-slide {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;

    transform: translateX(115%);

    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1);
}

.sidenav.open .sidenav-slide {
    transform: translateX(0);
}

/*
 * Opening cascade: the back slides lead so each
 * wave color is visible at the leading edge while
 * the stack travels in (front arrives last).
 * (Closing uses the base delays below, where the
 * front leaves first and reveals the trail.)
 */

.sidenav.open .sidenav-slide-1 {
    transition-delay: .14s;
}

.sidenav.open .sidenav-slide-2 {
    transition-delay: .07s;
}

.sidenav.open .sidenav-slide-3 {
    transition-delay: 0s;
}

.sidenav-slide-1 {
    background: #0284c7;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .25rem;

    padding: 5rem 2.25rem 2rem 2rem;

    transition-delay: 0s;
}

.sidenav-slide-2 {
    background: #0ea5e9;

    transition-delay: .07s;
}

.sidenav-slide-3 {
    background: #38bdf8;

    transition-delay: .14s;
}

.sidenav-slide-1 a {
    color: #ffffff;
    font-family:
        'DM Sans',
        sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;

    padding: .65rem 0;
}

.sidenav-slide-1 a:hover {
    text-decoration: underline;
    text-decoration-color: #245f9c;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

/* Anchor targets sit below the fixed toggle. */

#waterways,
#artists,
#behind {
    scroll-margin-top: 4rem;
}

@media (prefers-reduced-motion: reduce) {
    .sidenav-slide,
    .sidenav-waves,
    .sidenav-x,
    .sidenav-backdrop {
        transition: none;
    }
}