/* ---- Theme tokens ---- */
[data-theme="exchange-home"] {
    /* palette (from the prototype's redesign constants) */
    --home-blue: var(--exc-blue);
    --home-blue-deep: var(--exc-sapphire);
    --home-teal: #0fb5a8;
    --home-ink: #0e1116;
    --home-text: var(--exc-ink);
    --home-muted: #5a6473;
    --home-line: var(--exc-cool-grey);
    --home-grey: var(--exc-grey-blue);
    --home-card-grad: linear-gradient(155deg, var(--exc-blue) 0%, var(--exc-purple) 100%);
    --home-teal-grad: linear-gradient(180deg, #19c6b8 0%, #0fb5a8 100%);
    --home-sig-purple: var(--exc-purple);
    --home-sig-grad: linear-gradient(120deg, var(--exc-blue) 0%, var(--exc-purple) 100%);
    --home-sig-grad-vert: linear-gradient(180deg, var(--exc-blue) 0%, var(--exc-purple) 100%);

    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--home-text);
    /* Soft paper, not pure white — the full-bleed page surface glares less. */
    background: #f7f8fb;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* This wrapper contains every home section, so clipping here keeps any
       sideways excess — notably the reveal pre-states that slide in from
       ±48-56px outside the frame — from widening the page's scroll area.
       `clip` doesn't create a scroll container; `hidden` is the fallback. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* 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: #7c3aed;
}

[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, #how, #trust, #contact, #process, #why, #solutions) {
    scroll-margin-top: 90px;
}

/* Signature-gradient headline fill; size/casing stay with the component.
   The bottom padding keeps descenders inside the clipped background. */
[data-theme="exchange-home"] .home-grad-text {
    background: var(--home-sig-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-bottom: 0.08em;
}

/* 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: var(--space-6);
    padding-inline-end: var(--space-6);
}

/* ---- 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-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-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;
}

/* ---- Hero silhouette fallback (global: stylance does not rewrite class
        names inside @supports blocks). Browsers without clip-path: shape()
        drop hero.css's shape() declaration and get this stretched SVG mask
        instead — same silhouette drawn at a 1272×620 reference stage, so
        the px measures (ticker height) scale proportionally instead of
        staying absolute. ---- */
@supports not (clip-path: shape(from 0px 0px, line to 100% 100%)) {
    [data-theme="exchange-home"] .home-hero-scene {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,39 L720,39 L748,0 L1000,0 L1000,600 L0,600 Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,39 L720,39 L748,0 L1000,0 L1000,600 L0,600 Z'/%3E%3C/svg%3E");
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
}

/* ---- Keyframes (global: exchange-home page only) ---- */
@keyframes home-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ---- 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-infra-head {
        grid-template-columns: 1fr !important;
        gap: 2.25rem !important;
    }
    [data-theme="exchange-home"] .home-infra-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        row-gap: var(--space-8) !important;
    }
    [data-theme="exchange-home"] .home-contact-card {
        grid-template-columns: 1fr !important;
        gap: 2.25rem !important;
        padding: 2.25rem !important;
    }
}
@media (max-width: 560px) {
    [data-theme="exchange-home"] .home-infra-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;
    }
}