/* shared.css — variables, layout primitives, nav, grain, blob fallback */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ── Colour ── */
  --bg:              #050508;
  --fg:              rgba(255,255,255,0.92);
  --sub:             rgba(255,255,255,0.62);
  --sub-hover:       rgba(255,255,255,0.92);
  --card-bg:         rgba(5,5,10,0.28);
  --card-bg-solid:   rgba(8,8,20,0.55);
  --card-border:     rgba(255,255,255,0.09);
  --card-hover-bg:   rgba(80,0,200,0.45);
  --vignette:        radial-gradient(ellipse at 50% 50%, transparent 20%, rgba(0,0,0,0.60) 100%);
  --nav-bg:          rgba(5,5,12,0.55);
  --nav-border:      rgba(255,255,255,0.10);
  --accent:          #b370ff;
  --accent-subtle:   rgba(127,0,255,0.18);

  /* ── Typography ── */
  --font-serif:      'Fraunces', serif;
  --font-sans:       'Outfit', sans-serif;

  /* ── Border radius ── */
  --radius-pill:     100px;
  --radius-card:     16px;

  /* ── Easing ── */
  --ease-spring:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:            #F5F5FA;
    --fg:            rgba(8,8,22,0.96);
    --sub:           rgba(8,8,22,0.68);
    --sub-hover:     rgba(8,8,22,0.96);
    --card-bg:       rgba(245,245,252,0.38);
    --card-bg-solid: rgba(255,255,255,0.90);
    --card-border:   rgba(8,8,22,0.12);
    --vignette:      radial-gradient(ellipse at 50% 50%, transparent 20%, rgba(220,220,235,0.55) 100%);
    --nav-bg:        rgba(245,245,252,0.80);
    --nav-border:    rgba(8,8,22,0.12);
    --accent:        #5500aa;
  }
}

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--fg);
}

/* ── Grain ── */
body::after {
  content: '';
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 50; opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  animation: grain 0.4s steps(1) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,0); }    12%  { transform: translate(-6%,-8%); }
  24%  { transform: translate(8%,-4%); } 36%  { transform: translate(-4%,10%); }
  48%  { transform: translate(10%,-6%); }60%  { transform: translate(-8%,4%); }
  72%  { transform: translate(4%,8%); }  84%  { transform: translate(-10%,-2%); }
  100% { transform: translate(6%,-10%); }
}

/* ── Canvas + vignette ── */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; opacity: 0; animation: card-in 0.9s ease 0.45s both; }
#vignette { position: fixed; inset: 0; background: var(--vignette); pointer-events: none; z-index: 5; }

/* ── Frosted glass stage ── */
.stage {
  position: fixed; inset: 0; z-index: 10;
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  background: var(--card-bg);
  animation: card-in 1s var(--ease-spring) both;
}
@keyframes card-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Navigation ── */
.site-nav {
  position: fixed;
  top: 1.2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0.45rem;
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--nav-border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  animation: card-in 0.8s var(--ease-spring) both;
  animation-delay: 0.1s;
}
.site-nav {
  transition: opacity 0.35s ease, transform 0.35s var(--ease-standard);
}
.site-nav.nav--hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-200%);
  pointer-events: none;
}
.nav-pill {
  position: absolute;
  border-radius: var(--radius-pill);
  background: var(--accent-subtle);
  pointer-events: none;
  transition: left   0.4s var(--ease-spring),
              top    0.4s var(--ease-spring),
              width  0.4s var(--ease-spring),
              height 0.4s var(--ease-spring);
}
.nav-brand {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.09rem;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  opacity: 0.88;
  position: relative;
  text-align: center;
  transition: opacity 0.2s ease;
}
.nav-brand:hover, .nav-brand.active { opacity: 1; }
.nav-sep {
  width: 1px; height: 1rem;
  background: var(--card-border);
  margin: 0 0.5rem;
}
.nav-link {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.09rem;
  letter-spacing: 0.04em;
  color: var(--sub);
  text-decoration: none;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  position: relative;
  text-align: center;
  transition: color 0.2s ease;
}
.nav-link:hover, .nav-link.active {
  color: var(--fg);
}

/* ── Cross-document View Transitions (JS-off fallback only) ── */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 160ms ease-out both vt-out;
}
::view-transition-new(root) {
  animation: 320ms var(--ease-spring) 80ms both vt-in;
}
@keyframes vt-out { to   { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(10px); } }

/* ── CSS fallback blobs ── */
.blob-field { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0.65; will-change: transform;
  animation: drift linear infinite;
}
@media (prefers-color-scheme: light) { .blob { opacity: 0.48; } }
@keyframes drift {
  0%   { transform: translate(0,0)               scale(1); }
  20%  { transform: translate(var(--a),var(--b)) scale(var(--s1)); }
  45%  { transform: translate(var(--c),var(--d)) scale(var(--s2)); }
  70%  { transform: translate(var(--e),var(--f)) scale(var(--s3)); }
  100% { transform: translate(0,0)               scale(1); }
}