* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: var(--bg); color: var(--text); cursor: none; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #000; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@media (hover: none) { .cursor, .cursor-dot { display: none; } body { cursor: auto; } }

/* skip link: off-screen until focused, for keyboard users */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 9999; transform: translateY(-150%);
  padding: 10px 16px; font-family: var(--font-mono); font-size: 13px; color: #000;
  background: var(--accent); border-radius: var(--radius); transition: transform .2s var(--ease); }
.skip-link:focus { transform: none; }

/* ---- depth field: starfield + lattice + grain + vignette --------------- */
#stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.lattice {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .8;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 60% 40%, #000 28%, transparent 72%);
          mask-image: radial-gradient(ellipse 75% 60% at 60% 40%, #000 28%, transparent 72%);
}
.vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 120% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.42)); }
.grain { position: fixed; inset: -100px; z-index: 3; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.2s steps(4) infinite; }
@keyframes grain-shift { 0%{transform:translate(0,0)} 25%{transform:translate(-40px,30px)}
  50%{transform:translate(30px,-45px)} 75%{transform:translate(-25px,-20px)} 100%{transform:translate(0,0)} }

/* ---- aurora ambience: two vast color fields drifting on minute-scale ---- */
.aurora { position: fixed; inset: -30%; z-index: 1; pointer-events: none; }
.aurora i { position: absolute; width: 72vw; height: 62vh; border-radius: 50%; }
.aurora i:nth-child(1) { left: 2%; top: 14%;
  background: radial-gradient(ellipse at center, rgba(61,212,255,.075), transparent 65%);
  animation: aur-a 49s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { right: 0; bottom: 6%;
  background: radial-gradient(ellipse at center, rgba(168,85,247,.06), transparent 65%);
  animation: aur-b 61s ease-in-out infinite alternate; }
@keyframes aur-a { from { transform: translate(0,0) scale(1); } to { transform: translate(13vw,9vh) scale(1.25); } }
@keyframes aur-b { from { transform: translate(0,0) scale(1.2); } to { transform: translate(-11vw,-7vh) scale(.95); } }

/* ---- custom cursor ------------------------------------------------------ */
.cursor { position: fixed; z-index: 9999; pointer-events: none; width: 26px; height: 26px;
  border: 1px solid var(--accent); border-radius: 50%; transform: translate(-50%,-50%);
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease); }
.cursor.is-hover { width: 54px; height: 54px; background: var(--accent-dim); }
.cursor-dot { position: fixed; z-index: 9999; pointer-events: none; width: 4px; height: 4px;
  background: var(--accent); border-radius: 50%; transform: translate(-50%,-50%); }

/* icon sprite container: definitions only, takes no layout space */
.sprite { position: absolute; }

/* ---- nav ---------------------------------------------------------------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center;
  justify-content: space-between; height: var(--nav-h); padding: 0 var(--pad-x);
  font-family: var(--font-mono); font-size: 12px; background: #070708ee; }
.nav-brand { display: flex; align-items: center; gap: 10px; letter-spacing: .05em; }
.nav-links { display: flex; align-items: center; gap: 24px; color: var(--text-dim); }
.nav-links a { transition: color .25s var(--ease); }
.nav-links a b { color: var(--accent); font-weight: 500; margin-right: 2px; }
.nav-links a:hover, .nav-links a.is-active { color: #fff; }
.element-tile { width: 32px; height: 32px; padding: 3px 4px; border: 1px solid var(--line);
  border-radius: 6px; display: flex; flex-direction: column; justify-content: space-between; }
.element-tile small { font-size: 7px; line-height: 1; color: var(--accent); }
.element-tile b { font-size: 12px; font-weight: 500; align-self: center; margin-top: -2px; }
/* ---- sections ----------------------------------------------------------- */
.section { position: relative; z-index: 10; min-height: 100vh;
  padding: calc(var(--nav-h) + 60px) var(--pad-x) 90px;
  display: flex; flex-direction: column; justify-content: center; }
.section-inner { width: 100%; max-width: var(--maxw); margin: 0 auto; }
.readout { display: flex; align-items: center; gap: 10px; margin-bottom: 1.4rem;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; color: var(--sec); }
.readout::before { content: ""; width: 26px; height: 1px; background: var(--sec); }

/* per-section accent drift — cyan → indigo → amber → lilac */
#about     { --sec: var(--accent); --sec-dim: rgba(61,212,255,.18); }
#experience{ --sec: var(--indigo); --sec-dim: rgba(143,160,255,.16); }
#projects  { --sec: var(--gold);   --sec-dim: rgba(242,200,148,.15); }
#contact   { --sec: var(--lilac);  --sec-dim: rgba(201,166,255,.18); }
.section-title { font-weight: 500; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.02em; margin-bottom: .6rem; }
.section-sub { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); margin-bottom: 2.5rem; }
.text-gradient { background: linear-gradient(100deg, #fff, #8a8a8a);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* section-title sheen: a light band sweeps the headline once on reveal */
.section-title.is-in .text-gradient {
  background-image:
    linear-gradient(115deg, rgba(255,255,255,0) 44%, rgba(220,245,255,.95) 50%, rgba(255,255,255,0) 56%),
    linear-gradient(100deg, #fff, #8a8a8a);
  background-size: 240% 100%, 100% 100%;
  background-position: 240% 0, 0 0;
  animation: title-sheen 1.1s var(--ease) .25s;
}
@keyframes title-sheen {
  from { background-position: -140% 0, 0 0; }
  to   { background-position: 240% 0, 0 0; }
}

/* section transition wipe: a glowing line sweeps down the section once on entry */
.section::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.5px;
  opacity: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(90deg, transparent, rgba(235,248,255,.9) 50%, transparent);
  box-shadow: 0 0 22px var(--sec), 0 0 60px var(--sec-dim); }
.section.wiped::after { animation: section-wipe 1.1s var(--ease) forwards; }
/* about and projects have their own entrance animation; skip the generic wipe */
#about.wiped::after, #projects.wiped::after { animation: none; }
/* transform (not top) keeps the sweep compositor-only */
@keyframes section-wipe {
  0%   { transform: translateY(2vh);  opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateY(96vh); opacity: 0; }
}

/* scroll reveals */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv-stagger.is-in > * { opacity: 1; transform: none; }