/* ============ OBLIQUE — shared base ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --font-display: "Syne", sans-serif;
  --font-body: "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

html { scroll-behavior: initial; }

body {
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
::selection { background: currentColor; }

@media (pointer: fine) {
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
}

/* ---- custom cursor ---- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 10000;
  pointer-events: none; border-radius: 50%;
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--cursor-color, #fff);
  transition: opacity .3s, width .25s var(--ease-out-expo), height .25s var(--ease-out-expo);
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1px solid var(--cursor-color, #fff);
  opacity: .5;
  transition: width .35s var(--ease-out-expo), height .35s var(--ease-out-expo),
              border-radius .35s var(--ease-out-expo), opacity .3s,
              background-color .3s;
}
body.cursor-hover .cursor-ring {
  width: 72px; height: 72px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cursor-color, #fff) 12%, transparent);
}
body.cursor-press .cursor-dot { width: 14px; height: 14px; }
body.cursor-hidden .cursor-dot,
body.cursor-hidden .cursor-ring { opacity: 0; }
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ---- page wipe transitions ---- */
.wipe {
  position: fixed; inset: -2vh 0;
  z-index: 9999; pointer-events: none;
  transform: scaleX(0); transform-origin: right;
}
.wipe span {
  position: absolute; inset: 0;
  background: var(--wipe-color, #0a0a0a);
}
.wipe span:nth-child(2) { background: var(--wipe-accent, #fff); animation-delay: .07s !important; }
.wipe.is-in span { animation: wipeIn .55s var(--ease-in-out-quart) forwards; }
.wipe.is-out span { animation: wipeOut .55s var(--ease-in-out-quart) forwards; }
@keyframes wipeIn  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wipeOut { from { transform: scaleX(1); transform-origin: left; } to { transform: scaleX(0); transform-origin: left; } }

.page { min-height: 100vh; }
body.booting .page > * { visibility: hidden; }

/* ---- shared nav ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px clamp(20px, 4vw, 56px);
  mix-blend-mode: difference;
}
.nav__logo {
  font-family: var(--font-display); font-weight: 800;
  font-size: 15px; letter-spacing: .28em; text-transform: uppercase;
  color: #fff;
}
.nav__logo em { font-style: normal; opacity: .45; font-weight: 400; }
.nav__links { display: flex; gap: clamp(14px, 2.4vw, 34px); list-style: none; }
.nav__links a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: #fff; position: relative; padding: 4px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out-expo);
}
.nav__links a:hover::after, .nav__links a[aria-current]::after {
  transform: scaleX(1); transform-origin: left;
}

@media (max-width: 720px) {
  .nav__links a { font-size: 9.5px; letter-spacing: .1em; }
  .nav { padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}