/* ---- Theme tokens ---- */
[data-theme="exchange-home"] {
    /* palette (from the prototype's redesign constants) */
    --home-blue: #4d64f6;
    --home-blue-deep: #3a50e0;
    --home-teal: #0fb5a8;
    --home-teal-bright: #19c6b8;
    --home-teal-light: #2bd0c2;
    --home-ink: #0e1116;
    --home-text: #1a1f29;
    --home-muted: #5a6473;
    --home-line: #e4e8ef;
    --home-grey: #f4f6f9;
    --home-card-grad: linear-gradient(155deg, #4d64f6 0%, #3a50e0 100%);
    --home-grey-grad: linear-gradient(
        165deg,
        #dae8f5 0%,
        #e9f0f7 30%,
        #edf0f4 62%,
        #e5e9ee 100%
    );
    --home-teal-grad: linear-gradient(180deg, #19c6b8 0%, #0fb5a8 100%);

    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.45;
    color: var(--home-text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Heading defaults at element specificity (0,0,1): later in the cascade
   than Bootstrap's reboot so these win, while any component class still
   overrides them. */
:where([data-theme="exchange-home"]) :is(h1, h2, h3, h4) {
    font-family: var(--sans);
    margin: 0;
    line-height: 1.05;
    color: var(--home-text);
}

[data-theme="exchange-home"] ::selection {
    background: #e2edfa;
    color: #011f45;
}

[data-theme="exchange-home"] :focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(63, 130, 201, 0.38);
    border-radius: 4px;
}

/* Native fragment scrolling (nav/footer "/#how", "/#contact" links) stops
   short of the fixed nav pill, matching scroll_to.rs's 80px offset. */
[data-theme="exchange-home"] :is(#top, #markets, #how, #trust, #contact) {
    scroll-margin-top: 90px;
}

/* Shared content column — aligns every section with the nav pill.
   margin-inline only, so component classes keep their vertical margins. */
[data-theme="exchange-home"] .home-wrap {
    max-width: 1320px;
    margin-inline-start: auto;
    margin-inline-end: auto;
    padding-inline-start: 24px;
    padding-inline-end: 24px;
}

/* ---- Scroll-reveal contract (toggled by exchange-reveal.js — must
        stay global: stylance would hash the class names). Matches the
        prototype: fade + 18px lift, optional --reveal-delay. ---- */
[data-theme="exchange-home"] .exc-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 760ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
[data-theme="exchange-home"] .exc-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Reveal variants (the prototype's rd-* reveal overrides). */
[data-theme="exchange-home"] .exc-reveal.home-reveal-card {
    transform: translateY(26px) scale(0.975);
    transition:
        opacity 820ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-theme="exchange-home"] .exc-reveal.home-reveal-step {
    transform: translateY(54px);
    transition:
        opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-theme="exchange-home"] .exc-reveal.home-reveal-art {
    transform: translateX(-48px);
    transition:
        opacity 840ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 840ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-theme="exchange-home"] .exc-reveal.home-reveal-slide {
    transform: translateX(56px);
    transition:
        opacity 820ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="exchange-home"]
    .exc-reveal.is-in:is(
        .home-reveal-card,
        .home-reveal-step,
        .home-reveal-art,
        .home-reveal-slide
    ) {
    transform: none;
}

/* Infrastructure line-icons: draw on when the card is revealed. */
[data-theme="exchange-home"] .home-infra-ic .ln {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
[data-theme="exchange-home"] .exc-reveal.is-in .home-infra-ic .ln {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1100ms cubic-bezier(0.62, 0, 0.35, 1);
}
[data-theme="exchange-home"] .exc-reveal.is-in .home-infra-ic .ln:nth-child(2) {
    transition-delay: 140ms;
}
[data-theme="exchange-home"] .exc-reveal.is-in .home-infra-ic .ln:nth-child(3) {
    transition-delay: 250ms;
}
[data-theme="exchange-home"] .exc-reveal.is-in .home-infra-ic .ln:nth-child(4) {
    transition-delay: 340ms;
}
[data-theme="exchange-home"] .exc-reveal.is-in .home-infra-ic .ln:nth-child(5) {
    transition-delay: 430ms;
}
[data-theme="exchange-home"] .exc-reveal.is-in .home-infra-ic .ln:nth-child(6) {
    transition-delay: 520ms;
}

/* ---- Keyframes (global: exchange-home page only) ---- */
@keyframes home-glow-pulse {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.95);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.06);
    }
}
@keyframes home-chip-a {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-11px);
    }
}
@keyframes home-chip-b {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(9px);
    }
}
@keyframes home-chip-c {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
}
@keyframes home-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
@keyframes home-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ---- Responsive grid collapses (the prototype's rd-* media rules;
        !important mirrors the prototype so they win over the
        component-level Stylance declarations). ---- */
@media (max-width: 820px) {
    [data-theme="exchange-home"] .home-hero-card {
        grid-template-columns: 1fr !important;
    }
    [data-theme="exchange-home"] .home-hero-cube {
        display: none !important;
    }
    [data-theme="exchange-home"]
        :is(.home-markets-grid, .home-built-grid, .home-infra-head) {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    [data-theme="exchange-home"]
        :is(.home-stats-grid, .home-steps-grid, .home-infra-grid) {
        grid-template-columns: repeat(2, 1fr) !important;
        row-gap: 32px !important;
    }
    [data-theme="exchange-home"] .home-market-cards {
        grid-template-columns: 1fr !important;
    }
    [data-theme="exchange-home"] .home-contact-card {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
        padding: 36px !important;
    }
}
@media (max-width: 560px) {
    [data-theme="exchange-home"]
        :is(.home-steps-grid, .home-infra-grid, .home-stats-grid) {
        grid-template-columns: 1fr !important;
    }
    [data-theme="exchange-home"] .home-contact-form {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Reduced motion: no reveals, no ambient animation ---- */
@media (prefers-reduced-motion: reduce) {
    [data-theme="exchange-home"] .exc-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    [data-theme="exchange-home"] .home-anim {
        animation: none !important;
    }
    [data-theme="exchange-home"] .home-infra-ic .ln {
        stroke-dashoffset: 0 !important;
        transition: none !important;
    }
}