/* HANS public pages — shared polish for the whitepaper home, Phase 1, Merge, Stake, Swap and Earn.
   Presentation only. The motion hooks (hp-*) are set by /assets/hans-motion.js; each page adds its own touches
   in its inline styles. Everything here is still under prefers-reduced-motion. */
:root{
  --hp-ease:cubic-bezier(.16,1,.3,1);
  --hp-out:cubic-bezier(.33,1,.68,1);
  --hp-spring:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001 85.4%,1);
  --hp-edge:linear-gradient(145deg,rgba(242,245,252,.30),rgba(242,245,252,.08) 36%,rgba(242,245,252,.05) 64%,rgba(166,180,255,.24));
  --hp-edge-hot:linear-gradient(145deg,rgba(255,255,255,.64),rgba(190,202,255,.24) 40%,rgba(150,165,235,.14) 66%,rgba(205,214,255,.5));
  --hp-light:rgba(170,186,255,.12);
  --hp-ink-text:linear-gradient(100deg,#ffffff 8%,#dfe6ff 42%,#aab8f6 78%,#c9b8ff);
}

/* Reveal: below-the-fold content rises in as it is scrolled to (hans-motion.js adds the classes). */
.hp-hide{opacity:0;transform:translate3d(0,18px,0)}
.hp-show{animation:hp-rise .78s var(--hp-ease) backwards;animation-delay:calc(var(--hp-i,0) * 70ms)}
@keyframes hp-rise{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

/* Count-up: the real figure keeps its place (and width); the counting value is drawn over it. */
.hp-counting{position:relative;color:transparent!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important}
.hp-counting::after{content:attr(data-hp-count);position:absolute;inset:0;white-space:nowrap;pointer-events:none;color:var(--hp-count-color,#fff);-webkit-text-fill-color:var(--hp-count-color,#fff)}
.hp-count-clip::after{background:inherit;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Cursor light: a soft glow that follows the pointer across a tile, under its content. */
.hp-tile{isolation:isolate}
.hp-light{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s var(--hp-out);background:radial-gradient(440px circle at var(--mx,50%) var(--my,0%),var(--hp-light),transparent 46%)}
.hp-tile:hover>.hp-light{opacity:1}

/* Sliding indicator for nav groups and segmented controls. */
.hp-thumb{position:absolute;left:0;top:0;width:0;height:0;z-index:0;border-radius:10px;pointer-events:none;opacity:0;background:linear-gradient(120deg,rgba(242,245,252,.13),rgba(242,245,252,.05));box-shadow:inset 0 1px rgba(255,255,255,.09),0 0 0 1px rgba(242,245,252,.13),0 8px 22px -10px rgba(110,130,230,.55);transition:opacity .28s var(--hp-out)}
.hp-thumb.hp-on{opacity:1}
.hp-thumb.hp-ready{transition:transform .56s var(--hp-spring),width .56s var(--hp-spring),height .56s var(--hp-spring),opacity .28s var(--hp-out)}
.hp-thumb-line{border-radius:2px;background:linear-gradient(90deg,#ffffff,#b4c2ff);box-shadow:0 0 12px rgba(166,180,255,.75)}
.hp-thumbed>:not(.hp-thumb){position:relative;z-index:1}

/* Reading progress along the bottom edge of a sticky header (scroll-driven; no script, no main-thread work). */
.hp-progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;transform-origin:0 50%;transform:scaleX(0);pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.9) 70%,#b9c6ff)}
@supports (animation-timeline:scroll()){.hp-progress{opacity:1;animation:hp-progress linear both;animation-timeline:scroll(root)}}
@keyframes hp-progress{to{transform:scaleX(1)}}

/* Page to page: a short cross-fade with a small rise between pages on the same site. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
::view-transition{pointer-events:none}
::view-transition-old(root){animation:hp-vt-out .16s var(--hp-out) both}
::view-transition-new(root){animation:hp-vt-in .44s var(--hp-ease) .05s both}
@keyframes hp-vt-out{to{opacity:0}}
@keyframes hp-vt-in{from{opacity:0;transform:translateY(10px)}}

@media print{
  .hp-hide{opacity:1!important;transform:none!important}
  .hp-progress{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hp-hide{opacity:1;transform:none}
  .hp-show{animation:none}
  .hp-thumb.hp-ready{transition:none}
  .hp-light{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}