/* ============================================================
   Claira — components: chrome, controls, surfaces, overlays
   ============================================================ */

/* ── navigation ─────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0;
  z-index:80;
  padding:18px 0;
  will-change:transform;
  transition:transform var(--t-m) var(--e-out), padding var(--t-m) var(--e-out);
}
.nav::before{
  content:"";
  position:absolute; inset:0;
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.34));
  border-bottom:1px solid rgba(255,255,255,.34);
  opacity:1;
  transition:border-color var(--t-m) linear, background var(--t-m) linear;
}
.nav.is-stuck{ padding:11px 0; }
.nav.is-stuck::before{
  border-bottom-color:rgba(255,255,255,.7);
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.46));
}
.nav.is-hidden{ transform:translate3d(0,-104%,0); }

.nav__in{
  position:relative;
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
}

.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand__mark{
  width:30px; height:30px; border-radius:9px;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.75), var(--lift);
  transition:transform var(--t-s) var(--e-out);
}
.brand:hover .brand__mark{ transform:rotate(-8deg) scale(1.06); }
.brand__word{
  font-family:var(--f-display);
  font-weight:600; font-size:21px;
  letter-spacing:-.03em;
  color:var(--ink);
}

.nav__links{ display:flex; align-items:center; gap:4px; }
.nav__link{
  position:relative;
  padding:9px 15px;
  font-size:14px; font-weight:500;
  color:var(--dim);
  border-radius:99px;
  transition:color var(--t-s) var(--e-out);
}
.nav__link::before{
  content:"";
  position:absolute; inset:0;
  border-radius:99px;
  background:rgba(255,255,255,.7);
  opacity:0; transform:scale(.9);
  transition:opacity var(--t-s) var(--e-out), transform var(--t-s) var(--e-out);
}
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::before{ opacity:1; transform:scale(1); }
.nav__link.is-here{ color:var(--ink); }
.nav__link.is-here::before{ opacity:1; transform:scale(1); }
.nav__link span{ position:relative; }

.nav__side{ display:flex; align-items:center; gap:10px; }

.nav__burger{
  display:none;
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.5);
  align-items:center; justify-content:center;
}
.nav__burger i{
  display:block; width:15px; height:1.6px;
  background:var(--ink); border-radius:2px;
  position:relative;
  transition:transform var(--t-s) var(--e-out);
}
.nav__burger i::before,.nav__burger i::after{
  content:""; position:absolute; left:0; width:15px; height:1.6px;
  background:var(--ink); border-radius:2px;
  transition:transform var(--t-s) var(--e-out), opacity var(--t-s) linear;
}
.nav__burger i::before{ top:-5px; }
.nav__burger i::after{ top:5px; }
.nav.is-open .nav__burger i{ transform:rotate(45deg); }
.nav.is-open .nav__burger i::before{ transform:translateY(5px) rotate(-90deg); }
.nav.is-open .nav__burger i::after{ opacity:0; }

/* ── buttons ────────────────────────────────────────────── */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px;
  border-radius:99px;
  font-family:var(--f-display);
  font-weight:500; font-size:14.5px;
  letter-spacing:-.01em;
  white-space:nowrap;
  transition:transform var(--t-s) var(--e-out), background-position var(--t-m) var(--e-out),
             background-color var(--t-s) linear, color var(--t-s) linear,
             border-color var(--t-s) linear, opacity var(--t-s) linear,
             box-shadow var(--t-s) linear;
}
.btn:active{ transform:scale(.97); }
.btn[disabled]{ opacity:.45; pointer-events:none; }

.btn--solid{
  color:var(--white);
  background-image:var(--grad-deep);
  background-size:190% 190%;
  background-position:0% 50%;
  box-shadow:0 14px 30px -14px rgba(110,92,228,.75);
}
.btn--solid:hover{
  background-position:100% 50%;
  transform:translateY(-2px);
  box-shadow:0 18px 34px -14px rgba(110,92,228,.8);
}

.btn--ghost{
  color:var(--ink);
  border:1px solid var(--line-strong);
  background-color:rgba(255,255,255,.5);
}
.btn--ghost:hover{ background-color:rgba(255,255,255,.85); border-color:rgba(44,26,99,.3); transform:translateY(-2px); }

/* contract address — click to copy */
.btn--ca{
  font-family:var(--f-mono);
  font-size:12px; font-weight:600;
  letter-spacing:.02em;
  background-color:rgba(255,255,255,.72);
}
.btn--ca.is-copied{
  color:var(--white);
  background-color:var(--violet);
  border-color:var(--violet);
}

.btn--bare{ padding-inline:4px; color:var(--dim); }
.btn--bare:hover{ color:var(--ink); }

.btn--lg{ padding:15px 28px; font-size:16px; }
.btn--sm{ padding:8px 14px; font-size:13px; }
.btn--full{ width:100%; justify-content:center; }

/* pending state: a ring that turns while a transaction is confirming */
.btn.is-busy{ opacity:1; }
.btn.is-busy::after{
  content:"";
  width:13px; height:13px;
  border-radius:50%;
  border:2px solid currentColor;
  border-top-color:transparent;
  opacity:.85;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.btn .arrow{
  display:inline-block;
  transition:transform var(--t-s) var(--e-out);
}
.btn:hover .arrow{ transform:translateX(4px); }

/* ── surfaces ───────────────────────────────────────────── */
.panel{
  position:relative;
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--r-l);
  background:var(--panel);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--lift);
}
.panel--pad{ padding:clamp(20px,2.4vw,34px); }

.rule{ height:1px; background:var(--line); border:0; margin:0; }

.krow{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.krow:last-child{ border-bottom:0; }
.krow > span:first-child{ color:var(--dim); }
.krow > span:last-child{ text-align:right; }

/* ── overlays: modal ────────────────────────────────────── */
.modal{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:20px;
  visibility:hidden; opacity:0;
  transition:opacity var(--t-m) var(--e-out), visibility 0s linear var(--t-m);
}
.modal.is-open{ visibility:visible; opacity:1; transition-delay:0s; }
.modal__bg{
  position:absolute; inset:0;
  background:rgba(58,34,120,.32);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.modal__card{
  position:relative;
  width:min(440px,100%);
  padding:24px;
  border-radius:var(--r-l);
  border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(180deg,#ffffff,#FBF2FD);
  box-shadow:var(--lift-2);
  transform:translateY(14px) scale(.97);
  opacity:0;
  transition:transform var(--t-m) var(--e-out), opacity var(--t-m) var(--e-out);
  max-height:88vh; overflow:auto;
}
.modal.is-open .modal__card{ transform:none; opacity:1; }
.modal__hd{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
}

.wopt{
  display:flex; align-items:center; gap:13px;
  width:100%; padding:13px 14px;
  margin-bottom:8px;
  border-radius:var(--r-s);
  border:1px solid var(--line);
  background:rgba(255,255,255,.66);
  text-align:left;
  transition:background var(--t-s) linear, border-color var(--t-s) linear, transform var(--t-s) var(--e-out);
}
.wopt:hover{ background:#fff; border-color:var(--line-strong); transform:translateX(3px); }
.wopt__ic{
  display:grid; place-items:center;
  width:34px; height:34px; flex:none;
  border-radius:10px;
  background-image:var(--grad-deep);
  color:var(--white);
  font-family:var(--f-display); font-weight:600; font-size:14px;
  overflow:hidden;
}
.wopt b{ display:block; font-family:var(--f-display); font-weight:500; font-size:15px; }
.wopt small{ display:block; font-size:12px; color:var(--dimmer); }

/* ── overlays: toast ────────────────────────────────────── */
.toast{
  position:fixed; z-index:300;
  left:50%; bottom:26px;
  transform:translate3d(-50%,20px,0);
  padding:12px 20px;
  border-radius:99px;
  border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--lift-2);
  font-size:14px;
  color:var(--ink);
  opacity:0; pointer-events:none;
  transition:opacity var(--t-s) var(--e-out), transform var(--t-s) var(--e-out);
  max-width:calc(100vw - 40px);
  text-align:center;
}
.toast.is-on{ opacity:1; transform:translate3d(-50%,0,0); }

/* ── footer ─────────────────────────────────────────────── */
.foot{
  position:relative;
  border-top:1px solid var(--line);
  padding:30px 0 32px;
  margin-top:calc(var(--sec) * .35);
}
.foot__in{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px 40px;
}
.foot__links{ display:flex; gap:24px; margin-left:auto; flex-wrap:wrap; }
.foot__links a{
  font-size:14px; color:var(--dim);
  transition:color var(--t-s) linear;
}
.foot__links a:hover{ color:var(--ink); }

/* ── motion primitives (the scroll engine writes --p / --e) ─ */
[data-rise]{
  opacity:var(--p,0);
  transform:translate3d(0, calc((1 - var(--p,0)) * 26px), 0);
  will-change:opacity, transform;
}
[data-fade]{ opacity:var(--p,0); will-change:opacity; }

.ln{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.13em; }
.ln > i{
  display:block;
  font-style:normal;
  transform:translate3d(0, calc((1 - var(--p,1)) * 110%), 0);
  opacity:calc(.1 + var(--p,1) * .9);
}

[data-recede]{
  opacity:calc(1 - var(--e,0) * .86);
  transform:translate3d(0, calc(var(--e,0) * -38px), 0) scale(calc(1 - var(--e,0) * .035));
  will-change:opacity, transform;
}

@media (prefers-reduced-motion: reduce){
  [data-rise],[data-fade],[data-recede],.ln > i{
    opacity:1 !important; transform:none !important;
  }
}

/* ── responsive chrome ──────────────────────────────────── */
@media (max-width:860px){
  .nav__burger{ display:flex; }
  .nav__links{
    position:absolute; top:calc(100% + 14px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:12px;
    border-radius:var(--r-m);
    border:1px solid rgba(255,255,255,.75);
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:var(--lift-2);
    opacity:0; visibility:hidden;
    transform:translateY(-8px);
    transition:opacity var(--t-s) var(--e-out), transform var(--t-s) var(--e-out), visibility 0s linear var(--t-s);
  }
  .nav.is-open .nav__links{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .nav__link{ padding:13px 15px; font-size:16px; }
  .btn--ca{ padding:7px 11px; font-size:11px; }
  .foot__links{ margin-left:0; width:100%; }
}