/* ============================================================
   Base — reset, typography, layout primitives, boot screen.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 14px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
button{font:inherit}

h1,h2,h3,h4{
  font-family:var(--font-display);
  line-height:1.18;
  margin:0;
  font-weight:700;
  letter-spacing:-.02em;
}
p{margin:0 0 1rem}

:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:6px}
[hidden]{display:none !important}

.container{
  width:100%;
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.gradient-text{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- boot screen (removed by App on mount) ---------- */
.boot-screen{
  position:fixed;inset:0;z-index:900;
  display:grid;place-content:center;justify-items:center;gap:1rem;
  background:var(--bg);
}
.boot-mark{
  width:64px;height:64px;border-radius:20px;
  display:grid;place-items:center;
  background:var(--grad);color:#06101f;
  font-family:var(--font-display);font-weight:800;font-size:1.3rem;
  animation:bootPulse 1.4s ease-in-out infinite;
}
@keyframes bootPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(91,140,255,.45)}
  50%{transform:scale(1.07);box-shadow:0 0 0 18px rgba(91,140,255,0)}
}
.boot-text{color:var(--text-faint);font-size:.9rem;margin:0}

.noscript-note{padding:3rem var(--gutter);text-align:center;color:var(--text-dim)}
.boundary-fallback{
  max-width:640px;margin:16vh auto;padding:2rem var(--gutter);text-align:center;
}
.boundary-note{color:var(--danger)}

/* ---------- three.js hosts ---------- */
.three-canvas-host{position:absolute;inset:0;z-index:0;pointer-events:none}
.three-canvas{display:block;width:100%;height:100%}

/* ---------- reveal animations ---------- */
.reveal{
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
  will-change:opacity,transform;
}
.reveal-up{transform:translateY(30px)}
.reveal-left{transform:translateX(-34px)}
.reveal-right{transform:translateX(34px)}
.reveal-scale{transform:scale(.94)}
.reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}