/* ============================================================
   Shared UI components.
   ============================================================ */

/* ---------- Preloader ---------- */
.pre{
  position:fixed;
  inset:0;
  z-index:var(--z-preloader);
  background:var(--color-bg);
  color:var(--color-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .8s var(--ease-brand);
}
.pre.is-done{transform:translateY(-101%)}
.pre.is-done .pre__in{opacity:0;transition:opacity .3s}
.pre__in{width:min(560px,84vw);transition:opacity .4s}
.pre__row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.pre__brand{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:0}
.pre__pct{font-size:26px;color:var(--color-ink)}
.pre__bar{height:2px;background:var(--color-line)}
.pre__bar i{display:block;height:100%;background:var(--color-ink);transform:scaleX(0);transform-origin:left}
.pre__tag{
  margin-top:16px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.24em;
  color:var(--color-muted);
}

/* ---------- Custom cursor ---------- */
.cursor{position:fixed;top:0;left:0;z-index:var(--z-cursor);pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.is-visible{opacity:1}
.cursor__in{
  display:flex;
  align-items:center;
  justify-content:center;
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:var(--color-accent);
  transition:width .35s var(--ease-brand),height .35s var(--ease-brand),margin .35s var(--ease-brand),background .35s,border-color .35s,box-shadow .35s;
  border:1.5px solid var(--color-accent-contrast);
}
.cursor__in span{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--color-accent-contrast);
  opacity:0;
  transition:opacity .2s;
  white-space:nowrap;
}
.cursor.is-link .cursor__in{
  width:40px;
  height:40px;
  margin:-20px 0 0 -20px;
  background:transparent;
  border-color:var(--color-accent);
  box-shadow:0 0 0 1.5px var(--color-accent-contrast);
}
.cursor.is-label .cursor__in{width:70px;height:70px;margin:-35px 0 0 -35px}
.cursor.is-label .cursor__in span{opacity:1}

/* ---------- Scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--color-ink);z-index:var(--z-progress)}

/* ---------- Site navigation (tnop.com style) ---------- */
.nav{
  position:sticky;
  top:0;
  left:0;
  right:0;
  z-index:var(--z-nav);
  background:var(--color-bg);
  color:var(--color-ink);
  border-bottom:1px solid var(--color-line);
  transition:box-shadow .3s;
}
.nav.is-scrolled{
  box-shadow:0 4px 20px rgba(0,0,0,.04);
}
body.is-menu-open .nav{
  z-index:var(--z-nav-control);
}
.nav__in{
  width:var(--container);
  margin-inline:auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:22px 0 18px;
  gap:24px;
}
.nav__logo{
  font-family:var(--font-display);
  font-weight:800;
  font-size:22px;
  letter-spacing:-.02em;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--color-ink);
  line-height:1;
  padding-top:2px;
}
.nav__logo svg{width:16px;height:16px;color:currentColor}

/* page navigation */
.nav__links{
  display:flex;
  align-items:flex-start;
  gap:clamp(18px,2.6vw,38px);
  padding-top:3px;
}
.nav__link{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:400;
  color:var(--color-ink);
  line-height:1.3;
  padding:0 0 4px;
  position:relative;
  transition:color .2s;
}
.nav__link:hover{color:var(--color-muted)}
.nav__link.is-active{font-weight:700}
.nav__link.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:currentColor;
}
.nav__group{position:relative}
.nav__sub{
  position:absolute;
  top:calc(100% + 20px);
  right:0;
  min-width:260px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 20px 20px;
  background:var(--color-bg);
  border-top:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line);
  text-align:right;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .25s,transform .3s var(--ease-brand),visibility .25s;
  box-shadow:0 18px 40px rgba(0,0,0,.06);
}
.nav__group:hover .nav__sub,
.nav__group:focus-within .nav__sub,
.nav__group.is-open .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub-title{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-ink);
  padding-bottom:10px;
  border-bottom:1px solid var(--color-line);
}
.nav__sub a{
  font-family:var(--font-body);
  font-size:14px;
  color:var(--color-ink-soft);
  line-height:1.3;
  transition:color .2s;
}
.nav__sub a:hover{color:var(--color-ink);text-decoration:underline;text-underline-offset:3px}
.nav__sub a.is-active{color:var(--color-ink);font-weight:700}

.nav__burger{display:none;width:42px;height:42px;position:relative;z-index:var(--z-nav-control)}
.nav__burger i{position:absolute;left:9px;right:9px;height:2px;background:currentColor;transition:.35s var(--ease-brand)}
.nav__burger i:nth-child(1){top:15px}
.nav__burger i:nth-child(2){top:25px}
.nav__burger.is-open i:nth-child(1){top:20px;transform:rotate(45deg)}
.nav__burger.is-open i:nth-child(2){top:20px;transform:rotate(-45deg)}

/* ---------- Mobile menu ---------- */
.menu{
  position:fixed;
  inset:0;
  z-index:var(--z-menu);
  background:var(--color-ink);
  color:var(--color-bg);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:clamp(90px,12vh,120px) 8vw 110px;
  overflow-y:auto;
  transform:translateY(-102%);
  transition:transform .7s var(--ease-brand);
}
.menu.is-open{transform:none}
.menu__link{
  display:flex;
  align-items:baseline;
  gap:18px;
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(1.45rem,7.3vw,3.4rem);
  line-height:1.15;
  padding:6px 0;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s,transform .6s var(--ease-brand),color .3s;
}
.menu.is-open .menu__link{
  opacity:1;
  transform:none;
  transition-delay:calc(.15s + var(--i)*.06s);
}
.menu__link small{font-family:var(--font-mono);font-size:11px;color:var(--color-accent)}
.menu__link:hover{color:var(--color-accent)}
.menu__link.is-active{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.menu__sub{display:flex;flex-direction:column;gap:2px;margin:0 0 10px 42px;padding:0 0 12px;border-bottom:1px solid var(--color-line)}
.menu__sub a{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted);padding:2px 0;line-height:1.6}
.menu__sub a:hover,.menu__sub a.is-active{color:var(--color-bg)}
.menu__foot{
  position:static;
  margin-top:auto;
  padding-top:32px;
  display:flex;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--color-muted);
  text-transform:uppercase;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 28px;
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  border:1px solid var(--color-ink);
  transition:background .35s,color .35s,border-color .35s;
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;transition:transform .35s var(--ease-brand)}
.btn--solid{background:var(--color-ink);color:var(--color-bg)}
.btn--solid:hover{background:var(--color-accent-contrast);border-color:var(--color-accent);color:var(--color-accent)}
.btn--solid:hover svg{transform:translateY(3px)}
.btn--ghost:hover{background:var(--color-ink);color:var(--color-bg)}
.btn--ghost:hover svg{transform:translate(3px,-3px)}
.magnetic{transition:transform .25s ease-out;will-change:transform}

/* ---------- Marquee ---------- */
.mq{overflow:hidden;transform:skewX(var(--mq-skew,0deg));transition:transform .45s var(--ease-brand)}
.mq--acc{background:var(--color-accent);color:var(--color-accent-contrast)}
.mq--ghost{border-block:1px solid var(--color-line)}
.mq__track{display:flex;width:max-content;align-items:center;animation:mq var(--spd,26s) linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
.mq__track--reverse{animation-direction:reverse}
.mq__grp{display:flex;align-items:center;flex:none}
.mq__it{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:var(--fs,clamp(1.4rem,2.5vw,2rem));
  padding:.85em .55em;
  white-space:nowrap;
  line-height:1;
}
.mq__star{width:clamp(15px,1.7vw,22px);height:auto;flex:none}
.mq__star path{stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.mq--ghost .mq__it{color:transparent;-webkit-text-stroke:1.5px var(--color-ink);font-size:clamp(2rem,4.4vw,3.6rem);padding:.5em .6em}
.mq--ghost .mq__star{color:var(--color-accent)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Toast ---------- */
.toast{
  position:fixed;
  bottom:24px;
  left:24px;
  z-index:var(--z-toast);
  display:flex;
  gap:14px;
  align-items:center;
  background:var(--color-bg);
  color:var(--color-ink);
  border:1px solid var(--color-ink);
  box-shadow:6px 6px 0 var(--color-accent);
  padding:16px 22px;
  max-width:min(380px,86vw);
  transform:translateY(150%);
  transition:transform .5s var(--ease-brand);
}
.toast.is-visible{transform:none}
.toast svg{width:20px;height:20px;color:var(--color-accent);flex:none}
.toast b{display:block;font-family:var(--font-display);font-size:14px;text-transform:uppercase}
.toast span{font-size:13px;color:var(--color-muted)}