/* Base layout */
:root {
  /* Soft beige similar to the reference */
  --bg: #ffffff; /* true white */
  --brand-blue: #0900FF; /* brand */
  --dot: rgba(0, 0, 0, 0.06);
  --dot-size: 2px; /* dot radius in the gradient */
  --grid: 48px;     /* distance between dots (denser) */
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background-color: var(--bg);
}

/* Dotted background using layered radial-gradients forming a grid */
.page {
  min-height: 100dvh;
  /* slight overscroll area for nicer feel */
  padding: 0;

  /* Aligned dot grid: single layer so all dots line up */
  background-image: none; /* dots disabled */
}

/* Right-side Life canvas wrapper (behind content) */
.life-wrap {
  position: fixed;
  inset: 0 0 0 auto; /* stick to right side */
  width: min(46vw, 720px);
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 10%, black 28%, black 100%);
}

#life {
  width: 100%;
  height: 100%;
  display: block;
  filter: saturate(115%) contrast(105%);
}

.hero {
  position: relative;
  display: inline-block;
}

#hero-svg, .hero-title {
  display: block;
  position: relative;
  margin-left: clamp(32px, 6vw, 72px);
  margin-top: clamp(500px, 44vh, 640px);
  width: min(42vw, 560px);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 1; /* above life canvas */
}

/* Walking 'm' animation - legs actually walking with weight shift */
#walking-m {
  transform-origin: 50% 100%;
  animation: mWalk 15s ease-in-out 10s infinite;
}

@keyframes mWalk {
  /* Start - stay at original position */
  0% { 
    transform: translate(0, 0) skewX(0deg) rotate(0deg); 
  }
  /* Walking away - Right leg steps */
  1% { 
    transform: translate(1px, 0) skewX(-1deg) rotate(-0.5deg); 
  }
  2% { 
    transform: translate(2px, -1.5px) skewX(-0.5deg) rotate(0deg); 
  }
  /* Left leg steps */
  3% { 
    transform: translate(3px, 0) skewX(1deg) rotate(0.5deg); 
  }
  4% { 
    transform: translate(4px, -1.5px) skewX(0.5deg) rotate(0deg); 
  }
  /* Right leg steps */
  5% { 
    transform: translate(5px, 0) skewX(-1deg) rotate(-0.5deg); 
  }
  6% { 
    transform: translate(6px, -1.5px) skewX(-0.5deg) rotate(0deg); 
  }
  /* Left leg steps */
  7% { 
    transform: translate(7px, 0) skewX(1deg) rotate(0.5deg); 
  }
  8% { 
    transform: translate(8px, -1.5px) skewX(0.5deg) rotate(0deg); 
  }
  /* Right leg steps */
  9% { 
    transform: translate(9px, 0) skewX(-1deg) rotate(-0.5deg); 
  }
  10% { 
    transform: translate(10px, -1.5px) skewX(-0.5deg) rotate(0deg); 
  }
  /* Left leg steps */
  11% { 
    transform: translate(11px, 0) skewX(1deg) rotate(0.5deg); 
  }
  12% { 
    transform: translate(12px, -1.5px) skewX(0.5deg) rotate(0deg); 
  }
  /* Right leg steps */
  13% { 
    transform: translate(13px, 0) skewX(-1deg) rotate(-0.5deg); 
  }
  14% { 
    transform: translate(14px, -1.5px) skewX(-0.5deg) rotate(0deg); 
  }
  /* Left leg steps - arrive at destination */
  15% { 
    transform: translate(15px, 0) skewX(1deg) rotate(0.5deg); 
  }
  16% { 
    transform: translate(16px, -1.5px) skewX(0deg) rotate(0deg); 
  }
  /* Pause at destination - 50% longer */
  17%, 19% { 
    transform: translate(16px, 0) skewX(0deg) rotate(0deg); 
  }
  /* Walking back - Right leg */
  20% { 
    transform: translate(15px, 0) skewX(1deg) rotate(0.5deg); 
  }
  21% { 
    transform: translate(14px, -1.5px) skewX(0.5deg) rotate(0deg); 
  }
  /* Left leg */
  22% { 
    transform: translate(13px, 0) skewX(-1deg) rotate(-0.5deg); 
  }
  23% { 
    transform: translate(12px, -1.5px) skewX(-0.5deg) rotate(0deg); 
  }
  /* Right leg */
  24% { 
    transform: translate(11px, 0) skewX(1deg) rotate(0.5deg); 
  }
  25% { 
    transform: translate(10px, -1.5px) skewX(0.5deg) rotate(0deg); 
  }
  /* Left leg */
  26% { 
    transform: translate(9px, 0) skewX(-1deg) rotate(-0.5deg); 
  }
  27% { 
    transform: translate(8px, -1.5px) skewX(-0.5deg) rotate(0deg); 
  }
  /* Right leg */
  28% { 
    transform: translate(7px, 0) skewX(1deg) rotate(0.5deg); 
  }
  29% { 
    transform: translate(6px, -1.5px) skewX(0.5deg) rotate(0deg); 
  }
  /* Left leg */
  30% { 
    transform: translate(5px, 0) skewX(-1deg) rotate(-0.5deg); 
  }
  31% { 
    transform: translate(4px, -1.5px) skewX(-0.5deg) rotate(0deg); 
  }
  /* Right leg */
  32% { 
    transform: translate(3px, 0) skewX(1deg) rotate(0.5deg); 
  }
  33% { 
    transform: translate(2px, -1.5px) skewX(0.5deg) rotate(0deg); 
  }
  /* Left leg - final step back home */
  34% { 
    transform: translate(1px, 0) skewX(-1deg) rotate(-0.5deg); 
  }
  35% { 
    transform: translate(0, -1.5px) skewX(0deg) rotate(0deg); 
  }
  /* Back at original position - stay here for ~10 seconds */
  36%, 100% { 
    transform: translate(0, 0) skewX(0deg) rotate(0deg); 
  }
}

@media (prefers-reduced-motion: reduce) {
  #walking-m { animation: none; }
}

/* Contact list under hero image */
.contacts {
  font-family: "Mulish", Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  position: relative;
  z-index: 1;
  margin-left: clamp(32px, 6vw, 72px);
  margin-top: clamp(16px, 2vh, 24px);
}

.contact-email {
  display: inline-block;
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(12px, 1.6vw, 16px);
}

.contact-email:hover { text-decoration: underline; }

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

/* Improve rendering on high-DPI displays */
@media (min-resolution: 2dppx) {
  :root { --dot: rgba(0, 0, 0, 0.08); }
}