/* ============================================================
   HAVA.SI — Base / reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; overflow-x: clip; }

body {
  background: var(--void);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;            /* clip (NOT hidden) → doesn't turn body into a
                                  nested scroll container that breaks viewport scroll */
  min-height: 100vh;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;   /* no grey flash on tap */
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

::selection { background: var(--neon); color: #fff; }

/* every interactive element animates smoothly by default (specifics override) */
a, button, .chip, .work__item, .service, .skill, .cli-card, .nav__cta, .srv__cta,
input, textarea, select, [data-magnetic], .contact__link, .footer__links a, .mobile-menu a {
  transition: color .3s var(--e-out), background-color .3s var(--e-out),
    border-color .3s var(--e-out), box-shadow .3s var(--e-out),
    transform .4s var(--e-spring), opacity .3s var(--e-out);
}

/* accent slider drag: colours must snap in one frame (see initAccent) —
   EXCEPT the accent bar itself, whose grayscale→colour wake-up must glide */
.theming *, .theming *::before, .theming *::after { transition: none !important; }
.theming .hub { transition: background-color .45s, box-shadow .45s, opacity .7s var(--e-out), translate .7s var(--e-out) !important; }
.theming .hub__trackwrap { transition: filter .5s var(--e-out), opacity .5s var(--e-out) !important; }
.theming .hub__row .mono { transition: color .45s !important; }

/* thin custom scrollbar */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--elevated); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--blood); }

/* visible focus for keyboard users */
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 2px; }

/* starfield + spider canvas (top layer, also the cursor) */
.net { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-cursor); }

main { position: relative; z-index: var(--z-content); }

/* ── ember glows: deep black void with localized crimson light sources
   that drift AND breathe (opacity pulse) — alive, not a flat gradient.
   transform/opacity only → blurred layers rasterize once = GPU-cheap. ── */
.nebula { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nebula span {
  position: absolute; border-radius: 50%; filter: blur(64px);
  will-change: transform, opacity; transform: translateZ(0);
}
.nebula span:nth-child(1) { width: 50vw; height: 50vw; left: -14vw; top: -16vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--red) 22%, transparent), transparent 66%);
  animation: neb1 34s var(--e-smooth) infinite; }
.nebula span:nth-child(2) { width: 24vw; height: 24vw; right: -2vw; top: 24%;
  background: radial-gradient(circle, color-mix(in srgb, var(--neon) 34%, transparent), transparent 62%);
  animation: neb2 17s var(--e-smooth) infinite; }
.nebula span:nth-child(3) { width: 34vw; height: 34vw; left: 26%; bottom: -14vw;
  background: radial-gradient(circle, rgba(138,15,31,.5), transparent 68%);
  animation: neb3 27s var(--e-smooth) infinite; }
/* 4th layer: a huge, very slow counter-drifting haze — moving AGAINST the
   other glows reads as a separate plane = more volume in the void */
.nebula span:nth-child(4) { width: 64vw; height: 64vw; right: -22vw; bottom: -26vw;
  background: radial-gradient(circle, rgba(138,15,31,.28), transparent 62%);
  animation: neb4 46s var(--e-smooth) infinite; }
@keyframes neb4 {
  0%, 100% { transform: translate3d(0,0,0); opacity: .22; }
  50%      { transform: translate3d(-8vw,-6vh,0); opacity: .42; }
}
@keyframes neb1 {
  0%, 100% { transform: translate3d(0,0,0); opacity: .26; }
  50%      { transform: translate3d(7vw,5vh,0); opacity: .5; }
}
@keyframes neb2 {
  0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: .14; }
  50%      { transform: translate3d(-5vw,-3vh,0) scale(1.25); opacity: .55; }
}
@keyframes neb3 {
  0%, 100% { transform: translate3d(0,0,0); opacity: .3; }
  50%      { transform: translate3d(5vw,-6vh,0); opacity: .55; }
}

/* NOTE: no global prefers-reduced-motion kill-switch. The site IS the
   portfolio — the full experience plays for everyone (owner's decision).
   The old `* { transition-duration: .01ms !important }` block silently
   killed every press transition on devices with Reduce Motion enabled. */