/* ============================================================
   SELIUS - motion
   Interaction feedback first, decoration second. Every block
   here collapses to nothing under prefers-reduced-motion.
   ============================================================ */

/* ============================================================
   PAGE ENTER / LEAVE
   ============================================================ */
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.main{animation:pageIn .5s var(--ease) both}
body.leaving .main{opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease}
body.leaving .nav{opacity:.5;transition:opacity .2s ease}

/* ============================================================
   BANNER : the artwork behind the hero and page headers
   ============================================================ */
.banner{
  position:absolute;inset:-14% 0;z-index:0;z-index:0;pointer-events:none;overflow:hidden;
  background:#000 url('../img/banner.svg') center/cover no-repeat;
  transform:translate3d(0,var(--par,0px),0) scale(var(--bg-zoom,1.02));
  transform-origin:center center;
  will-change:transform;
}
/* keeps type legible wherever the artwork happens to be bright */
.banner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.18) 38%,rgba(0,0,0,.86) 100%);
}
/* scenes carry their own scroll-driven opacity/transform, written inline by
   motion.js. They only need the origin and a starting state for no-JS. */
[data-scene]{transform-origin:center top;will-change:opacity,transform}
.phead__in{position:relative;z-index:1}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-rv]{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .8s var(--ease),filter .7s var(--ease);
  transition-delay:var(--rv-d,0ms);
}
[data-rv].in{opacity:1;transform:none;filter:blur(0)}
/* leaving upward drops the element back the other way, so a scroll up
   replays the entrance instead of showing a static block */
[data-rv].out-up{opacity:0;transform:translateY(-26px);transition-delay:0ms}
[data-rv].out-down{opacity:0;transform:translateY(26px);transition-delay:0ms}
[data-rv="left"]{transform:translateX(-34px)}
[data-rv="left"].out-up,[data-rv="left"].out-down{transform:translateX(-34px)}
[data-rv="right"]{transform:translateX(34px)}
[data-rv="right"].out-up,[data-rv="right"].out-down{transform:translateX(34px)}
[data-rv="blur"]{filter:blur(10px)}
[data-rv="blur"].out-up,[data-rv="blur"].out-down{filter:blur(10px)}

/* ============================================================
   HERO HEADLINE
   The word slides up out of a clipped box. That box has to be
   bigger than the glyphs on every side or it shears ascenders,
   descenders and side bearings. Pad it out, pull the padding
   back off the margin so layout is untouched, and translate by
   more than 100% so nothing peeks below before it animates.
   ============================================================ */
/* overflow:hidden would clip on all four sides, so the box needs padding, and
   padding then needs negative margin, which squeezes the word gaps. clip-path
   avoids the whole chain: negative insets open the top and sides right up, and
   only the bottom edge actually masks, which is the one the slide needs. */
.hw{
  display:inline-block;vertical-align:top;
  clip-path:inset(-.35em -.4em -.09em -.4em);
}
.hw>i{
  display:inline-block;font-style:normal;transform:translateY(135%);
  transition:transform 1s var(--ease);
  transition-delay:calc(var(--i,0)*52ms + 80ms);
}
.loaded .hw>i{transform:none}

/* a rule draws itself under the hero once the words have landed */
.banner--head{inset:-30% 0 -10%;opacity:.62}
.banner--head::after{
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.15) 42%,#000 100%);
}

.hero__rule{
  height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transform:scaleX(0);transition:transform 1.1s var(--ease) .55s;
  margin:clamp(22px,2.4vw,34px) auto 0;max-width:min(560px,70%);
}
.loaded .banner--head{inset:-30% 0 -10%;opacity:.62}
.banner--head::after{
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.15) 42%,#000 100%);
}

.hero__rule{transform:scaleX(1)}

/* ============================================================
   NAV
   ============================================================ */
@keyframes navIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.nav__body>*{animation:navIn .5s var(--ease) both}
.nav__body>*:nth-child(1){animation-delay:.04s}
.nav__body>*:nth-child(2){animation-delay:.09s}
.nav__body>*:nth-child(3){animation-delay:.14s}
.nav__body>*:nth-child(4){animation-delay:.19s}
.nav__body>*:nth-child(5){animation-delay:.24s}

.nav__item.is-active::before{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:2px;height:0;background:var(--accent);border-radius:2px;
  box-shadow:0 0 10px var(--accent);
  animation:mark .5s var(--ease) forwards;
}
@keyframes mark{to{height:60%}}

.nav__ico{transition:transform .32s var(--ease),color .25s var(--ease)}
.nav__tx{transition:transform .32s var(--ease)}
.nav__item:hover .nav__ico{transform:translateX(-2px)}
.nav__item:hover .nav__tx{transform:translateX(-4px)}
.nav__dot{transition:background .2s,transform .32s var(--ease)}
.nav__item:hover .nav__dot{transform:scale(1.6)}
.nav__logo{transition:transform .5s var(--ease),filter .5s var(--ease)}
.nav__brand:hover .nav__logo{transform:rotate(-8deg) scale(1.08);filter:brightness(1.3)}

/* ============================================================
   BUTTONS : a fill wipes across on hover
   ============================================================ */
.btn{overflow:hidden;isolation:isolate}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease);
}
.btn--p::before{background:var(--accent)}
.btn--s::before{background:var(--panel-3)}
.btn--p:hover::before,.btn--s:hover::before{transform:scaleX(1)}
.btn svg{transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}

/* ============================================================
   PANEL : cursor light + corner ticks
   ============================================================ */
.panel{transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(174,178,247,.07),transparent 62%);
  transition:opacity .45s var(--ease);
}
.panel:hover::before{opacity:1}
.panel:hover{transform:translateY(-1px)}
[data-rv].in.panel::after,[data-rv].in .panel::after{animation:tickIn .8s var(--ease) .2s both}
@keyframes tickIn{from{opacity:0}to{opacity:.3}}

/* ============================================================
   ACTION CARDS
   ============================================================ */
.act{overflow:hidden}
.act__t{transition:transform .4s var(--ease)}
.act:hover .act__t{transform:translateX(6px)}
.act__f{transition:color .25s,transform .4s var(--ease)}
.act:hover .act__f{transform:translateX(6px)}
.act::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--accent),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.act:hover::after{transform:scaleX(1)}

/* ============================================================
   LEDGER
   ============================================================ */
.ldg__l li{transition:color .22s,padding-left .3s var(--ease),background .22s}
.ldg__l li:hover{color:var(--text);padding-left:8px;background:rgba(255,255,255,.02)}
.ldg__l li b{transition:transform .3s var(--ease),color .22s}
.ldg__l li:hover b{transform:translateX(2px);color:var(--accent)}
.ldg.in .ldg__l li{animation:lineIn .55s var(--ease) both}
@keyframes lineIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ldg.in .ldg__l li:nth-child(1){animation-delay:.10s}
.ldg.in .ldg__l li:nth-child(2){animation-delay:.17s}
.ldg.in .ldg__l li:nth-child(3){animation-delay:.24s}
.ldg.in .ldg__l li:nth-child(4){animation-delay:.31s}

/* ============================================================
   BOARD ROWS
   ============================================================ */
.row{transition:background .18s,padding-left .3s var(--ease)}
.row:hover{padding-left:22px}
.row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease);
}
.row:hover::before,.row.sel::before{transform:scaleY(1)}

/* ============================================================
   EMPTY STATES : a slow drifting hatch so the panel is not dead
   ============================================================ */
.rows__empty,.insp__empty{position:relative;overflow:hidden}
.rows__empty::before,.insp__empty::before{
  content:'';position:absolute;inset:-40%;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(45deg,transparent 0 13px,rgba(255,255,255,.022) 13px 14px);
  animation:hatch 22s linear infinite;
}
@keyframes hatch{to{transform:translate(19.8px,19.8px)}}
.rows__empty span,.insp__empty span{position:relative}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.f__i,.f__s,.fbar__search{transition:border-color .22s,background .22s,box-shadow .32s var(--ease)}
.f__i:focus,.f__s:focus,.fbar__search:focus-within{box-shadow:0 0 0 3px rgba(174,178,247,.1)}
.chipf{transition:background .2s,border-color .2s,color .2s,transform .28s var(--ease)}
.chipf:hover{transform:translateY(-1px)}
.chipf.on{animation:chipOn .4s var(--ease)}
@keyframes chipOn{from{transform:scale(.9)}to{transform:none}}

/* ============================================================
   DOCS
   ============================================================ */
.doc__s h2{position:relative}
.doc__s h2::before{
  content:'';position:absolute;left:-18px;top:.3em;width:3px;height:0;background:var(--accent);
  transition:height .5s var(--ease);
}
.doc__s.seen h2::before{height:.72em}
.kv2{transition:background .2s,padding-left .28s var(--ease)}
.kv2:hover{background:rgba(255,255,255,.018);padding-left:6px}
.toc a{transition:color .2s,transform .28s var(--ease)}
.toc a:hover{transform:translateX(3px)}
.toc a.on{position:relative}
.toc a.on::before{content:'';position:absolute;left:-19px;top:50%;transform:translateY(-50%);width:2px;height:14px;background:var(--accent)}

/* ============================================================
   MISC
   ============================================================ */
.ul{position:relative}
.ul::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.ul:hover::after{transform:scaleX(1);transform-origin:left}
.tag{transition:border-color .22s,color .22s,transform .28s var(--ease)}
.tag:hover{border-color:var(--line-3);color:var(--text)}
.foot__l a{transition:color .2s,transform .28s var(--ease);display:inline-block}
.foot__l a:hover{transform:translateY(-1px)}
.sec__ix{font-variant-numeric:tabular-nums}

.scan{position:relative;overflow:hidden}
.scan::after{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:scan 1.15s linear infinite;
}
@keyframes scan{0%{transform:translateY(0)}100%{transform:translateY(var(--scanh,48px))}}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  [data-rv],[data-rv].in,.hw>i,.banner--head{inset:-30% 0 -10%;opacity:.62}
.banner--head::after{
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.15) 42%,#000 100%);
}

.hero__rule{
    opacity:1!important;transform:none!important;filter:none!important;
  }
  .banner{transform:none}
  [data-scene]{opacity:1!important;transform:none!important}
  .rows__empty::before,.insp__empty::before,.scan::after,
  .nav__body>*,.ldg.in .ldg__l li{animation:none!important}
  body.leaving .main{opacity:1;transform:none}
}