/* Modulus Seventeen home page: the hero (copy and rotating words) and its diagram of SELL + BUY with the app cards.
   Shared tokens, header, buttons and footer live in base.css; the other home sections in sections.css. */

/* ---------- Hero (1890:5367) ---------- */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    padding: 64px var(--gutter) 0;
    overflow-x: clip;   /* nothing in the hero may widen the page */
}

.hero > *:not(.hero-grid) {
    position: relative;
}

/* faint 100px grid behind the hero (Figma "Mask group" 1890:3865) */
.hero-grid {
    position: absolute;
    top: 110px;
    left: 50%;
    width: 944px;
    height: 944px;
    margin-left: -472px;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 100px 100px;
    background-position: 72px 72px;
    -webkit-mask-image: radial-gradient(circle closest-side, #000 35%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 35%, transparent 100%);
}

.hero-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, calc(16px + 8 * (100vw - 400px) / 1040), 24px);
    text-align: center;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, calc(8px + 8 * (100vw - 400px) / 1040), 16px);
    padding: clamp(4px, calc(4px + 6 * (100vw - 400px) / 1040), 10px) clamp(8px, calc(8px + 12 * (100vw - 400px) / 1040), 20px);
    border: 1px solid var(--sell-bright);
    border-radius: 48px;
    background: var(--white);
    filter: drop-shadow(2px 2px 0 var(--sell-bright));
    font-size: clamp(12px, calc(12px + 4 * (100vw - 400px) / 1040), 16px);
    line-height: 1;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.hero-pill-brands {
    font-weight: 500;
    color: var(--body);
}

.hero-pill-brands .plus {
    color: rgba(82, 82, 82, 0.38);
}

.hero-pill-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 18px;
}

.hero-pill-divider > span {
    position: relative;
    flex: none;
    width: 18px;
    height: 0;
    transform: rotate(90deg);
}

.hero-pill-divider img {
    position: absolute;
    inset: -0.5px -2.78%;
    width: auto;
    height: auto;
}

.hero-pill-muted {
    color: rgba(82, 82, 82, 0.65);
}

.hero-pill-accent {
    font-weight: 500;
    color: var(--sell-bright);
}

.hero-title {
    font-weight: 600;
    font-size: clamp(35px, calc(35px + 35 * (100vw - 400px) / 1040), 70px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.hero-tagline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, calc(8px + 8 * (100vw - 400px) / 1040), 16px);
}

.tagline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(25px, calc(25px + 20 * (100vw - 400px) / 1040), 45px);
    line-height: 1.1;
    letter-spacing: -0.05em;
    color: var(--muted);
}

.serif strong {
    font-weight: 600;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 79px;
    font-size: clamp(20px, calc(20px + 15 * (100vw - 400px) / 1040), 35px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    overflow: hidden;   /* the rotating word slides in and out of the chip */
}

/* rotating words in the badge and chips (js/site.js swaps them; keyframes in sections.css) */
.hero-pill {
    overflow: hidden;
}

.hero-pill-accent,
.chip-word {
    display: inline-block;
    white-space: nowrap;
}

/* js/site.js turns the word into letter spans: the old word's letters roll up and out in a wave, the new
   word's letters roll in from below with a soft settle, and the box glides to the new width */
.rot {
    position: relative;
    height: 1.15em;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.rot-word {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
}

.rot-ch {
    display: inline-block;
}

.rot-word.is-out .rot-ch {
    animation: rot-out 0.3s cubic-bezier(0.45, 0, 0.55, 1) both;
    animation-delay: calc(var(--k) * 10ms);
}

.rot-word.is-in .rot-ch {
    animation: rot-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
    animation-delay: calc(120ms + var(--k) * 24ms);
}

@keyframes rot-out {
    to { transform: translateY(-0.9em); opacity: 0; filter: blur(3px); }
}

@keyframes rot-in {
    from { transform: translateY(0.9em); opacity: 0; filter: blur(3px); }
}

/* the chip's dot gives a little pop every time the word changes */
.chip.is-ticking .chip-dot {
    animation: dot-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes dot-pop {
    40% { transform: scale(1.3); }
}

.chip-sell {
    background: var(--sell-tint);
    color: var(--sell);
}

.chip-buy {
    background: var(--buy-tint);
    color: var(--buy);
}

.chip-dot {
    width: clamp(20px, calc(20px + 5 * (100vw - 400px) / 1040), 25px);
    height: clamp(20px, calc(20px + 5 * (100vw - 400px) / 1040), 25px);
}

.chip-dot-sell {
    width: clamp(20px, calc(20px + 6 * (100vw - 400px) / 1040), 26px);
}

.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
}

.hero-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hero-note {
    font-size: clamp(8px, calc(8px + 8 * (100vw - 400px) / 1040), 16px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--muted-2);
    text-align: center;
}

/* the SELL app on the App Store and Google Play: the stores' own badges, same height so they sit as a pair */
.store-badges {
    display: flex;
    flex-wrap: nowrap;   /* always side by side, also on the narrowest phones */
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.store-badges a {
    display: block;
    transition: transform 0.25s var(--ease-spring);
}

.store-badges a:hover {
    transform: translateY(-3px);
}

.store-badges img {
    display: block;
    width: auto;
    height: 28px;
}

@media (max-width: 899px) {
    .store-badges {
        gap: 6px;
    }

    .store-badges img {
        height: 24px;
    }
}

/* the diagram is laid out at Figma's 1273 x 492, scaled down by js/landing.js below 1273px */
.hero-diagram {
    width: min(1273px, 100%);
    height: 492px;
    margin-top: 24px;
}

.stage {
    position: relative;
    width: 1273px;
    height: 492px;
    transform-origin: 0 0;
}

/* the scene, the bots and their idle / hop / sit / walk animations live in css/bots.css */

/* ---------- Hero diagram (Figma 1890:5407): SELL cards, BUY cards and SELL + BUY (js/hero.js) ----------
   Stage coordinates are Figma's (1273 x 492). On load the cards pop in and the bots drop in; then one order at a
   time flies through both apps as a labelled chip. */
.flow-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    visibility: hidden;   /* only the flight routes of the chip; never drawn */
    pointer-events: none;
}

/* cards (export markup, Figma values) */
.hcard {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--white);
    border: 1px solid;
    border-radius: 15px;
    opacity: 0;
    transform: translateY(26px) scale(0.94);
    transition: opacity 0.7s var(--ease-out) var(--d, 0s), transform 0.8s var(--ease-spring) var(--d, 0s), box-shadow 0.3s;
}

.hcard-sell {
    border-color: var(--sell);
    box-shadow: 4px 4px 0 var(--sell);
}

.hcard-buy {
    border-color: var(--buy);
    box-shadow: 4px 4px 0 var(--buy);
}

.is-in .hcard {
    opacity: 1;
    transform: none;
}

.hcard-sell:hover,
.hcard-sell.is-ping {
    box-shadow: 7px 7px 0 var(--sell);
}

.hcard-buy:hover,
.hcard-buy.is-ping {
    box-shadow: 7px 7px 0 var(--buy);
}

/* a card that just received an update gives a soft bump */
.hcard.is-ping {
    animation: card-ping 0.7s var(--ease-spring);
}

@keyframes card-ping {
    35% { transform: translateY(-5px) scale(1.035); }
}

.hc-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.hc-id {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hc-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.hcard-sell .hc-label { color: var(--sell); }
.hcard-buy .hc-label { color: var(--buy); }

.mini-logo {
    width: auto;
    height: 20px;
}

.hc-sub {
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #5e5e5e;
    white-space: nowrap;
}

.hc-sub15 {
    font-size: 15px;
}

.hc-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.hc-right-between {
    align-self: stretch;
    justify-content: space-between;
}

.hc-amt {
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #000;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.paid {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 25px;
    background: rgba(0, 189, 16, 0.1);
    font-weight: 500;
    font-size: 10px;
    line-height: 1.1;
    color: #00bd10;
}

/* "Paid" lands like a stamp when SELL bills the new order */
.paid.is-stamp {
    animation: paid-stamp 0.55s var(--ease-spring);
}

@keyframes paid-stamp {
    0% { transform: scale(1.9) rotate(-12deg); opacity: 0; }
    60% { transform: scale(0.94) rotate(2deg); opacity: 1; }
}

.stock-bar {
    position: relative;
    width: 103px;
    height: 11px;
    border-radius: 13px;
    background: #e7e7e7;
    overflow: hidden;
}

.stock-bar span {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 37px;
    border-radius: 9px;
    background: var(--sell);
    transition: width 0.9s var(--ease-out);
}

.hc-person {
    display: flex;
    align-items: center;
    gap: 8px;
}

.avatar {
    position: relative;
    flex: none;
    width: 30px;
    height: 41px;
    overflow: hidden;
}

.avatar img {
    position: absolute;
    left: 0;
    top: -29.87%;
    width: 100%;
    height: 162.4%;
    max-width: none;
}

.hc-pname {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-weight: 500;
}

.hc-pname b {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #2c2c2c;
}

.hc-pname small {
    font-size: 12px;
    line-height: 1.3;
    color: #898989;
}

.hc-addr {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #8c8c8c;
    white-space: nowrap;
}

/* text that js/hero.js updates rolls over, and a fresh "good news" line shows in green for a moment */
[data-f] {
    display: inline-block;
}

.hc-sub.is-news,
.hc-pname small.is-news {
    color: #00a50e;
}

/* SELL + BUY (css/bots.css draws them; 8.5px bot pixels here) with the |17| badge between them.
   Their bags sit where the lines meet: SELL's at (442, 241), BUY's at (820, 231). */
.buddies {
    position: absolute;
    left: 412px;
    top: 34px;
    z-index: 3;   /* above the dot: an order goes into a bot's bag and comes out the other side */
    width: 459px;
    height: 274px;
    opacity: 0;
    transform: translateY(-40px);
}

.is-in .buddies {
    animation: buddies-in 0.9s var(--ease-spring) 0.15s forwards;
}

@keyframes buddies-in {
    to { opacity: 1; transform: none; }
}

.buddies .scene {
    --u: calc(100cqw / 54);
    --edge: 1.5;
    --gap: 8.8;
    --ground: 3;
}

.flow-badge {
    position: absolute;
    left: 596px;
    top: 182px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 58px;
    height: 47px;
    border: 1px solid var(--sell-bright);
    border-radius: 10px;
    background: var(--white);
    box-shadow: 2px 2px 0 var(--sell-bright);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.4s 0.7s, transform 0.6s var(--ease-spring) 0.7s;
}

.is-in .flow-badge {
    opacity: 1;
    transform: none;
}

.flow-badge img {
    width: 34px;
    height: auto;
}

/* the badge gives a little bounce as an order passes through it */
.flow-badge.is-pulse {
    animation: badge-pulse 0.6s var(--ease-spring);
}

@keyframes badge-pulse {
    40% { transform: scale(1.18); box-shadow: 3px 3px 0 var(--sell-bright), 0 0 0 8px rgba(63, 78, 227, 0.12); }
}

/* the order, flying from card to card as a labelled chip (js/hero.js moves it with transform) */
.flow-chip {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;   /* over the cards and the badge, behind SELL + BUY */
    translate: -50% -50%;
    padding: 6px 12px;
    border: 2px solid var(--white);
    border-radius: 999px;
    background: var(--c, var(--sell-bright));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--sell-bright)) 22%, transparent), 0 6px 16px color-mix(in srgb, var(--c, var(--sell-bright)) 45%, transparent);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--white);
    white-space: nowrap;
    pointer-events: none;
}

/* the chip leaves a fading trail so the route reads without a line */
.flow-spark {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 8px;
    height: 8px;
    translate: -50% -50%;
    border-radius: 50%;
    background: var(--c, var(--sell-bright));
    pointer-events: none;
}

/* phones: a one-line live feed above the bots instead of the cards */
.flow-feed {
    display: none;
}

.sync-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 37px;
    margin-top: 24px;
    padding: 10px 20px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    filter: drop-shadow(3px 4px 0 var(--line));
    font-weight: 600;
    font-size: 13px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.sync-pill img {
    width: 9px;
    height: 9px;
}

.sync-pill .mid {
    color: var(--sell-bright);
}

.sync-pill .muted {
    font-weight: 500;
    color: #55556a;
}

/* ---------- Phones ---------- */

@media (max-width: 899px) {
    /* ---------- Mobile hero (1890:5849) ---------- */

    .hero {
        padding-top: 65px;
    }

    .hero-title br {
        display: none;
    }

    .hero-grid,
    .sync-pill {
        display: none;
    }

    /* mobile order: intro, SELL + BUY, buttons */
    .hero-diagram {
        order: 1;
        width: 100%;
        height: auto;
        margin-top: 16px;
    }

    .hero-cta {
        order: 2;
        margin-top: 24px;
    }

    /* Figma 400px frame shows only SELL + BUY with the |17| badge: js/landing.js crops the stage to them */
    .hcard {
        display: none;
    }

    /* no cards to fly to here, so the chip shrinks to a glowing dot between the bots */
    .flow-chip {
        padding: 5px;
        border-width: 3px;
        font-size: 0;
    }

    .flow-feed {
        position: absolute;
        left: 625px;   /* over the |17| badge */
        top: 0;
        z-index: 5;
        display: block;
        padding: 6px 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--white);
        box-shadow: 2px 2px 0 var(--line);
        font-weight: 600;
        font-size: 13px;
        line-height: 1.2;
        letter-spacing: -0.02em;
        color: #3a3a46;
        white-space: nowrap;
        transform: translateX(-50%);
    }

    .hero-buttons {
        flex-direction: column;
    }

    /* Figma 400px frame: plain 39px pills, the arrow circle is hidden */
    .hero-buttons .btn {
        padding: 9px 19px;
    }

    .hero-buttons .btn-arrow-icon {
        display: none;
    }

}

/* ---------- Small phones (< 400px): keep the 400px frame's proportions ---------- */

@media (max-width: 399px) {
    .hero-pill {
        gap: 2vw;
        padding: 1vw 2vw;
        font-size: 3vw;
    }

    .hero-title {
        font-size: 8.75vw;
    }

    .serif {
        font-size: 6.25vw;
    }

    .tagline-row,
    .chip {
        gap: 2vw;
    }

    .chip {
        font-size: 5vw;
        padding: 1.5vw 3vw;
    }

    .chip-dot,
    .chip-dot-sell {
        width: 5vw;
        height: 5vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bot-fx {
        display: none;
    }
}