/* ==========================================================================
   HazeWallet — shared design system
   One atmosphere, one navigation, one motion language across every page.
   ========================================================================== */

:root{
  --hz-bg-0:#01040e;
  --hz-bg-1:#030b1f;
  --hz-bg-2:#071a3c;
  --hz-cyan:#3fd2ff;
  --hz-blue:#3b82ff;
  --hz-violet:#8a5cff;
  --hz-teal:#4fe2c3;
  --hz-text:#f6f8ff;
  --hz-muted:#8ea4cd;
  --hz-line:rgba(125,164,244,.16);
}

html{background:var(--hz-bg-0)}
body{background:transparent!important}

/* ==========================================================================
   1. THE HAZE ATMOSPHERE
   Layered fixed scene, back to front:
   deep space -> stars -> globe -> orbs -> ridges -> horizon -> fog -> grain.
   Pure CSS except the globe canvas. Everything animates on the compositor
   (transform/opacity only) so it stays cheap.
   ========================================================================== */

.hz-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,#081a3d 0%,#041026 46%,#020817 78%,#01040e 100%)}
.hz-bg *,.hz-bg *:before,.hz-bg *:after{pointer-events:none}

/* --- starfields: two densities, two twinkle rhythms ----------------------- */
.hz-bg-stars{position:absolute;inset:-2%;background-repeat:repeat;will-change:opacity,transform}
.hz-bg-stars-a{
  opacity:.5;
  background-image:
    radial-gradient(circle at 18% 22%,#a8c8ff 0 1px,transparent 1.6px),
    radial-gradient(circle at 74% 14%,#ffffff 0 1px,transparent 1.6px),
    radial-gradient(circle at 52% 58%,#7ea8ff 0 1px,transparent 1.6px),
    radial-gradient(circle at 28% 76%,#d6e4ff 0 1px,transparent 1.6px),
    radial-gradient(circle at 88% 46%,#c9b8ff 0 1px,transparent 1.6px);
  background-size:190px 170px,260px 230px,230px 200px,300px 250px,340px 290px;
  animation:hzTwinkle 9s ease-in-out infinite;
}
.hz-bg-stars-b{
  opacity:.34;
  background-image:
    radial-gradient(circle at 40% 12%,#8fbaff 0 1.4px,transparent 2px),
    radial-gradient(circle at 8% 52%,#ffffff 0 1.2px,transparent 1.8px),
    radial-gradient(circle at 64% 82%,#9fd4ff 0 1.3px,transparent 1.9px),
    radial-gradient(circle at 90% 68%,#e8ddff 0 1.5px,transparent 2.1px);
  background-size:420px 380px,520px 460px,470px 410px,560px 500px;
  animation:hzTwinkle 13s ease-in-out -4s infinite;
}

/* --- wireframe globe (canvas drawn by haze-globe.js) ---------------------- */
.hz-bg-globe{
  position:absolute;left:70%;top:42%;width:min(88vmin,940px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;opacity:0;
  background:radial-gradient(circle at 38% 32%,rgba(70,140,255,.10),rgba(20,50,120,.05) 44%,transparent 66%);
  transition:opacity 1.6s ease .2s;
}
.hz-bg-globe.is-live{opacity:.6}
.hz-bg-globe.is-static{opacity:.42}

/* --- ambient orbs ---------------------------------------------------------- */
.hz-bg-orb{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform,opacity}
.hz-bg-orb-a{width:520px;height:520px;right:4%;top:-16%;background:#1c6dff;opacity:.3;animation:hzOrb 17s ease-in-out infinite alternate}
.hz-bg-orb-b{width:560px;height:560px;left:-14%;bottom:-22%;background:#7a3cff;opacity:.22;animation:hzOrb 21s ease-in-out -6s infinite alternate-reverse}
.hz-bg-orb-c{width:340px;height:340px;left:38%;top:6%;background:#1899c9;opacity:.1;filter:blur(110px);animation:hzOrb 26s ease-in-out -11s infinite alternate}

/* --- mountain ridges: layered silhouettes for depth ------------------------ */
.hz-bg-ridge{position:absolute;left:-6%;right:-6%;bottom:-2%;background-repeat:no-repeat;background-size:cover}
.hz-bg-ridge-back{
  height:40%;
  clip-path:polygon(0 100%,0 55%,8% 62%,17% 47%,29% 58%,38% 41%,48% 55%,57% 38%,67% 58%,78% 45%,88% 57%,100% 42%,100% 100%);
  background:linear-gradient(180deg,rgba(22,58,118,.30),rgba(9,26,58,.78) 46%,rgba(3,10,24,.99) 100%);
  filter:blur(1.5px);opacity:.96;
}
.hz-bg-ridge-front{
  height:33%;bottom:-1%;
  clip-path:polygon(0 100%,0 67%,7% 57%,15% 72%,26% 44%,34% 66%,47% 50%,58% 75%,70% 53%,79% 69%,89% 54%,100% 72%,100% 100%);
  background:linear-gradient(180deg,rgba(24,62,128,.16),rgba(6,17,38,.8) 36%,rgba(2,7,18,1) 100%);
}

/* --- breathing horizon glow ------------------------------------------------- */
.hz-bg-horizon{
  position:absolute;left:-8%;right:-8%;bottom:5%;height:30%;
  background:radial-gradient(ellipse at 50% 62%,rgba(66,148,255,.34),rgba(80,110,255,.12) 34%,rgba(12,20,44,.02) 60%,transparent 74%);
  filter:blur(20px);animation:hzHorizon 11s ease-in-out infinite;will-change:opacity,transform;
}

/* --- drifting fog banks ------------------------------------------------------ */
.hz-bg-fog{position:absolute;left:-16%;right:-16%;border-radius:50%;filter:blur(42px);mix-blend-mode:screen;will-change:transform;pointer-events:none}
.hz-bg-fog-a{
  bottom:6%;height:26%;opacity:.75;
  background:
    radial-gradient(ellipse at 28% 52%,rgba(123,199,255,.20),transparent 58%),
    radial-gradient(ellipse at 56% 50%,rgba(164,118,255,.15),transparent 54%),
    radial-gradient(ellipse at 82% 48%,rgba(109,176,255,.16),transparent 50%);
  animation:hzFogA 26s ease-in-out infinite;
}
.hz-bg-fog-b{
  bottom:13%;height:20%;opacity:.5;
  background:
    radial-gradient(ellipse at 14% 50%,rgba(170,203,255,.14),transparent 46%),
    radial-gradient(ellipse at 45% 46%,rgba(101,157,255,.16),transparent 48%),
    radial-gradient(ellipse at 76% 54%,rgba(170,133,255,.14),transparent 45%);
  animation:hzFogB 34s ease-in-out infinite;
}
.hz-bg-fog-c{
  bottom:-4%;height:22%;opacity:.42;filter:blur(54px);
  background:
    radial-gradient(ellipse at 22% 50%,rgba(96,160,255,.16),transparent 52%),
    radial-gradient(ellipse at 62% 54%,rgba(140,110,255,.14),transparent 50%),
    radial-gradient(ellipse at 88% 46%,rgba(90,200,255,.12),transparent 48%);
  animation:hzFogA 42s ease-in-out -14s infinite reverse;
}

/* --- occasional shooting star -------------------------------------------------- */
.hz-bg-meteor{
  position:absolute;top:12%;left:72%;width:180px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(190,225,255,.95),rgba(120,170,255,.4) 55%,transparent);
  filter:drop-shadow(0 0 6px rgba(140,190,255,.8));
  opacity:0;transform:rotate(-24deg);
  animation:hzMeteor 14s linear 3s infinite;
}

/* --- film grain + vignette ----------------------------------------------------- */
.hz-bg-grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.hz-bg-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 42%,transparent 52%,rgba(1,4,14,.42) 100%),
    linear-gradient(180deg,rgba(1,4,14,.16),transparent 22%,transparent 78%,rgba(1,4,14,.3));
}

/* --- atmosphere keyframes ------------------------------------------------------ */
@keyframes hzTwinkle{0%,100%{opacity:.32;transform:translate3d(0,0,0)}50%{opacity:.58;transform:translate3d(0,-5px,0)}}
@keyframes hzOrb{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(34px,26px,0) scale(1.07)}}
@keyframes hzHorizon{0%,100%{opacity:.7;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.05)}}
@keyframes hzFogA{0%,100%{transform:translate3d(-2.5%,0,0) scale(1)}50%{transform:translate3d(2.5%,-1.5%,0) scale(1.05)}}
@keyframes hzFogB{0%,100%{transform:translate3d(2.5%,0,0) scale(1.03)}50%{transform:translate3d(-2.5%,1.5%,0) scale(1)}}
@keyframes hzMeteor{
  0%{opacity:0;transform:rotate(-24deg) translate3d(0,0,0)}
  3%{opacity:.9}
  11%{opacity:0;transform:rotate(-24deg) translate3d(-46vw,26vh,0)}
  100%{opacity:0;transform:rotate(-24deg) translate3d(-46vw,26vh,0)}
}

/* Globe placement per page (kept subtle, behind content) */
.home-page .hz-bg-globe{left:66%;top:46%}
.studio-body .hz-bg-globe{left:77%;top:46%}
.docs-body .hz-bg-globe{left:79%;top:34%}
.hz-bg-globe{display:none}
@media(min-width:1000px){.hz-bg-globe{display:block}}

/* Compact screens: keep the mood, drop the heaviest layers */
@media(max-width:720px){
  .hz-bg-meteor,.hz-bg-orb-c{display:none}
  .hz-bg-orb{filter:blur(70px)}
  .hz-bg-fog{filter:blur(34px)}
}

/* ==========================================================================
   2. SHARED MOTION UTILITIES
   ========================================================================== */

@keyframes hzRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes hzFade{from{opacity:0}to{opacity:1}}
@keyframes hzStageIn{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:translateY(0) scale(1)}}

.rv{animation:hzRise .72s cubic-bezier(.22,.9,.3,1) both}
.rv-d1{animation-delay:.08s}.rv-d2{animation-delay:.16s}.rv-d3{animation-delay:.26s}
.rv-d4{animation-delay:.36s}.rv-d5{animation-delay:.48s}

/* Scroll-triggered reveal (pages opt in via tiny IO in their own JS) */
.rv-io{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .65s cubic-bezier(.22,.9,.3,1)}
.rv-io.is-in{opacity:1;transform:none}

/* Soft sheen sweep for primary CTAs */
@keyframes hzSheen{0%,52%{transform:translateX(-140%) skewX(-12deg)}88%,100%{transform:translateX(240%) skewX(-12deg)}}
.hz-cta{position:relative!important;overflow:hidden!important}
.hz-cta:after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:46%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32) 50%,transparent);
  transform:translateX(-140%) skewX(-12deg);
  animation:hzSheen 4.8s ease-in-out 1.2s infinite;pointer-events:none;
}
.hz-cta:hover{filter:brightness(1.07)}

/* Gentle glow pulse used on "live" dots and status beads */
@keyframes hzPulseDot{0%,100%{box-shadow:0 0 8px currentColor}50%{box-shadow:0 0 16px currentColor,0 0 3px #fff}}

/* Gradient hairline divider */
.hz-hairline{height:1px;border:0;background:linear-gradient(90deg,transparent,rgba(130,170,255,.35),transparent)}

/* Brand mark ambient glow */
.home-brand img,.brand-mark,.an-brand img{filter:drop-shadow(0 8px 18px rgba(58,113,255,.3))}

/* Shared header shell */
.site-header,.an-header,.home-header{background:rgba(3,10,27,.6)!important;border-bottom:1px solid rgba(130,166,240,.09)!important;backdrop-filter:blur(20px) saturate(130%)}
.footer,.an-footer{background:rgba(2,8,23,.6)!important;backdrop-filter:blur(14px)}
.shared-powered{color:#7d93bb;font-size:10px;letter-spacing:.035em;white-space:nowrap}
.shared-powered strong{color:#dbe8ff;font-weight:800}

/* ==========================================================================
   3. STATIC CROSS-PAGE NAVIGATION
   Every public page uses the same menu geometry so the header never appears
   to jump when moving between Wallet, Add Widget, Analytics, and Docs.
   ========================================================================== */
.hz-header{
  height:72px!important;
  min-height:72px!important;
  position:sticky!important;
  top:0;
  z-index:60!important;
  border-bottom:1px solid rgba(130,166,240,.09)!important;
  background:rgba(3,10,27,.72)!important;
  backdrop-filter:blur(20px) saturate(130%)!important;
}
.hz-nav-shell{
  width:min(1500px,calc(100% - 44px))!important;
  height:72px!important;
  min-height:72px!important;
  margin-inline:auto!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:220px 1fr 168px!important;
  align-items:center!important;
  gap:24px!important;
}
.hz-brand{
  width:220px!important;
  min-width:220px!important;
  display:flex!important;
  align-items:center!important;
  justify-self:start!important;
  gap:10px!important;
}
.hz-brand img,.hz-brand .brand-mark{
  width:40px!important;
  height:40px!important;
  flex:0 0 40px!important;
  object-fit:contain!important;
}
.hz-brand .brand-name,.hz-brand>span,.hz-brand strong{
  font-size:20px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-.04em!important;
  white-space:nowrap!important;
}
.hz-nav{
  margin:0!important;
  justify-self:end!important;
  display:grid!important;
  grid-template-columns:74px 108px 92px 66px!important;
  align-items:center!important;
  gap:4px!important;
}
.hz-nav a{
  box-sizing:border-box!important;
  position:relative!important;
  width:100%!important;
  height:40px!important;
  padding:0 8px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  color:#9eb1d5!important;
  background:transparent!important;
  box-shadow:inset 0 -2px transparent!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:760!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  transition:color .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
.hz-nav a:after{
  content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--hz-cyan),var(--hz-violet));
  transform:scaleX(0);transform-origin:left;opacity:.95;
  transition:transform .24s cubic-bezier(.22,.9,.3,1);
}
.hz-nav a:hover{
  color:#fff!important;
  background:rgba(255,255,255,.045)!important;
}
.hz-nav a:not(.is-active):hover:after{transform:scaleX(1)}
.hz-nav a.is-active:after{display:none}
.hz-nav a.is-active{
  color:#fff!important;
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(107,151,245,.08)!important;
  box-shadow:inset 0 -2px #347fff!important;
}
.hz-actions{
  width:168px!important;
  min-width:168px!important;
  margin:0!important;
  justify-self:end!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
}
.hz-cta{
  box-sizing:border-box!important;
  width:156px!important;
  min-width:156px!important;
  height:42px!important;
  margin:0!important;
  padding:0 14px!important;
  display:inline-grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:12px!important;
  color:#fff!important;
  background:linear-gradient(115deg,#7857ff,#347fff 55%,#35d0ff)!important;
  box-shadow:0 10px 28px rgba(50,103,255,.26),inset 0 1px rgba(255,255,255,.22)!important;
  font-size:11.5px!important;
  line-height:1!important;
  font-weight:820!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  cursor:pointer!important;
  transition:box-shadow .2s ease!important;
}
.hz-cta:hover{box-shadow:0 14px 34px rgba(50,103,255,.36),inset 0 1px rgba(255,255,255,.26)!important}

@media(max-width:900px){
  .hz-nav-shell{
    width:min(100% - 24px,1500px)!important;
    grid-template-columns:52px 1fr 142px!important;
    gap:12px!important;
  }
  .hz-brand{width:52px!important;min-width:52px!important}
  .hz-brand .brand-name,.hz-brand>span,.hz-brand strong{display:none!important}
  .hz-nav{grid-template-columns:64px 96px 82px 58px!important;gap:2px!important}
  .hz-nav a{font-size:11px!important;padding-inline:5px!important}
  .hz-actions{width:142px!important;min-width:142px!important}
  .hz-cta{width:138px!important;min-width:138px!important;font-size:10.5px!important}
}
@media(max-width:700px){
  .hz-header{height:62px!important;min-height:62px!important}
  .hz-nav-shell{
    width:calc(100% - 16px)!important;
    height:62px!important;
    min-height:62px!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:8px!important;
  }
  .hz-brand{width:42px!important;min-width:42px!important}
  .hz-brand img,.hz-brand .brand-mark{width:34px!important;height:34px!important;flex-basis:34px!important}
  .hz-nav{justify-self:stretch!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:2px!important}
  .hz-nav a{height:36px!important;font-size:10px!important;padding-inline:2px!important}
  .hz-nav a:after{left:8px;right:8px;bottom:3px}
  .hz-actions{display:none!important}
}
@media(max-width:410px){
  .hz-nav-shell{grid-template-columns:38px minmax(0,1fr)!important;gap:4px!important}
  .hz-brand{width:38px!important;min-width:38px!important}
  .hz-brand img,.hz-brand .brand-mark{width:31px!important;height:31px!important;flex-basis:31px!important}
  .hz-nav a{font-size:9.4px!important}
}

/* Keep layout calculations synchronized with the shared header height. */
.studio-body{--studio-header-h:72px}
@media(max-width:700px){.studio-body{--studio-header-h:62px}}

/* ==========================================================================
   4. REDUCED MOTION — the scene goes still, content stays visible
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  .hz-bg-stars,.hz-bg-orb,.hz-bg-horizon,.hz-bg-fog,.hz-bg-meteor{animation:none!important}
  .hz-bg-meteor{display:none}
  .hz-cta:after{animation:none!important;display:none}
  .rv,.rv-d1,.rv-d2,.rv-d3,.rv-d4,.rv-d5{animation:none!important}
  .rv-io{opacity:1!important;transform:none!important;transition:none!important}
  .hz-nav a:after{transition:none}
}

/* Shared mountain landscape: a quiet, layered horizon and moving valley fog. */
.hz-bg{background:#091522 url('assets/haze-mountains-dawn.webp') center/cover no-repeat}
.hz-bg-globe,.hz-bg-stars,.hz-bg-meteor,.hz-bg-orb,.hz-bg-ridge,.hz-bg-horizon{display:none}
.hz-bg-vignette{background:linear-gradient(180deg,rgba(3,10,20,.22),transparent 60%,rgba(3,10,20,.28))}
.hz-bg-fog{opacity:.42;filter:blur(32px)}
.hz-bg-fog-a{top:42%;height:30%;background:radial-gradient(ellipse at 25% 50%,#88b5c74d,transparent 60%),radial-gradient(ellipse at 80% 60%,#bacbdf38,transparent 55%)}
.hz-bg-fog-b{top:64%;height:26%;background:radial-gradient(ellipse at 55% 50%,#a5c6d54d,transparent 63%)}
.hz-bg-fog-c{top:78%;height:22%}
.hz-bg:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(2,10,29,.7),rgba(7,20,52,.32));pointer-events:none}