/* bevr's graphics layer, on top of bevr.css: the patterns (all drawn from the beaver: the tail's cross-hatch, pond
   ripples, log rings, dot grids, little browser frames), the mascot poses and their idle moves, floating live chips,
   the ticker band, and reveals on scroll. Everything that moves only moves while body.moving (the Motion switch). */

/* the decorations reach past the edges on purpose: clip them there (clip, unlike hidden, keeps the sticky header) */
html, body { overflow-x: clip; }

/* ---------- patterns ---------- */
.pat-hatch { background-image: repeating-linear-gradient(45deg, rgba(19,33,61,.06) 0 1.5px, transparent 1.5px 16px), repeating-linear-gradient(-45deg, rgba(19,33,61,.06) 0 1.5px, transparent 1.5px 16px); }
.pat-dots { background-image: radial-gradient(rgba(16,24,40,.2) 1.4px, transparent 1.7px); background-size: 20px 20px; }
.pat-rings { background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 26px, rgba(254,115,54,.16) 26px 27.5px); }
.pat-ripple { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cpath d='M0 14 C 15 4, 30 4, 45 14 S 75 24, 90 14 S 112 6, 120 14' fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='2'/%3E%3C/svg%3E"); background-size: 120px 28px; }
.fade-mask { -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 75%); }

/* a small cross-hatch tile in front of every kicker label: the tail, as the brand's bullet */
.kicker { display: inline-flex; align-items: center; gap: 9px; }
.kicker::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 5px; background-color: var(--tang); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.6) 0 1.5px, transparent 1.5px 5px), repeating-linear-gradient(-45deg, rgba(255,255,255,.6) 0 1.5px, transparent 1.5px 5px); }
.coin .kicker::before, .on-dark .kicker::before { background-color: #FFB48A; }

/* ---------- the mascot poses (art/poses/*.webp): still pictures that act out a step; they don't float or bob ---------- */
.pose { display: block; height: auto; pointer-events: none; user-select: none; filter: drop-shadow(0 12px 14px rgba(16,24,40,.14)); }
/* a peek: a pose tucked behind an edge (the box clips it), rising a little when its section shows */
.peek { position: absolute; overflow: hidden; pointer-events: none; }
.peek .pose { position: absolute; left: 0; right: 0; width: 100%; top: 34%; transition: top 1s cubic-bezier(.3,.8,.2,1) .2s; }
body.moving [data-rv]:not(.in) .peek .pose { top: 100%; }

/* ---------- floating live chips (hero) ---------- */
.fchip { position: absolute; z-index: 7; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px 9px 9px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 30px -16px rgba(16,24,40,.35); font: 700 13px var(--text); white-space: nowrap; }
.fchip i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-size: 13px; background: var(--greenbg); color: var(--green); flex: none; }
.fchip i.t { background: #FFF0E8; color: var(--tang2); } .fchip i.n { background: #EEF2FF; color: #3B5BDB; }
.fchip img { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; }
.fchip small { font: 600 11.5px var(--mono); color: var(--muted); margin-left: 2px; }

/* pond ripples behind the hero phones: rings that widen and fade, one after another */
.ripples { position: absolute; left: 50%; top: 52%; width: 0; height: 0; z-index: 0; pointer-events: none; }
.ripples i { position: absolute; left: -260px; top: -260px; width: 520px; height: 520px; border-radius: 50%; border: 2px solid rgba(254,115,54,.42); opacity: .8; }
.ripples i:nth-child(2) { transform: scale(.72); } .ripples i:nth-child(3) { transform: scale(.46); }

/* ---------- the ticker band: real coins, live numbers ---------- */
.band { position: relative; overflow: hidden; background: #101828; color: #fff; padding: 14px 0; margin: 26px 0 0; }
.band::before, .band::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; }
.band::before { left: 0; background: linear-gradient(90deg, #101828, transparent); } .band::after { right: 0; background: linear-gradient(-90deg, #101828, transparent); }
.band .track { display: flex; gap: 14px; width: max-content; }
body.moving .band .track { animation: band 40s linear infinite; }
@keyframes band { to { transform: translateX(-50%); } }
.band a { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 99px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); text-decoration: none; font: 700 14px var(--text); white-space: nowrap; }
.band a img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.band a span { font: 600 13px var(--mono); color: rgba(255,255,255,.7); }
.band a em { font: 700 12.5px var(--mono); font-style: normal; }
.band a em.up { color: #3DDC97; } .band a em.down { color: #FF8A8A; }
.band .built { color: #FFB48A; font: 700 12px var(--mono); letter-spacing: .12em; display: inline-flex; align-items: center; padding: 0 6px; }

/* ---------- reveals on scroll ---------- */
body.moving [data-rv] { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 70ms); }
body.moving [data-rv].in { opacity: 1; transform: none; }
body.moving [data-rv="pop"] { transform: translateY(14px); }
body.moving [data-rv="pop"].in { transform: none; }

/* little line icons (proof row) */
.ico-l { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #FFF0E8; color: var(--tang2); margin-bottom: 12px; }
.ico-l svg { width: 20px; height: 20px; }

/* a browser frame drawn in lines, drifting (decoration around sections) */
.bframe { position: absolute; width: 92px; height: 66px; border-radius: 10px; border: 1.5px solid rgba(16,24,40,.12); background: rgba(255,255,255,.5); pointer-events: none; }
.bframe::before { content: ""; position: absolute; left: 8px; top: 8px; width: 22px; height: 5px; border-radius: 3px; background: radial-gradient(circle, rgba(16,24,40,.2) 2.4px, transparent 2.6px) 0 0 / 8px 5px repeat-x; }
.bframe::after { content: ""; position: absolute; left: 8px; right: 8px; top: 20px; bottom: 8px; border-radius: 6px; background: repeating-linear-gradient(0deg, rgba(16,24,40,.07) 0 4px, transparent 4px 10px); }