/* =============================================================================
   InvestProp — Motion Bento  («ویترین امکانات»)
   -----------------------------------------------------------------------------
   Used by `site/index/bento.blade.php`. Everything is scoped to `.bt-bento`,
   the section's own root — NOT to a page body class — so the section can be
   dropped onto another public page later without dragging home.css along.

   The look
   --------
   Frosted glass, isometric, monochrome. One key light from above, so every
   solid in every scene shows the same three faces: a bright top, a mid
   front-left and a deep front-right. One large object per card, bleeding off
   the bottom edge, standing in its own pool of light. Labels are hairline
   leaders — a 1px stem, a small node, HTML text.

   The values for all of that live as `--g-*` tokens below and are re-cut once
   for the light theme; nothing in the scenes carries its own colour.

   Motion contract with bento.js
   -----------------------------
     .bt-bento.is-armed   — JS is alive: cards may start hidden.
     .bt-bento.bt-gsap    — GSAP is loaded and owns the card entrance transform.
     .bt-card.is-in       — the card has landed; every scene animation keys off
                            this one class, so the scenes play identically
                            whether GSAP ran the entrance or CSS did.
   ========================================================================== */

.bt-bento {
    /* --- page tokens: the house palette, not a variant of it -------------
       These are the same values the rest of the public site is built on
       (site design system): primary #007BFF with #1C8AFF and #5ED2EC as the
       accents, on the #020915 ground. Nothing in the section may introduce a
       hue outside this set. */
    --bt-primary: #007BFF;
    --bt-primary-2: #1C8AFF;
    --bt-cyan: #5ED2EC;
    --bt-sky: #8DC4FF;
    --bt-mint: #3DD68C;

    --bt-line: rgba(141, 196, 255, .14);
    --bt-line-2: rgba(141, 196, 255, .22);
    --bt-text: #EAF2FF;
    --bt-text-2: #C3D4EA;
    --bt-muted: #8FA5C2;

    --bt-grad: linear-gradient(94.98deg, #007BFF 4.01%, #1C8AFF 103.03%);
    --bt-radius: 20px;

    /* --- glass material --------------------------------------------------
       One material, three faces, all mixed from the house blues so the solids
       read as the same family as the buttons and the hero. */
    --g-top-a: rgba(226, 238, 252, .74);
    --g-top-b: rgba(166, 194, 230, .4);
    --g-left-a: rgba(152, 184, 224, .32);
    --g-left-b: rgba(98, 132, 182, .22);
    --g-right-a: rgba(114, 150, 198, .26);
    --g-right-b: rgba(68, 100, 148, .18);

    --g-lit-a: rgba(236, 246, 255, .86);
    --g-lit-b: rgba(150, 196, 245, .55);
    --g-lit-c: rgba(86, 140, 214, .4);
    --g-lit-d: rgba(46, 88, 152, .28);

    --g-pool-a: rgba(120, 170, 235, .16);
    --g-pool-b: rgba(0, 123, 255, 0);
    --g-halo-a: rgba(180, 210, 245, .3);
    --g-halo-b: rgba(0, 123, 255, .08);
    --g-halo-c: rgba(0, 123, 255, 0);

    --g-edge-a: rgba(255, 255, 255, .55);
    --g-edge-b: rgba(255, 255, 255, .1);

    --g-area-a: rgba(60, 130, 220, .12);
    --g-area-b: rgba(24, 106, 210, .19);
    --g-area-c: rgba(16, 88, 184, .27);
    --g-area-d: rgba(141, 180, 230, .07);
    --g-area-e: rgba(141, 196, 255, .01);
    --g-stroke-a: #7FB2E8;
    --g-stroke-b: #DCE9F8;

    --g-dot: rgba(160, 195, 240, .22);
    --g-ring: rgba(141, 180, 230, .12);
    --g-stem: rgba(160, 190, 226, .42);
    --g-amber: #C8AE84;

    position: relative;
    margin-top: 96px;
    isolation: isolate;
}

html:not(.dark) .bt-bento .g-cast-a { stop-opacity: .22; }

html:not(.dark) .bt-bento {
    --bt-line: rgba(20, 80, 175, .14);
    --bt-line-2: rgba(20, 80, 175, .26);
    --bt-text: #0B1A33;
    --bt-text-2: #2A4467;
    --bt-muted: #5F7796;

    --g-top-a: rgba(255, 255, 255, .99);
    --g-top-b: rgba(206, 220, 240, .9);
    --g-left-a: rgba(198, 214, 236, .9);
    --g-left-b: rgba(162, 184, 212, .82);
    --g-right-a: rgba(174, 195, 222, .86);
    --g-right-b: rgba(136, 162, 196, .74);

    --g-lit-a: rgba(255, 255, 255, 1);
    --g-lit-b: rgba(158, 194, 234, .9);
    --g-lit-c: rgba(104, 150, 208, .86);
    --g-lit-d: rgba(76, 118, 174, .78);

    --g-pool-a: rgba(0, 123, 255, .1);
    --g-halo-a: rgba(150, 180, 220, .24);
    --g-halo-b: rgba(80, 150, 255, .12);

    --g-edge-a: rgba(255, 255, 255, .95);
    --g-edge-b: rgba(255, 255, 255, .35);

    --g-area-a: rgba(90, 158, 255, .14);
    --g-area-b: rgba(0, 123, 255, .2);
    --g-area-c: rgba(38, 108, 240, .3);
    --g-area-d: rgba(120, 176, 255, .1);
    --g-area-e: rgba(120, 176, 255, .02);
    --g-stroke-a: #7FA3C8;
    --g-stroke-b: #4C82C8;

    --g-dot: rgba(40, 100, 190, .1);
    --g-ring: rgba(40, 100, 190, .16);
    --g-stem: rgba(60, 110, 190, .5);
    --g-amber: #A08A62;
}

@media (max-width: 767.98px) {
    .bt-bento { margin-top: 64px; }
}

/* Numerals sit inside an RTL run but must never reorder, and the tabular face
   keeps a counter from jittering while it tweens. */
.bt-bento .bt-num {
    font-family: dana, yekanbakh, sans-serif;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

/* The defs sprite renders nothing; it only has to stay in the document so the
   `url(#…)` references in the scenes resolve. */
.bt-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- material bindings ---------------------------------------------------- */
.bt-bento .g-top-a   { stop-color: var(--g-top-a); }
.bt-bento .g-top-b   { stop-color: var(--g-top-b); }
.bt-bento .g-left-a  { stop-color: var(--g-left-a); }
.bt-bento .g-left-b  { stop-color: var(--g-left-b); }
.bt-bento .g-right-a { stop-color: var(--g-right-a); }
.bt-bento .g-right-b { stop-color: var(--g-right-b); }
.bt-bento .g-lit-a   { stop-color: var(--g-lit-a); }
.bt-bento .g-lit-b   { stop-color: var(--g-lit-b); }
.bt-bento .g-lit-c   { stop-color: var(--g-lit-c); }
.bt-bento .g-lit-d   { stop-color: var(--g-lit-d); }
.bt-bento .g-cast-a  { stop-color: #000; stop-opacity: .5; }
.bt-bento .g-cast-b  { stop-color: #000; stop-opacity: 0; }
.bt-bento .g-pool-a  { stop-color: var(--g-pool-a); }
.bt-bento .g-pool-b  { stop-color: var(--g-pool-b); }
.bt-bento .g-halo-a  { stop-color: var(--g-halo-a); }
.bt-bento .g-halo-b  { stop-color: var(--g-halo-b); }
.bt-bento .g-halo-c  { stop-color: var(--g-halo-c); }
.bt-bento .g-edge-a  { stop-color: var(--g-edge-a); }
.bt-bento .g-edge-b  { stop-color: var(--g-edge-b); }
.bt-bento .g-area-a  { stop-color: var(--g-area-a); }
.bt-bento .g-area-b  { stop-color: var(--g-area-b); }
.bt-bento .g-area-c  { stop-color: var(--g-area-c); }
.bt-bento .g-area-d  { stop-color: var(--g-area-d); }
.bt-bento .g-area-e  { stop-color: var(--g-area-e); }
.bt-bento .g-stroke-a { stop-color: var(--g-stroke-a); }
.bt-bento .g-stroke-b { stop-color: var(--g-stroke-b); }
.bt-bento .g-dot     { fill: var(--g-dot); }

/* =============================================================================
   AMBIENT BACKGROUND
   ========================================================================== */

.bt-bento__bg {
    position: absolute;
    inset: -8% 0 -4%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.bt-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .3;
}

html:not(.dark) .bt-orb { opacity: .2; }

.bt-orb--a {
    inset-inline-start: -10%;
    top: 2%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(0, 123, 255, .5) 0%, rgba(0, 123, 255, 0) 70%);
}

.bt-orb--b {
    inset-inline-end: -12%;
    bottom: -4%;
    width: 540px;
    height: 540px;
    background: radial-gradient(circle, rgba(94, 210, 236, .26) 0%, rgba(94, 210, 236, 0) 70%);
}

.bt-field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.bt-field.is-live { opacity: .7; }
html:not(.dark) .bt-field.is-live { opacity: .4; }

/* =============================================================================
   SECTION HEADER
   ========================================================================== */

.bt-head {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 48px;
    text-align: center;
}

.bt-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 15px;
    margin-bottom: 18px;
    border-radius: 999px;
    border: 1px solid var(--bt-line-2);
    background: rgba(0, 123, 255, .1);
    color: var(--bt-sky);
    font-size: 13px;
    font-weight: 700;
}

html:not(.dark) .bt-head__eyebrow { color: #1A5FC4; }

.bt-head__eyebrow i { font-size: 15px; }

.bt-head__title {
    margin: 0;
    font-size: clamp(24px, 3.4vw, 40px);
    font-weight: 900;
    line-height: 1.45;
    color: var(--bt-text);
}

.bt-head__title b {
    background: linear-gradient(96deg, #1C8AFF 0%, var(--bt-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
}

.bt-head__desc {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 2;
    color: var(--bt-muted);
}

/* =============================================================================
   THE BENTO GRID
   -----------------------------------------------------------------------------
       ┌────────┬──────────────────────┐
       │  RACK  │        PAYOUT        │  the two tall cells hold the two
       │ (4×2)  │        (8×2)         │  compositions that need height: the
       ├────────┼──────────┬───────────┤  slab stack and the growth curve
       │ RAILS  │  SPLIT   │  CHRONO   │
       ├────────┴──────────┬───────────┤
       │       GUARD        │  SUPPORT  │  the chart card keeps the width it
       └────────────────────┴───────────┘  needs to be read as a chart
   ========================================================================== */

.bt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 768px) {
    .bt-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 20px;
    }

    .bt-card--rack,
    .bt-card--payout,
    .bt-card--rails,
    .bt-card--split { grid-column: span 3; }

    .bt-card--chrono { grid-column: span 6; }
}

@media (min-width: 1200px) {
    .bt-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(300px, auto);
        gap: 22px;
    }

    .bt-card--rack   { grid-column: span 4; grid-row: span 2; }
    .bt-card--payout { grid-column: span 8; grid-row: span 2; }
    .bt-card--rails  { grid-column: span 4; }
    .bt-card--split  { grid-column: span 4; }
    .bt-card--chrono { grid-column: span 4; }
}

/* =============================================================================
   CARD SHELL
   -----------------------------------------------------------------------------
   Near-black at the top, opening into a pool of light at the bottom where the
   solid stands. The halftone is dense in the top corner and gone by halfway —
   it is what keeps a very dark card from reading as an empty rectangle.
   ========================================================================== */

.bt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 30px 26px 0;
    border-radius: var(--bt-radius);
    border: 1px solid var(--bt-line);
    /* Three layers, in this order: a bloom leaking in from outside the top
       corner, the body of light the solid stands in, and the ground. The
       card has to READ as lit — a near-black panel with a faint glow at the
       bottom is what made the first pass look cheap next to the reference. */
    background:
        radial-gradient(52% 36% at 78% -6%, rgba(170, 205, 245, .09) 0%, rgba(170, 205, 245, 0) 74%),
        radial-gradient(124% 92% at 50% 110%, rgba(0, 123, 255, .26) 0%, rgba(0, 123, 255, .07) 42%, rgba(0, 123, 255, 0) 76%),
        linear-gradient(180deg, #060D1C 0%, #081527 100%);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow: 0 26px 70px -52px rgba(0, 0, 0, .9);
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1200px;
    will-change: transform;
}

html:not(.dark) .bt-card {
    background:
        radial-gradient(120% 78% at 50% 122%, rgba(0, 123, 255, .2) 0%, rgba(0, 123, 255, 0) 62%),
        linear-gradient(180deg, #FFFFFF 0%, #EEF4FE 100%);
    box-shadow: 0 30px 70px -46px rgba(20, 60, 120, .5);
}

@media (max-width: 575.98px) {
    .bt-card { padding: 24px 18px 0; }
}

/* Hairline along the top edge — the lit rim the reference cards all carry. */
.bt-card::before {
    content: "";
    position: absolute;
    inset-inline: 12%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(141, 196, 255, .3), transparent);
    pointer-events: none;
    z-index: 4;
}

.bt-card__grain {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(var(--g-dot) 1.1px, transparent 1.1px);
    background-size: 9px 9px;
    -webkit-mask-image:
        radial-gradient(46% 42% at 8% 12%, #000 0%, transparent 76%),
        radial-gradient(40% 38% at 94% 8%, #000 0%, transparent 76%);
    mask-image:
        radial-gradient(46% 42% at 8% 12%, #000 0%, transparent 76%),
        radial-gradient(40% 38% at 94% 8%, #000 0%, transparent 76%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
}

/* --- pointer spotlight ---------------------------------------------------- */
.bt-card__spot {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
                rgba(141, 196, 255, .1), rgba(141, 196, 255, 0) 60%);
}

.bt-card:hover .bt-card__spot,
.bt-card:focus-within .bt-card__spot { opacity: 1; }

.bt-card:hover { border-color: var(--bt-line-2); }

/* --- entrance ------------------------------------------------------------- */
.bt-bento.is-armed .bt-card { opacity: 0; }

.bt-bento.is-armed:not(.bt-gsap) .bt-card {
    transform: translate3d(0, 26px, 0) scale(.985);
    filter: blur(6px);
    transition: opacity .8s cubic-bezier(.22, 1, .36, 1),
                transform .8s cubic-bezier(.22, 1, .36, 1),
                filter .8s ease;
}

.bt-bento.is-armed:not(.bt-gsap) .bt-card.is-in {
    opacity: 1;
    transform: none;
    filter: none;
}

/* --- card copy ------------------------------------------------------------ */
.bt-card__body {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 40ch;
    margin-inline: auto;
}

.bt-card--wide .bt-card__body,
.bt-card--canvas .bt-card__body { max-width: 46ch; }

.bt-card__title {
    margin: 0 0 10px;
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 800;
    line-height: 1.6;
    color: var(--bt-text);
}

.bt-card__desc {
    margin: 0;
    font-size: 14px;
    line-height: 2;
    color: var(--bt-muted);
}

.bt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    margin-top: 20px;
    padding-inline: 22px;
    border-radius: 13px;
    background: var(--bt-grad);
    box-shadow: 0 12px 34px -12px rgba(0, 123, 255, .8);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .25s ease;
}

.bt-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 44px -12px rgba(0, 123, 255, .95);
}

.bt-btn i { font-size: 17px; }

/* --- the art region ------------------------------------------------------- */
/* Solids are drawn to stand on the card's bottom edge and be cut by it, which
   is what stops each scene reading as a sticker dropped in a box. */
/* The art box IS the drawing box: it is never stretched, so its width AND its
   height match the SVG exactly. That is what lets a leader label sit at
   `left: 30%; top: 19%` and land on x=96, y=61 of a 320-square viewBox. Give
   it `flex: 1` and the box grows taller than the drawing, and every label in
   the set slides down by half the difference. */
.bt-art {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    /* Edge to edge: the negative inline margin cancels the card padding so the
       solid is as big as the card allows and is cut by its sides, the way the
       reference frames do it. Height still equals the drawing exactly, which
       is what keeps the leader labels landing on the right coordinates. */
    width: calc(100% + 52px);
    margin: auto -26px -16px;
}

@media (max-width: 575.98px) {
    .bt-art {
        width: calc(100% + 36px);
        margin-inline: -18px;
    }
}




.bt-iso {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

/* The two chart-led cards run their art as a full-bleed layer behind the copy. */
.bt-card--canvas { padding-bottom: 30px; }

.bt-card--canvas .bt-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    min-height: 0;
    max-width: none;
    align-items: stretch;
}

.bt-card--canvas .bt-curve {
    width: 100%;
    height: 100%;
    display: block;
}

/* =============================================================================
   SHARED SCENE PRIMITIVES
   -----------------------------------------------------------------------------
   Three face fills, one edge, one pool of light, one hairline leader. Every
   scene is assembled out of exactly these, which is what makes six different
   drawings read as one set.
   ========================================================================== */

.bt-face--top   { fill: url(#gTop); }
.bt-face--left  { fill: url(#gLeft); }
.bt-face--right { fill: url(#gRight); }
.bt-face--cut   { fill: url(#gLeft); }
.bt-face--cut2  { fill: url(#gRight); }

.is-lit .bt-face--top   { fill: url(#gTopLit); }
.is-lit .bt-face--left  { fill: url(#gLeftLit); }
.is-lit .bt-face--right { fill: url(#gRightLit); }

.bt-face__edge {
    fill: none;
    stroke: url(#gEdge);
    stroke-width: 1.1;
    stroke-linejoin: round;
}

.bt-pool { opacity: .9; }

.bt-rings ellipse {
    fill: none;
    stroke: var(--g-ring);
    stroke-width: 1;
}

.bt-rings ellipse:last-child { stroke-dasharray: 3 7; }

/* --- hairline leaders ----------------------------------------------------- */
.bt-stem {
    stroke: var(--g-stem);
    stroke-width: 1;
    fill: none;
}

.bt-stem__node {
    fill: var(--g-stem);
}

.bt-lead {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 4;
    transform: translate(-50%, -100%);
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.bt-lead b {
    display: block;
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 800;
    line-height: 1;
    color: var(--bt-text);
}

.bt-lead em {
    display: block;
    margin-top: 5px;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bt-muted);
}

/* A fixed width for the three-across labels: they wrap instead of running off
   the card, and the outward offsets below become predictable in any language. */
.bt-lead--sm {
    width: 104px;
    white-space: normal;
}

.bt-lead--sm b {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--bt-text-2);
}

.bt-lead--sm em {
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.6;
}

.bt-lead--end {
    transform: translate(0, -50%);
    text-align: start;
}

/* Three leaders across one row would collide at their default centre anchor,
   so the outer two are pushed away from the middle one. */
.bt-lead--tl { transform: translate(-74%, -100%); }
.bt-lead--tr { transform: translate(-26%, -100%); }

.bt-card.is-in .bt-lead--tl { animation-name: btLeadInTl; }
.bt-card.is-in .bt-lead--tr { animation-name: btLeadInTr; }

@keyframes btLeadInTl { from { opacity: 0; transform: translate(-74%, -85%); } }
@keyframes btLeadInTr { from { opacity: 0; transform: translate(-26%, -85%); } }

.bt-card.is-in .bt-lead {
    animation: btLeadIn .9s cubic-bezier(.22, 1, .36, 1) 1.15s backwards;
}

@keyframes btLeadIn {
    from { opacity: 0; transform: translate(-50%, -85%); }
}

.bt-card.is-in .bt-lead--end   { animation-name: btLeadInEnd; }

@keyframes btLeadInEnd { from { opacity: 0; transform: translate(-8px, -50%); } }
.bt-card.is-in .bt-stem,
.bt-card.is-in .bt-stem__node {
    animation: btFade .8s ease 1s backwards;
}

/* Two fades, on purpose: btFade runs "backwards" and ends on whatever opacity
   the element already had, while btFadeIn ends at 1 and is the one to use with
   "forwards" on an element whose resting state is opacity: 0. Using btFade
   with forwards animates 0 -> 0 and the element never appears. */
@keyframes btFade   { from { opacity: 0; } }
@keyframes btFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- nodes and runners ---------------------------------------------------- */
.bt-node { fill: var(--g-stem); }

.bt-node--lit {
    fill: #fff;
    filter: drop-shadow(0 0 10px rgba(160, 210, 255, .95));
}

html:not(.dark) .bt-node--lit { fill: #007BFF; filter: drop-shadow(0 0 8px rgba(0, 123, 255, .5)); }

.bt-runner {
    fill: #fff;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    offset-anchor: center;
    offset-rotate: 0deg;
    filter: drop-shadow(0 0 8px rgba(160, 210, 255, .95));
}

html:not(.dark) .bt-runner { fill: #007BFF; filter: drop-shadow(0 0 6px rgba(0, 123, 255, .55)); }

.bt-led { fill: var(--bt-sky); }
.bt-led--b { fill: var(--bt-sky); opacity: .7; }

.bt-card.is-in .bt-led   { animation: btLed 2.4s steps(1, end) calc(var(--i) * .3s) infinite; }
.bt-card.is-in .bt-led--b { animation-duration: 3.1s; animation-delay: calc(var(--i) * .4s + .6s); }

@keyframes btLed {
    0%, 55%   { opacity: 1; }
    56%, 100% { opacity: .25; }
}

/* =============================================================================
   SCENE 1 · «SERVER STACK»
   ========================================================================== */



.bt-slab__panel { fill: var(--g-top-b); opacity: .5; }

.bt-card.is-in .bt-slab {
    animation: btSlabIn 1s cubic-bezier(.22, 1, .36, 1) calc(.1s + var(--i) * .12s) backwards;
}

@keyframes btSlabIn {
    from { opacity: 0; transform: translateY(26px); }
}

/* Each slab breathes on its own phase, so the stack never looks welded. */
.bt-card.is-in .bt-slab:nth-of-type(1) { animation-name: btSlabIn, btBob1; animation-duration: 1s, 6s; animation-delay: .1s, 1.1s; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(.22,1,.36,1), ease-in-out; }
.bt-card.is-in .bt-slab:nth-of-type(2) { animation-name: btSlabIn, btBob2; animation-duration: 1s, 7s;  animation-delay: .22s, 1.2s; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(.22,1,.36,1), ease-in-out; }
.bt-card.is-in .bt-slab:nth-of-type(3) { animation-name: btSlabIn, btBob1; animation-duration: 1s, 8s;  animation-delay: .34s, .6s;  animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(.22,1,.36,1), ease-in-out; }

@keyframes btBob1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes btBob2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.bt-wire {
    stroke: var(--g-stem);
    stroke-width: 1.2;
    fill: none;
}

@supports (offset-path: path("M0 0 L10 10")) {
    .bt-runner--wire { offset-path: path("M255 148 C296 134 296 96 258 86"); }
    .bt-card.is-in .bt-runner--wire { animation: btRunWire 2.8s cubic-bezier(.5, 0, .5, 1) 1.4s infinite; }
}

@keyframes btRunWire {
    0%       { offset-distance: 0%;   opacity: 0; }
    12%, 78% { opacity: 1; }
    100%     { offset-distance: 100%; opacity: 0; }
}

/* =============================================================================
   SCENE 2 · «GROWTH CURVE»
   ========================================================================== */

.bt-card--payout .bt-card__body { text-align: start; max-width: 34ch; margin-inline: 0; }

/* The plot is pushed down inside its own viewBox so the copy always sits on
   dark card, whatever height the cell ends up at; the scrim covers the rest. */
.bt-curve__plot { transform: translateY(64px); }

.bt-art--payout::after {
    content: "";
    position: absolute;
    inset: 0 0 34% 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(7, 13, 32, .96) 34%, rgba(7, 13, 32, 0) 100%);
}

html:not(.dark) .bt-art--payout::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .96) 34%, rgba(255, 255, 255, 0) 100%);
}

.bt-curve__grid path {
    stroke: var(--g-ring);
    stroke-width: 1;
    opacity: .35;
}

.bt-curve__guides path {
    stroke: var(--g-stem);
    stroke-width: 1;
    stroke-dasharray: 3 5;
    opacity: .45;
}

.bt-card.is-in .bt-curve__guides { animation: btFade 1s ease 1.5s backwards; }

.bt-curve__area { opacity: 0; }
.bt-card.is-in .bt-curve__area { animation: btRise 1.4s cubic-bezier(.22, 1, .36, 1) .35s forwards; }
.bt-card.is-in .bt-curve__area--soft { animation-delay: .15s; }

@keyframes btRise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bt-curve__line {
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

.bt-curve__line--a { stroke: var(--g-stroke-b); }

.bt-card.is-in .bt-curve__line { animation: btDraw 2s cubic-bezier(.4, 0, .2, 1) .3s forwards; }
.bt-card.is-in .bt-curve__line--b { animation-delay: .5s; }

@keyframes btDraw { to { stroke-dashoffset: 0; } }

.bt-curve__nodes circle { opacity: 0; }

.bt-card.is-in .bt-curve__nodes circle {
    animation: btPop .6s cubic-bezier(.34, 1.5, .64, 1) 1.9s forwards, btBeat 3s ease-in-out 2.5s infinite;
}

.bt-card.is-in .bt-curve__nodes circle:last-child { animation-delay: 2.05s, 2.7s; }

@keyframes btPop  { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes btBeat { 0%, 100% { r: 5.5; } 50% { r: 7; } }

.bt-display {
    margin-top: 22px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.bt-display b {
    font-size: clamp(38px, 4.6vw, 56px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--bt-text);
}

.bt-display em {
    font-style: normal;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bt-sky);
}

html:not(.dark) .bt-display em { color: #1A5FC4; }

/* =============================================================================
   SCENE 3 · «PAYMENT DECK»
   -----------------------------------------------------------------------------
   Each instrument has to be identifiable in the first half second, so the marks
   are drawn at full contrast on the glass rather than tinted into it: gold chip,
   white embossing, a dark ₮ on a bright coin. The glass is the frame, never the
   thing being read.
   ========================================================================== */

.bt-pick__cast { fill: url(#gCast); }

.bt-pick__body { fill: url(#gLeft); }
.bt-pick.is-lit .bt-pick__body { fill: url(#gLeftLit); }

.bt-pick__edge {
    fill: none;
    stroke: url(#gEdge);
    stroke-width: 1.2;
}

.bt-pick__sheen { fill: #fff; opacity: .07; }

/* --- the bank card -------------------------------------------------------- */
.bt-pick__chip { fill: var(--g-amber); }

.bt-pick__chipline {
    fill: none;
    stroke: rgba(0, 0, 0, .35);
    stroke-width: 1;
}

.bt-pick__nfc path {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .85;
}

.bt-card.is-in .bt-pick__nfc path:nth-child(1) { animation: btNfc 2.2s ease-out 0s infinite; }
.bt-card.is-in .bt-pick__nfc path:nth-child(2) { animation: btNfc 2.2s ease-out .2s infinite; }

@keyframes btNfc {
    0%, 60%, 100% { opacity: .3; }
    22%           { opacity: 1; }
}

.bt-pick__dots circle { fill: #fff; opacity: .62; }
.bt-pick__bar { fill: #fff; opacity: .85; }

/* --- the stablecoin ------------------------------------------------------- */
.bt-pick__coin { fill: url(#gTop); }

.bt-pick__coinring {
    fill: none;
    stroke: #fff;
    stroke-width: 1;
    opacity: .55;
}

/* Dark mark on a bright coin: the one place in the set that needs full
   contrast rather than glass, because it is the thing being read. */
.bt-pick__mark {
    fill: none;
    stroke: #062B52;
    stroke-width: 2.8;
    stroke-linecap: round;
}

/* --- card to card --------------------------------------------------------- */
.bt-pick__mini { fill: #fff; opacity: .86; }

.bt-pick__miniline {
    fill: none;
    stroke: rgba(0, 62, 132, .55);
    stroke-width: 2;
}

.bt-pick__arrow,
.bt-pick__arrowhead {
    fill: none;
    stroke: var(--bt-cyan);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bt-pick__arrow--back { stroke: #fff; opacity: .55; }

.bt-card.is-in .bt-pick__arrow,
.bt-card.is-in .bt-pick__arrowhead {
    animation: btFade .6s ease 1.1s backwards;
}

/* --- entrance and idle ---------------------------------------------------- */
.bt-card.is-in .bt-pick {
    animation: btPickIn .95s cubic-bezier(.22, 1, .36, 1) calc(.3s + var(--i) * .12s) backwards;
}

@keyframes btPickIn {
    from { opacity: 0; transform: translateY(26px); }
}

.bt-card.is-in .bt-pick.is-lit {
    animation: btPickIn .95s cubic-bezier(.22, 1, .36, 1) .42s backwards,
               btHover 5.4s ease-in-out 1.4s infinite;
}

@keyframes btHover {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* =============================================================================
   SCENE 4 · «SPLIT CYLINDER»
   ========================================================================== */



.bt-wedge--major { transform-box: fill-box; transform-origin: center; }

.bt-card.is-in .bt-wedge--major {
    animation: btRaise 1.2s cubic-bezier(.22, 1, .36, 1) .25s backwards;
}

@keyframes btRaise {
    from { opacity: 0; transform: translateY(22px); }
}

.bt-card.is-in .bt-wedge--minor {
    animation: btSlideOut 1.2s cubic-bezier(.22, 1, .36, 1) .45s backwards;
}

@keyframes btSlideOut {
    from { opacity: 0; transform: translateY(-30px); }
}

/* =============================================================================
   SCENE 5 · «ENDLESS ORBIT»
   ========================================================================== */



.bt-orbit__cast {
    fill: url(#gHalo);
    opacity: .5;
}

.bt-orbit__drop {
    stroke: var(--g-stem);
    stroke-width: 1;
    stroke-dasharray: 2 5;
    opacity: .45;
}

.bt-infinity path {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

.bt-infinity__glow {
    stroke: var(--bt-primary);
    stroke-width: 26;
    opacity: .22;
    filter: url(#gBloom);
}

.bt-infinity__body {
    stroke: url(#gTop);
    stroke-width: 17;
}

.bt-infinity__core {
    stroke: var(--g-stroke-b);
    stroke-width: 4;
    opacity: .9;
}

.bt-card.is-in .bt-infinity path {
    animation: btDraw 2.4s cubic-bezier(.4, 0, .2, 1) .5s forwards;
}

.bt-card.is-in .bt-infinity__core { animation-delay: .8s; }

/* The mark is drawn at a readable stroke width and then scaled up as a whole,
   so the glass body and its core keep their proportions. */
.bt-infinity {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.16);
}

.bt-card.is-in .bt-infinity {
    animation: btHoverInf 7s ease-in-out 1s infinite;
}

@keyframes btHoverInf {
    0%, 100% { transform: scale(1.16) translateY(0); }
    50%      { transform: scale(1.16) translateY(-7px); }
}

@supports (offset-path: path("M0 0 L10 10")) {
    .bt-runner--orbit {
        offset-path: path("M43 212 A117 68 0 1 0 277 212 A117 68 0 1 0 43 212");
    }

    .bt-card.is-in .bt-runner--orbit {
        animation: btOrbit 7s linear var(--d, 0s) infinite;
    }
}

@keyframes btOrbit {
    0%      { offset-distance: 0%;   opacity: 0; }
    8%, 92% { opacity: 1; }
    100%    { offset-distance: 100%; opacity: 0; }
}

/* =============================================================================
   STATIC FALLBACK & REDUCED MOTION
   -----------------------------------------------------------------------------
   Every scene stores its BEFORE state (a curve with a full dash offset, a
   hidden node, an invisible floor plane) in the plain selector and plays to
   the finished state on `.is-in`. That is only safe while a script is actually
   going to add `.is-in`, so bento.js marks the section `.is-armed` first — and
   it only does that when motion is allowed. Below is what a visitor sees when
   that never happens: the finished frame, held still.
   ========================================================================== */

.bt-bento:not(.is-armed) .bt-curve__line,
.bt-bento:not(.is-armed) .bt-infinity path { stroke-dashoffset: 0; }

.bt-bento:not(.is-armed) .bt-curve__area,
.bt-bento:not(.is-armed) .bt-curve__nodes circle { opacity: 1; }


@media (prefers-reduced-motion: reduce) {
    .bt-bento *,
    .bt-bento *::before,
    .bt-bento *::after {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .bt-bento.is-armed .bt-card {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .bt-bento .bt-curve__nodes circle,
    .bt-bento .bt-runner { display: none; }
    .bt-bento .bt-field { display: none; }
}

/* =============================================================================
   LIGHT-THEME CORRECTIONS
   -----------------------------------------------------------------------------
   Two marks are drawn in near-white because they sit on a near-black card. On
   the light theme that same mark lands on white paper, so it is re-cut here.
   ========================================================================== */

html:not(.dark) .bt-infinity__body { stroke: url(#gLeft); }
html:not(.dark) .bt-infinity__core { stroke: var(--g-stroke-b); opacity: 1; }

html:not(.dark) .bt-curve__line--a { stroke: #4C82C8; }

html:not(.dark) .bt-card::before {
    background: linear-gradient(90deg, transparent, rgba(141, 196, 255, .5), transparent);
}

/* On the light theme the unlit glass is pale, so the marks printed on it flip
   from white embossing to a dark blue ink; the lit member keeps its white
   marks because it stays saturated in both themes. */
html:not(.dark) .bt-bento .bt-pick:not(.is-lit) .bt-pick__dots circle,
html:not(.dark) .bt-bento .bt-pick:not(.is-lit) .bt-pick__bar {
    fill: #0A4FA8;
    opacity: .5;
}

html:not(.dark) .bt-bento .bt-pick:not(.is-lit) .bt-pick__nfc path {
    stroke: #0A4FA8;
    opacity: .65;
}

html:not(.dark) .bt-bento .bt-pick__mini { fill: #FFFFFF; opacity: 1; }
html:not(.dark) .bt-bento .bt-pick__miniline { stroke: rgba(10, 79, 168, .45); }

html:not(.dark) .bt-bento .bt-bubble:not(.is-lit) .bt-bubble__line {
    fill: #0A4FA8;
    opacity: .38;
}


/* The floor label sits on pale blue in the light theme, where the amber it
   shares with the limit line is too weak to read; it gets a darker ink. */

/* Between md and xl the last card takes the full row, which would blow the
   lemniscate up to twice the size of every other solid in the set. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .bt-card--chrono .bt-art {
        width: 100%;
        max-width: 420px;
        margin-inline: auto;
    }
}