/* ==========================================================================
   RentOS — hero floating cards
   --------------------------------------------------------------------------
   The two cards annotated "Please download svg animation for this, see
   prototype for how it animates" (123:6882, 123:6905). Built as live DOM
   rather than SVG so the type stays selectable/scalable and the timings come
   from the shared motion tokens.

   Sizing: .hero__graphics is a size container, so every value here is in cqw
   (1cqw = 1% of the graphic) and the whole composition scales with the column
   at 1440/1140 instead of breaking at fixed px.

   Both breakpoints share ONE set of values. The mobile graphic is 523 wide vs
   the desktop 699 — a ratio of 0.748 — and every card measurement in the
   mobile frame is exactly 0.748x its desktop twin ($148.2k is 30.838 vs
   41.215, bars 37.691 vs 50.374, note 209.868 vs 280.493). So cq units
   reproduce the mobile card for free; only the slot insets differ.

   All timings/easings are the measured Figma values in variables.css.
   ========================================================================== */

    .hero__slot {
        position: absolute;
        display: grid;
        place-items: center;
    }

    .hero-card {
        position: relative;
    }

    /* ------------------------------------------------ Agreements 123:6905 */
    .hero__slot--agreements {           /* mobile @ 226:5743 */
        left: 53.73%;
        top: 62.96%;
        right: 23.26%;
        bottom: 8.56%;
    }

    /* 100.68 x 79.52 of the 523 frame — the rotated card inside the AABB the
       design gives (hypot of the inset box @ 226:5743). */
    .hero-card--agreements {
        width: 19.25cqw;
        height: 15.21cqw;
        background-color: var(--brand-dark-green);
        border-radius: 2.963cqw;        /* 20.714 */
        transform: rotate(-18deg);      /* @ 123:6905 */
    }

    /* The children are sized in cqw of the GRAPHICS frame, so shrinking the
       card alone leaves them at their old scale — which is what was spilling
       the counter over the card's edges. The block is scaled as a whole
       instead: 0.733 gives Figma's 52.25 inner width and 15.145px digits
       @ 226:5744, from our authored 71.3 / 20.66. */
    .agreements {
        position: absolute;
        left: 50%;
        top: 20.1%;                     /* badge lands at 81% of the card */
        width: 13.63cqw;                /* 95.286 */
        transform: translateX(-50%) scale(0.733);
        transform-origin: top center;
        text-align: center;
        color: var(--white);
    }

    .agreements__count {
        position: relative;
        height: 4.741cqw;               /* lh 33.143 */
        font-family: var(--font-ui);
        font-weight: var(--fw-semibold);
        font-size: 3.951cqw;            /* 27.619 */
        line-height: 4.741cqw;
    }

    /* Nine values stacked, each visible for one --motion-counter-step tick.
       9 x 111ms = 1s, then the final value holds for the rest of the loop. */
    .agreements__count span {
        position: absolute;
        inset: 0;
        opacity: 0;
        animation: agreements-tick var(--motion-loop) linear infinite;
        animation-delay: calc(var(--i) * var(--motion-counter-step));
    }

    /* The hold runs on the shared timeline, NOT offset by --i. With the 888ms
       delay its 7.4s cycle ended at 8288ms while the ticking digits restarted
       at 7400 — so 0..1140 counted up over a still-visible 1,289 for the last
       888ms of every loop. */
    .agreements__count span:last-child {
        animation-name: agreements-hold;
        animation-delay: 0s;
    }

    @keyframes agreements-tick {
        0%, 1.5% { opacity: 1; }
        1.51%, 100% { opacity: 0; }
    }

    /* 12% of 7.4s = 888ms = 8 x 111ms, i.e. exactly where the eighth tick
       ends, so the hand-off has neither an overlap nor a gap. */
    @keyframes agreements-hold {
        0%, 11.99% { opacity: 0; }
        12%, 100%  { opacity: 1; }
    }

    .agreements__label {
        margin-top: 0.6cqw;
        font-family: var(--font-ui);
        font-size: 2.766cqw;            /* 19.333 */
        line-height: 3.358cqw;          /* 23.476 */
    }

    /* The pill is wider than the text block it sits in (107.6 vs 85.4), and an
       inline-block that overflows its container only spills to the RIGHT — which
       pushed it off-centre against the digits. Figma centres it on the block
       (left-1/2 + -translate-x-1/2 @ 223:3955), so do the same. */
    .agreements__badge {
        display: inline-block;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 1cqw;
        padding: 0.35cqw 2cqw;          /* pill is 107.6 wide @ 223:3955 */
        background-color: var(--status-won-bg);
        border-radius: var(--radius-pill);
        color: var(--brand-dark-green);
        font-family: var(--font-ui);
        font-weight: var(--fw-semibold);
        /* 13.609px after the card's content scale @ 223:3956 — 1.75cqw came
           out at 10.96 and left the pill a quarter too narrow. */
        font-size: 2.173cqw;
        line-height: 2.301cqw;          /* 16.084 @ 223:3956 */
        white-space: nowrap;
    }

    /* --------------------------------------------- Hero Revenue 123:6882 */
    .hero__slot--revenue {              /* mobile @ 226:5720 */
        left: 45.7%;
        top: 31.75%;
        right: 16.26%;
        bottom: 27.69%;
    }

    /* Children are absolutely positioned in Figma, not flowed — offsets below
       are card-px / 6.99 to convert to cqw of the 699px graphic.
       title 22.9 · row 36.64 · chart 97.31 · days 192.34 · note 225.54 */
    /* The card's children are sized in cqw of the GRAPHICS frame, not of the
       card, so resizing the card alone would leave them at the old scale.
       The card keeps its authored size and is scaled as a whole instead —
       0.564 lands it on the 178.7 x 118.3 the new frame gives @ 226:5720. */
    /* Centred explicitly rather than by the slot's place-items: at its
       authored size the card is wider than the AABB slot, and grid centring
       clamps an overflowing item to the start instead of straddling. */
    .hero-card--revenue {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 60.59cqw;
        height: 40.13cqw;
        background-color: var(--white);
        border: 0.164cqw solid var(--border);
        border-radius: 2.457cqw;        /* 17.173 */
        transform: translate(-50%, -50%) rotate(11.66deg) scale(0.564);
        overflow: hidden;               /* overflow-clip @ 123:6882 */
    }

    .hero-card--revenue > * {
        position: absolute;
    }

    .revenue__title {                   /* @ 123:6904 */
        top: 3.276cqw;
        left: 0.328cqw;
        right: 0.328cqw;
        font-family: var(--font-ui);
        font-size: 1.478cqw;
        line-height: 2.293cqw;
        color: var(--text);
        text-align: center;
    }

    .revenue__title strong { font-weight: var(--fw-semibold); }

    .revenue__row {                     /* @ 123:6883 */
        top: 5.242cqw;
        left: 13.677cqw;
        display: flex;
        align-items: center;
        gap: 1.638cqw;                  /* 11.449 */
    }

    .revenue__value {
        font-family: var(--font-ui);
        font-weight: var(--fw-semibold);
        font-size: 5.897cqw;            /* 41.215 */
        line-height: 7.043cqw;          /* 49.229 */
        color: var(--brand-dark-green);
    }

    .revenue__delta {
        padding: 0.655cqw 1.474cqw;
        background-color: var(--brand-accent);
        border-radius: var(--radius-pill);
        font-family: var(--font-ui);
        font-size: 1.802cqw;            /* 12.594 */
        line-height: 2.293cqw;
        color: var(--brand-dark-green);
        white-space: nowrap;
    }

    /* Chart 389.255 x 91.589 @ 123:6887, centred; 7 bars w50.374 r5.724 top */
    .revenue__chart {
        top: 13.921cqw;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        width: 55.688cqw;
        height: 13.103cqw;
    }

    .revenue__bar {
        width: 7.207cqw;
        height: var(--h);
        background-color: var(--brand-dark-green);
        border-radius: 0.819cqw 0.819cqw 0 0;
        transform-origin: bottom;
        animation: bar-grow var(--motion-loop) linear infinite;
        animation-delay: calc(var(--i) * var(--motion-bar-stagger));
    }

    .revenue__bar.is-peak { background-color: var(--brand-accent); }

    /* 700ms of the 7.4s loop = 9.46%, matching the Figma keyframes */
    @keyframes bar-grow {
        0%    { transform: scaleY(.011); animation-timing-function: var(--ease-out-quint); }
        9.46% { transform: scaleY(1); }
        100%  { transform: scaleY(1); }
    }

    .revenue__days {                    /* @ 123:6895-6901, top 192.34 */
        top: 27.517cqw;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: space-between;
        width: 55.688cqw;
        font-family: var(--font-ui);
        font-size: 1.802cqw;
        line-height: 2.293cqw;
        color: var(--brand-dark-green);
    }

    .revenue__days span { width: 7.207cqw; text-align: center; }

    .revenue__note {                    /* @ 123:6902, 280.493 x 28.622 */
        top: 32.266cqw;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40.128cqw;
        height: 4.095cqw;
        border: 0.114cqw solid var(--border);
        border-radius: 1.137cqw;
        font-family: var(--font-ui);
        font-size: 1.478cqw;
        line-height: 2.293cqw;
        color: var(--brand-dark-green);
        white-space: nowrap;
    }

    .revenue__note strong { font-weight: var(--fw-bold); }

/* Desktop only differs in where the two cards sit in the frame. */
@media screen and (min-width: 992px) {
    /* Both re-measured off the 2026-08-17 frame, against the 699x500.95
       graphics box at (958, 231) in the hero. */
    /* Sits ABOVE the app screen's bottom edge (775) and tucks under the
       revenue card, which paints later in the markup. */
    /* Position taken from the edges the revenue card does NOT cover: the
       render's visible left (1296) and bottom (766) plus the 6px corner-radius
       inset put the 196.64 x 174.4 AABB at (1290, 597.6) — bottom 772, which
       is just inside the app screen's 775. */
    .hero__slot--agreements {
        left: 47.5%;
        top: 73.18%;
        right: 24.37%;
        bottom: -7.99%;
    }

    .hero__slot--revenue {              /* @ 223:3929 (1292.17, 376) 384.17x293.54 */
        left: 47.81%;
        top: 28.94%;
        right: -2.77%;
        bottom: 12.46%;
    }

    /* 164.5 x 129.9 — the unrotated card behind the 196.64 x 174.4 AABB
       @ 223:3952. (The page render shows only 140 of it because the revenue
       card covers the top; the isolated node render is the honest size.) */
    .hero-card--agreements {
        width: 23.53cqw;
        height: 18.6cqw;
    }

    .agreements {
        top: 22%;                       /* 23.29 of the 105.7 card @ 223:3953 */
        transform: translateX(-50%) scale(0.896);
    }

    /* 345.1 x 228.5 of the 699 frame @ 223:3929 — same scaling trick. */
    .hero-card--revenue {
        transform: translate(-50%, -50%) rotate(11.66deg) scale(0.8148);
    }
}

/* The loop runs forever; honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
    .revenue__bar,
    .agreements__count span {
        animation: none;
    }

    .agreements__count span:not(:last-child) {
        opacity: 0;
    }

    .agreements__count span:last-child {
        opacity: 1;
    }
}