/* eagleview-shared.css — one source of truth for styles used on both
   index.html and eagleview_payment.html. Anything page-specific (hero
   layout, form styles, orb positions, buttons, etc.) still lives inline
   in the page's own <style> block. If a rule feels shared but you can't
   verify it's identical on both pages, keep it inline until it clearly
   is — silent visual drift is worse than a little duplication.

   Loaded via <link rel="stylesheet"> BEFORE the inline <style>, so a
   page can still override a shared rule if it genuinely needs to. */

/* ── Design tokens ─────────────────────────────────────────────── */
:root{
  --bg:#030612;--bg2:#06091A;--sf:#0C1228;--sf2:#101830;
  --cy:#00E5FF;--or:#FF6820;--or2:#CC4400;--pu:#7C3AED;--gr:#00E676;
  --tx:#E2E8F0;--tx2:#7A8FA8;--tx3:#364555;
  --mn:'SF Mono','Consolas','Monaco','Courier New',monospace;
  /* Brand orange used for panel border, chip border, and CTA gradients.
     Defined once here so every page uses the same warm PearlFox tone. */
  --fox:#FC8215;--fox-lite:#FDA149;
}

/* ── Global reset + base ───────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  background:var(--bg);color:var(--tx);overflow-x:hidden;
  cursor:url('eagle-cursor.svg') 32 32,auto;
  /* Kill rubber-band scroll chaining — keeps the page feeling anchored. */
  overscroll-behavior-y:none;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg width='56' height='100' viewBox='0 0 56 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 0L56 16v32L28 64 0 48V16L28 0z' fill='none' stroke='rgba(0%2C229%2C255%2C0.09)' stroke-width='1'/%3E%3C/svg%3E");
  /* Promote to its own compositor layer so scrolling doesn't repaint the
     tiled background pattern on every frame. */
  transform:translateZ(0);will-change:transform;
}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--bg2);}
::-webkit-scrollbar-thumb{background:rgba(0,229,255,0.3);border-radius:2px;}

/* ── Keyframes (page-independent) ──────────────────────────────── */
/* float1/2/3 amplitudes standardised across pages — the two files used
   to have subtly different values (-16/13/-9 vs -14/11/-8); the smaller
   set is used here to keep motion gentle on both. */
@keyframes float1{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-14px) rotate(.5deg);}}
@keyframes float2{0%,100%{transform:translateY(0);}50%{transform:translateY(11px) rotate(-.5deg);}}
@keyframes float3{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.75);}}
@keyframes pulseRing{from{transform:scale(1);opacity:.5;}to{transform:scale(2.2);opacity:0;}}
@keyframes glowBorder{0%,100%{border-color:rgba(0,229,255,.18);box-shadow:0 0 6px rgba(0,229,255,.08);}50%{border-color:rgba(0,229,255,.45);box-shadow:0 0 20px rgba(0,229,255,.28);}}
@keyframes scanDown{0%{top:-3px;opacity:0;}5%{opacity:1;}95%{opacity:1;}100%{top:100%;opacity:0;}}
@keyframes shimmer{0%{background-position:-300% center;}100%{background-position:300% center;}}
@keyframes beam{0%{left:-80%;}100%{left:180%;}}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
@keyframes orb{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(40px,-30px) scale(1.06);}66%{transform:translate(-25px,35px) scale(.94);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;}}

/* ── Nav wrapper + PearlFox logo lockup ───────────────────────── */
/* .nwrap gives the nav its own 1280px centered container so the logo
   lines up horizontally with hero/form content on any viewport. */
.nwrap{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;}
/* PearlFox nav-logo (ported from pearlfox-site/shared.css): icon + wordmark
   sit tight together via a negative left margin on the word, so the mark
   reads as a single lockup. */
.nav-logo-target{display:flex;align-items:center;gap:0;width:244px;height:50px;opacity:1;text-decoration:none;}
.nav-logo-target-icon{width:47px;height:47px;flex-shrink:0;}
.nav-logo-target-word{width:188px;height:31px;margin-left:-34px;}
.nav-landing-img{display:block;width:100%;height:100%;object-fit:contain;}

/* ── Panel effects (used by both pages) ───────────────────────── */
/* .mr / .mr2 are the pulsing rings that sit behind the .asb panel.
   .asb::before is the cyan scan line that sweeps down the panel top. */
/* All three animate infinitely — will-change hints them onto the GPU
   compositor so the surrounding panel doesn't repaint on every frame. */
.mr{position:absolute;inset:-50px;border-radius:50%;border:1px solid rgba(0,229,255,.06);animation:pulseRing 4s ease-in-out infinite;pointer-events:none;will-change:transform,opacity;}
.mr2{position:absolute;inset:-80px;border-radius:50%;border:1px solid rgba(0,229,255,.03);animation:pulseRing 4s 2s ease-in-out infinite;pointer-events:none;will-change:transform,opacity;}
.asb::before{content:'';position:absolute;left:0;right:0;height:2px;z-index:10;background:linear-gradient(90deg,transparent,var(--cy) 40%,var(--cy) 60%,transparent);box-shadow:0 0 16px var(--cy),0 0 32px rgba(0,229,255,.5);animation:scanDown 5s linear infinite;pointer-events:none;will-change:top,opacity;}

/* ── Floating chip system (fc1 top-left / fc2 right-middle / fc3 bottom-left) ── */
/* Positions relative to the chips' containing block (.hm on home,
   .col-mock on payment — both are flex:0 0 auto;position:relative and
   sized by the .asb panel width, so identical offsets translate). */
/* `contain:layout paint` isolates the chip's layout box from the rest of
   the page, and will-change:transform keeps the float animation on the
   compositor thread. */
.fc{position:absolute;background:#1A1410;border:1px solid var(--fox);border-radius:12px;padding:12px 16px;box-shadow:0 8px 32px #000,0 0 24px rgba(252,130,21,.15);font-size:12px;white-space:nowrap;z-index:2;contain:layout paint;will-change:transform;}
.fc1{top:32px;left:-170px;animation:float2 5s ease-in-out infinite;}
.fc2{bottom:340px;right:-142px;animation:float1 6s ease-in-out infinite;}
.fc3{bottom:88px;left:-170px;animation:float3 5.5s ease-in-out infinite;}
.fcl{font-size:9px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;}
.fcv{font-size:16px;font-weight:800;color:var(--tx);}
.fcs{font-size:10px;margin-top:3px;font-weight:600;color:var(--tx2);}

/* ── Responsive: hide the panel column + chips on mobile ─────── */
@media(max-width:960px){
  .fc{display:none;}
  .nav-logo-target{width:165px;height:36px;}
  .nav-logo-target-icon{width:33px;height:33px;}
  .nav-logo-target-word{width:132px;height:22px;margin-left:-24px;}
}