/* Zyklus — Base / Reset / Typography */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
  overflow-x:hidden;
}

/* Ambient page background — deep radial + faint grid, purely CSS */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1200px 720px at 50% -12%, #12233a 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #101b2b 0%, transparent 55%),
    var(--bg);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.02em;color:var(--fg)}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}

p{max-width:68ch}
a{color:inherit;text-decoration:none}

::selection{background:rgba(56,189,248,.28);color:var(--frost-bright)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

img,svg{display:block;max-width:100%}

.mono{font-family:var(--font-mono)}
.accent{color:var(--accent)}
.muted{color:var(--fg-muted)}
.kicker{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--accent-2)}

/* Layout helpers */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.section{padding-block:clamp(64px,10vw,120px)}
.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}

/* Gradient text (aurora accent on key words) */
.grad{
  background:linear-gradient(100deg,var(--frost-bright),var(--accent) 45%,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Skip link */
.skip{position:fixed;top:-60px;left:12px;z-index:var(--z-intro);background:var(--accent);color:var(--on-accent);
  padding:10px 16px;border-radius:var(--radius);font-family:var(--font-mono);font-size:var(--fs-sm);transition:top var(--dur)}
.skip:focus{top:12px}

/* Custom cursor: hide native only on capable pointers */
@media (hover:hover) and (pointer:fine){
  body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}
}

/* View transitions (cross-document MPA) — content fades+glides, topbar stays anchored */
@view-transition{ navigation: auto; }
::view-transition-old(root){animation:vt-out var(--dur) var(--ease-in-out) both}
::view-transition-new(root){animation:vt-in var(--dur-slow) var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Scroll reveal */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none}
}