/* ----- exchnages section ----- */

.exchanges-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: clamp(180px, 18vw, 300px);
    background: linear-gradient(180deg, #30334b 0%, var(--pirate-navyblue) 28%, var(--pirate-navyblue) 72%, #30334b 100%);
}
.exchanges-title {
    position: relative;
    z-index: 1;
    color: var(--pirate-cloud);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.featured-exchange {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 900px; 
    background-image: linear-gradient(var(--pirate-deepblue) 10%, rgba(23, 22, 33, 0.8));
    margin: 70px auto 0px;
    text-align: center;
    padding: 60px 80px 70px;
    border-radius: 30px;
}
.featured-exchange > h2 {
    color: var(--pirate-doubloon);
    font-size: 48px;
    font-weight: 700;
    margin: 18px 0 60px;
}
.featured-exchange p {
    max-width: 670px;
    margin: 20px auto;
}
.featured-exchange .key-quote {
    color: #fff;
}
.featured-preview {
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 26px auto 38px;
}
.featured-preview img {
    display: block;
    width: 100%;
    border: 10px solid #2b2f3e;
    border-radius: 10px;
    filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.7));
    transition: border-color 0.5s ease-in-out;
}
.featured-preview:hover img,
.featured-preview:focus-visible img {
    border-color: var(--discord-color);
}
.featured-exchange .featured-logo {
    display: block;
    width: 150px;
    height: 150px;
    margin: auto;
}
.featured-download {
    margin-top: 20px;
}
@media screen and (max-width:800px) {
    .featured-exchange {
        padding: 60px 20px 50px;
    }
}

.exchange-bubbles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.exchange-bubbles span {
    --bubble-peak-opacity: 0.45;
    --bubble-late-opacity: 0.35;
    position: absolute;
    bottom: -90px;
    width: var(--bubble-size);
    height: var(--bubble-size);
    border: 1px solid rgba(180, 203, 232, 0.6);
    border-radius: 50%;
    box-shadow: inset -2px -2px 3px rgba(126, 172, 219, 0.15), 0 0 5px rgba(158, 191, 224, 0.12);
    opacity: 0;
    animation: exchange-bubble-rise 48s linear infinite;
}
.exchange-bubbles span:nth-child(1) { left: 4%; --bubble-size: 42px; --sway-1: 55px; --sway-2: -24px; --sway-3: 76px; --sway-4: -15px; animation-delay: 0s; }
.exchange-bubbles span:nth-child(2) { left: 89%; --bubble-size: 68px; --sway-1: -70px; --sway-2: 12px; --sway-3: -38px; --sway-4: 30px; animation-delay: -3s; }
.exchange-bubbles span:nth-child(3) { left: 14%; --bubble-size: 26px; --sway-1: -32px; --sway-2: 64px; --sway-3: -14px; --sway-4: 48px; animation-delay: -6s; }
.exchange-bubbles span:nth-child(4) { left: 80%; --bubble-size: 52px; --sway-1: 35px; --sway-2: -68px; --sway-3: 18px; --sway-4: -42px; animation-delay: -9s; }
.exchange-bubbles span:nth-child(5) { left: 7%; --bubble-size: 78px; --sway-1: 72px; --sway-2: -18px; --sway-3: 43px; --sway-4: -34px; animation-delay: -12s; }
.exchange-bubbles span:nth-child(6) { left: 92%; --bubble-size: 32px; --sway-1: -44px; --sway-2: 24px; --sway-3: -82px; --sway-4: 8px; animation-delay: -15s; }
.exchange-bubbles span:nth-child(7) { left: 20%; --bubble-size: 58px; --sway-1: -57px; --sway-2: 33px; --sway-3: -79px; --sway-4: 16px; animation-delay: -18s; }
.exchange-bubbles span:nth-child(8) { left: 77%; --bubble-size: 22px; --sway-1: 62px; --sway-2: -21px; --sway-3: 84px; --sway-4: -46px; animation-delay: -21s; }
.exchange-bubbles span:nth-child(9) { left: 2%; --bubble-size: 48px; --sway-1: 28px; --sway-2: 74px; --sway-3: -16px; --sway-4: 53px; animation-delay: -24s; }
.exchange-bubbles span:nth-child(10) { left: 86%; --bubble-size: 84px; --sway-1: -40px; --sway-2: -85px; --sway-3: 8px; --sway-4: -58px; animation-delay: -27s; }
.exchange-bubbles span:nth-child(11) { left: 11%; --bubble-size: 36px; --sway-1: 83px; --sway-2: -38px; --sway-3: 57px; --sway-4: -12px; animation-delay: -30s; }
.exchange-bubbles span:nth-child(12) { left: 94%; --bubble-size: 54px; --sway-1: -66px; --sway-2: -14px; --sway-3: -92px; --sway-4: 9px; animation-delay: -33s; }
.exchange-bubbles span:nth-child(13) { left: 27%; --bubble-size: 18px; --sway-1: 46px; --sway-2: -49px; --sway-3: 70px; --sway-4: -22px; animation-delay: -36s; }
.exchange-bubbles span:nth-child(14) { left: 71%; --bubble-size: 72px; --sway-1: -58px; --sway-2: 38px; --sway-3: -27px; --sway-4: 65px; animation-delay: -39s; }
.exchange-bubbles span:nth-child(15) { left: 8%; --bubble-size: 30px; --sway-1: -18px; --sway-2: 58px; --sway-3: 22px; --sway-4: 80px; animation-delay: -42s; }
.exchange-bubbles span:nth-child(16) { left: 89%; --bubble-size: 60px; --sway-1: -88px; --sway-2: 5px; --sway-3: -46px; --sway-4: -73px; animation-delay: -45s; }
.exchange-bubbles span:nth-child(3n) {
    --bubble-peak-opacity: 0.34;
    --bubble-late-opacity: 0.26;
    background: radial-gradient(circle at 30% 25%, rgba(210, 229, 248, 0.1), transparent 72%);
    filter: blur(0.6px);
}
.exchange-bubbles span:nth-child(3n + 2) {
    --bubble-peak-opacity: 0.24;
    --bubble-late-opacity: 0.18;
    background: radial-gradient(circle at 30% 25%, rgba(210, 229, 248, 0.08), transparent 72%);
    filter: blur(1.4px);
}
@keyframes exchange-bubble-rise {
    0% { bottom: -90px; transform: translateX(0); opacity: 0; }
    8% { opacity: var(--bubble-peak-opacity); }
    20% { transform: translateX(var(--sway-1)); }
    40% { transform: translateX(var(--sway-2)); }
    60% { transform: translateX(var(--sway-3)); }
    80% { transform: translateX(var(--sway-4)); opacity: var(--bubble-late-opacity); }
    100% { bottom: 100%; transform: translateX(0); opacity: 0; }
}

.shipwreck-seafloor {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: clamp(140px, 14vw, 280px);
    background: url("../img/dividers/shipwreck-seafloor.svg") right bottom / cover no-repeat;
    pointer-events: none;
}
footer {
    background-color: #1d1d1d;
}

/* ----- other exchanges ----- */
.other-exchanges {
    margin-top: 0;
}
.other-exchanges h2 {
    color: var(--pirate-doubloon);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
}
.featured-exchange .exchange-intro {
    max-width: 650px;
    margin: 0 auto;
    color: var(--pirate-cloud);
}
.disclaimer {
    font-style: italic;
    font-size: 14px;
    font-weight: normal;
    color: var(--pirate-fog);
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
.disclaimer span {
    display: block;
}

.listings {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 15px;
    margin: 65px auto 105px;
}
.listings a {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #587cff2a;
    height: 80px;
    width: 290px;
    padding: 15px 25px;
    border: 1px solid transparent;
}
.listings a:hover {
    border: 1px solid var(--pirate-neon)
}
.listings a.light-background {
    background-color: #eef1f7;
}
.listings img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media screen and (max-width:800px) {
    .featured-exchange > h2 { font-size: 38px; }
    .listings { margin: 50px auto 90px; }
}

@media (prefers-reduced-motion: reduce) {
    .exchange-bubbles span { display: none; }
}