/* Runway brand motion, born from the knot (see the Runway Brand Kit). Loaded after styles.css.
   Every loop has a still frame for reduced motion. One moving brand piece per screen. */
:root{--rw-ease:cubic-bezier(.2,.7,.2,1);--rw-spring:cubic-bezier(.3,1.5,.5,1)}

/* ---------- hourglass: the mark stands up, sand runs through the knot, it flips (waits of 2–10 s) ---------- */
.rw-hg{display:block;width:96px;height:auto;overflow:visible}
.rw-hg .rot{transform-box:view-box;transform-origin:36.71px 25.22px;animation:rwHgRot 4.8s var(--rw-ease) infinite}
.rw-hg .glass{fill:var(--ink)}
.rw-hg .sand{fill:#F2A381;transform-box:fill-box}
.rw-hg .lt{transform-origin:100% 50%;animation:rwHgLT 4.8s linear infinite}
.rw-hg .lp{transform-origin:0% 50%;animation:rwHgLP 4.8s linear infinite}
.rw-hg .rt{transform-origin:0% 50%;animation:rwHgRT 4.8s linear infinite}
.rw-hg .rp{transform-origin:100% 50%;animation:rwHgRP 4.8s linear infinite}
@keyframes rwHgRot{0%,42%{transform:rotate(90deg)}50%,92%{transform:rotate(270deg)}100%{transform:rotate(450deg)}}
@keyframes rwHgLT{0%,8%{transform:scaleX(1)}42%{transform:scaleX(0)}95.9%{transform:scaleX(0)}96%,100%{transform:scaleX(1)}}
@keyframes rwHgLP{0%,58%{transform:scaleX(0)}92%,95.9%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes rwHgRT{0%,45.9%{transform:scaleX(0)}46%,58%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}
@keyframes rwHgRP{0%,8%{transform:scaleX(0)}42%,45.9%{transform:scaleX(1)}46%,100%{transform:scaleX(0)}}

/* ---------- orbit: the mark holds still, a lane circles it (connecting to a bank) ---------- */
.rw-orbit{position:relative;width:96px;height:96px;display:grid;place-items:center;margin:0 auto}
.rw-orbit .ring{position:absolute;inset:0;border-radius:50%;border:2px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.rw-orbit .ring::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:#F2A381;border-right-color:var(--sage);animation:rwSpin 1.4s linear infinite}
.rw-orbit svg{width:44px;height:auto}
.rw-orbit .f{fill:var(--ink)}
@keyframes rwSpin{to{transform:rotate(360deg)}}

/* ---------- rope bar: percent done, the knot rides the tip (syncing balances) ---------- */
.rw-rope{display:grid;gap:10px;width:100%}
.rw-rope .t{position:relative;height:12px;border-radius:12px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
.rw-rope .f{position:absolute;left:0;top:0;bottom:0;width:var(--rwp,0%);border-radius:12px;background:repeating-linear-gradient(-55deg,var(--sage) 0 7px,color-mix(in srgb,var(--sage) 70%,var(--surface)) 7px 12px);background-size:200% 100%;animation:rwTwist 1.2s linear infinite;transition:width .5s var(--rw-ease)}
.rw-rope .k{position:absolute;top:50%;left:var(--rwp,0%);width:30px;height:auto;transform:translate(-50%,-50%);transition:left .5s var(--rw-ease)}
.rw-rope .k path{fill:#F2A381}
.rw-rope .l{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-2)}
.rw-rope .l b{font-variant-numeric:tabular-nums;color:var(--ink)}
@keyframes rwTwist{to{background-position:-24px 0}}

/* ---------- sand skeleton: placeholders for a full-page load (not over real numbers) ---------- */
.rw-sk{display:block;border-radius:10px;background:linear-gradient(100deg,color-mix(in srgb,var(--ink) 7%,transparent) 30%,color-mix(in srgb,#F2A381 30%,transparent) 50%,color-mix(in srgb,var(--ink) 7%,transparent) 70%);background-size:300% 100%;animation:rwSheen 1.8s linear infinite}
@keyframes rwSheen{from{background-position:100% 0}to{background-position:-100% 0}}
.rw-skel{display:grid;gap:12px}
.rw-skel .h{height:20px;width:40%}.rw-skel .big{height:72px;width:30%;border-radius:14px}.rw-skel .ln{height:12px}.rw-skel .ln:nth-child(4){width:80%}.rw-skel .ln:nth-child(5){width:60%}

/* ---------- milestone seal ---------- */
.rw-seal{position:relative;width:104px;height:104px;flex:none;display:grid;place-items:center}
.rw-seal svg.ringt{position:absolute;inset:0;width:100%;height:100%;animation:rwSpin 30s linear infinite}
.rw-seal svg.ringt text{font:700 8.6px var(--body);letter-spacing:.22em;fill:var(--ink-2);text-transform:uppercase}
.rw-seal .core{width:58px;height:58px;border-radius:50%;background:#F2A381;display:grid;place-items:center;box-shadow:0 0 0 6px color-mix(in srgb,#F2A381 25%,transparent);animation:rwSealIn .6s var(--rw-spring) both}
.rw-seal .core svg{width:36px;height:auto}.rw-seal .core path{fill:#163838}
@keyframes rwSealIn{from{transform:scale(.4) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
.ms-won{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 20px;border-radius:var(--r);background:var(--surface);border:1px solid color-mix(in srgb,#F2A381 45%,var(--line))}
.ms-won .tx{flex:1 1 220px;min-width:0}
.ms-won b{display:block;font-family:var(--display);font-size:20px}
.ms-won p{font-size:14px;color:var(--ink-2);margin-top:4px}

/* ---------- grounds: the knot as a quiet pattern, 25% with a slow drift ---------- */
.rw-ground{position:relative;overflow:hidden;isolation:isolate}
.rw-ground::before{content:"";position:absolute;inset:-60px;z-index:-1;pointer-events:none;opacity:.25;background-image:var(--rw-pat);background-size:var(--rw-pat-size);animation:rwDrift 48s linear infinite}
@keyframes rwDrift{to{transform:translate(60px,30px)}}

/* ---------- write-on intro: the first time you arrive from onboarding ---------- */
.rw-intro{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:var(--bg);padding:24px;cursor:pointer;transition:opacity .6s var(--rw-ease),visibility 0s linear .6s}
.rw-intro.out{opacity:0;visibility:hidden}
.rw-intro .wm{width:min(76vw,420px);height:auto;overflow:visible}
.rw-intro .wm path{stroke-width:.6;stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;animation:rwWrite 2.4s var(--rw-ease) .15s forwards}
.rw-intro .wm .t{fill:var(--ink);stroke:var(--ink)}
.rw-intro .wm .m{fill:#F2A381;stroke:#F2A381}
.rw-intro .msg{margin-top:22px;text-align:center;font:600 17px/1.4 var(--body);color:var(--ink-2);opacity:0;animation:rwFade .6s ease 1.9s forwards}
.rw-intro .skip{position:absolute;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));border:0;background:none;font:600 14px/1 var(--body);color:var(--muted);cursor:pointer;padding:10px;border-radius:8px}
.rw-intro .skip:hover{color:var(--ink)}
@keyframes rwWrite{0%{stroke-dashoffset:1;fill-opacity:0}62%{stroke-dashoffset:0;fill-opacity:0}88%,100%{stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0}}
@keyframes rwFade{to{opacity:1}}
body.rw-arrive .inner>*{animation:rwRise .6s var(--rw-ease) both}
body.rw-arrive .inner>*:nth-child(2){animation-delay:.06s}body.rw-arrive .inner>*:nth-child(3){animation-delay:.12s}body.rw-arrive .inner>*:nth-child(4){animation-delay:.18s}body.rw-arrive .inner>*:nth-child(5){animation-delay:.24s}
@keyframes rwRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- waist tooltip: the tail is the knot's pinch ---------- */
.rw-tip{position:absolute;z-index:110;max-width:min(300px,calc(100vw - 24px));padding:12px 14px;border-radius:12px;background:#163838;color:#EFEFED;border:1px solid rgba(239,239,237,.14);font:500 14px/1.45 var(--body);box-shadow:0 12px 30px rgba(0,0,0,.25);animation:rwTipIn .25s var(--rw-ease) both}
.rw-tip b{color:#F2A381}
.rw-tip .tail{position:absolute;left:var(--tx,50%);width:26px;height:10px;transform:translateX(-50%);color:#163838}
.rw-tip.top .tail{bottom:-9px}
.rw-tip.bottom .tail{top:-9px;transform:translateX(-50%) rotate(180deg)}
.rw-tip .tour-h{display:block;font:700 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#F2A381;margin-bottom:6px}
.rw-tip .acts{display:flex;align-items:center;gap:8px;margin-top:12px}
.rw-tip .acts .go{border:0;border-radius:9px;background:#F2A381;color:#163838;font:700 14px/1 var(--body);padding:9px 14px;cursor:pointer}
.rw-tip .acts .no{border:0;background:none;color:inherit;opacity:.8;font:600 14px/1 var(--body);padding:9px 6px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rw-tip .acts .dots{margin-left:auto;display:flex;gap:5px}
.rw-tip .acts .dots i{width:6px;height:6px;border-radius:50%;background:rgba(239,239,237,.35)}
.rw-tip .acts .dots i.on{background:#F2A381}
.rw-tip :focus-visible{outline:2px solid #F2A381;outline-offset:2px}
@keyframes rwTipIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.rw-spot{position:relative;z-index:2;border-radius:var(--r);box-shadow:0 0 0 4px color-mix(in srgb,#F2A381 55%,transparent),0 0 0 9999px color-mix(in srgb,var(--ink) 10%,transparent);transition:box-shadow .3s}
/* definitions: plain words for finance terms, on hover, focus or tap */
.def{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:help;text-decoration:underline dotted color-mix(in srgb,var(--ink) 45%,transparent);text-decoration-thickness:1.5px;text-underline-offset:3px}
.def:hover,.def[aria-expanded="true"]{text-decoration-color:#F2A381}

@media (prefers-reduced-motion:reduce){
  .rw-hg .rot{transform:rotate(90deg)}.rw-hg .lp,.rw-hg .rt,.rw-hg .rp{transform:scaleX(0)}
  .rw-intro .wm path{stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0}.rw-intro .msg{opacity:1}
  .rw-ground::before{animation:none}
}