/* Plinq motion layer, ported from the Pairpop site.
   Transform and opacity only, so everything stays on the compositor.
   prefers-reduced-motion switches the whole layer off. */

/* ---------- Robinhood Chain badge (static styling, always on) ---------- */
.tp-chain{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid rgba(30,26,36,.08);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#1E1A24;font-size:14px;font-weight:500;line-height:1;text-decoration:none;
  box-shadow:0 6px 18px rgba(28,58,92,.10);width:max-content;margin:14px 0 4px;
  transition:transform 260ms cubic-bezier(.22,1,.36,1),box-shadow 260ms cubic-bezier(.22,1,.36,1)}
.tp-chain:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(28,58,92,.16)}
.tp-chain img{width:22px;height:22px;border-radius:6px;display:block}
.tp-chain b{font-weight:700}
.tp-chain-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;
  box-shadow:0 0 0 0 rgba(34,197,94,.55)}
.tp-chain-sm{font-size:13px;padding:6px 12px 6px 8px;margin:6px 0 0}
.tp-chain-sm img{width:18px;height:18px}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .tp-chain-dot{animation:tpPulse 1.8s ease-out infinite}
  @keyframes tpPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

  /* ---------- scroll reveal ---------- */
  [data-reveal]{opacity:0;transform:translate3d(0,var(--rv-y,22px),0) scale(var(--rv-s,1));
    transition:opacity 720ms cubic-bezier(.22,1,.36,1),transform 720ms cubic-bezier(.22,1,.36,1);
    transition-delay:var(--rv-d,0ms);will-change:transform,opacity}
  [data-reveal].rv-in{opacity:1;transform:translate3d(0,0,0) scale(1)}
  [data-reveal].rv-done{will-change:auto}
  h2[data-reveal]{--rv-y:26px;--rv-s:.985}
  .tp-eyebrow[data-reveal]{--rv-y:14px}
  .tp-item[data-reveal],.faq-item[data-reveal],#feature-list>[data-reveal]{--rv-y:26px;--rv-s:.978}

  /* ---------- hero entrance ---------- */
  .tp-hero-rise>*{opacity:0;transform:translate3d(0,18px,0);
    animation:heroRise 900ms cubic-bezier(.22,1,.36,1) both}
  .tp-hero-rise>*:nth-child(1){animation-delay:120ms}
  .tp-hero-rise>*:nth-child(2){animation-delay:220ms}
  .tp-hero-rise>*:nth-child(3){animation-delay:320ms}
  .tp-hero-rise>*:nth-child(4){animation-delay:420ms}
  .tp-hero-rise>*:nth-child(5){animation-delay:520ms}
  .tp-hero-rise>*:nth-child(n+6){animation-delay:620ms}
  @keyframes heroRise{to{opacity:1;transform:translate3d(0,0,0)}}

  /* ---------- hover lift and press ---------- */
  .tp-card,.faq-item,#feature-list>*{transition:transform 320ms cubic-bezier(.22,1,.36,1),box-shadow 320ms cubic-bezier(.22,1,.36,1)}
  .tp-card:hover,.faq-item:hover,#feature-list>*:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(28,58,92,.12)}
  button,a.tp-ca,a[data-store]{transition:transform 180ms cubic-bezier(.22,1,.36,1)}
  button:active,a.tp-ca:active,a[data-store]:active{transform:scale(.97)}

  /* ---------- cloud parallax (container level, spans keep their own drift) ---------- */
  .cloudscape{transform:translate3d(0,var(--px,0px),0);will-change:transform}
}

/* ---------- sticky header: blurred glass with a soft fade at its bottom edge ---------- */
.tp-header{--tp-h-alpha:.42;isolation:isolate}
.tp-header-bg{position:absolute;inset:-1px 0 -26px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.72) 55%,rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.55) 82%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.55) 82%,rgba(0,0,0,0) 100%);
  opacity:var(--tp-h-alpha);transition:opacity 320ms ease}
.tp-header.tp-stuck{--tp-h-alpha:1}
.tp-header.tp-stuck .tp-header-bg{box-shadow:0 1px 0 rgba(30,26,36,.06)}
.tp-header-inner{position:relative}
.tp-nav a{position:relative;color:#1E1A24;text-decoration:none;padding:2px 0;
  transition:color 220ms ease,opacity 220ms ease}
.tp-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;
  background:#1E1A24;transform:scaleX(0);transform-origin:50% 50%;opacity:.85;
  transition:transform 280ms cubic-bezier(.22,1,.36,1)}
.tp-nav a:hover::after{transform:scaleX(1)}
.tp-nav a.tp-nav-x::after{display:none}
.tp-nav a.tp-nav-x{opacity:.7;transition:opacity 220ms ease,transform 220ms ease}
.tp-nav a.tp-nav-x:hover{opacity:1;transform:translateY(-1px)}
.tp-actions>a{transition:transform 240ms cubic-bezier(.22,1,.36,1),box-shadow 240ms ease;border-radius:12px}
.tp-actions>a:hover{transform:translateY(-2px)}
.tp-actions>a:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  .tp-header-bg{transition:none}
  .tp-nav a::after,.tp-actions>a{transition:none}
}
/* clouds.css pins body>header to position:relative, which killed the sticky. Win it back. */
body>header.tp-header{position:sticky;top:0;z-index:60}
.tp-nav a.tp-nav-x{display:inline-flex;align-items:center;line-height:0}
/* true optical centering of the nav on wide screens, flex centering below that */
@media (min-width:1280px){
  .tp-header-inner{position:relative}
  .tp-header-inner>.tp-nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
}

/* ---------- brand accent, pulled from the logo mark ---------- */
:root{--tp-blue:#0B3CE8;--tp-blue-deep:#001C8C;--tp-blue-soft:#8FB4FF}
.tp-nav a::after{background:var(--tp-blue)}
.tp-nav a:hover{color:var(--tp-blue)}
.tp-card:hover,.faq-item:hover,#feature-list>*:hover{box-shadow:0 18px 40px rgba(11,60,232,.14)}
.tp-chain:hover{border-color:rgba(11,60,232,.28);box-shadow:0 10px 26px rgba(11,60,232,.16)}
a:focus-visible,button:focus-visible{outline:2px solid var(--tp-blue);outline-offset:3px;border-radius:10px}
.tp-ca:hover{border-color:rgba(11,60,232,.35)}