/* Homepage layout and lightweight background animation. */
body {
  -webkit-font-smoothing: antialiased;
}
.page {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: clip;
}
.landscape {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
  background: linear-gradient(135deg, #f8f9f6, #edf3f0);
}
/* The large SVG stays fixed; only the small orbit markers are animated. */
.orbit-scene {
  position: absolute;
  inset: 0;
}
.landscape-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.orbit-particles {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.orbit-scene.is-ready .orbit-particles {
  visibility: visible;
}
.orbit-particle {
  position: absolute;
  top: 0;
  left: 0;
  offset-position: 0 0;
  offset-anchor: 50% 50%;
  offset-rotate: auto;
  offset-distance: var(--orbit-start);
  animation-name: orbit-travel;
  animation-duration: var(--orbit-duration);
  animation-delay: var(--orbit-delay);
  animation-direction: var(--orbit-direction);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.orbit-particle[data-track="outer"] { offset-path: var(--orbit-outer); }
.orbit-particle[data-track="inner"] { offset-path: var(--orbit-inner); }
.orbit-particle[data-track="wide"] { offset-path: var(--orbit-wide); }
.orbit-particle[data-track="tight"] { offset-path: var(--orbit-tight); }
html.motion-active .orbit-particle {
  animation-play-state: running;
}
.orbit-trail {
  width: calc(23px * var(--scene-scale));
  height: max(1px, calc(1.6px * var(--scene-scale)));
  border-radius: 999px;
  background: #43877c;
}
.orbit-trail[data-track="inner"] {
  width: calc(20px * var(--scene-scale));
}
.orbit-trail[data-tail="0"] { opacity: .68; }
.orbit-trail[data-tail="1"] { opacity: .46; }
.orbit-trail[data-tail="2"] { opacity: .27; }
.orbit-trail[data-tail="3"] { opacity: .12; }
.orbit-bubble {
  offset-rotate: 0deg;
  width: max(6px, calc(10px * var(--scene-scale)));
  height: max(6px, calc(10px * var(--scene-scale)));
  border: 1px solid #5b8e828c;
  border-radius: 50%;
  background: #fbfcf8cc;
  opacity: .7;
}
.orbit-bubble.is-small {
  width: max(4px, calc(6px * var(--scene-scale)));
  height: max(4px, calc(6px * var(--scene-scale)));
  border: 0;
  background: #4e897e;
  opacity: .45;
}
.welcome {
  align-self: center;
  padding: 50px clamp(24px, 8.3vw, 132px) 76px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .21em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
}
h1 {
  font-weight: 400;
}
.greeting {
  display: block;
  margin-bottom: 12px;
  font-size: clamp(20px, 2.25vw, 32px);
  line-height: 1.4;
  letter-spacing: -.035em;
}
.name {
  display: block;
  max-width: 12em;
  font-size: clamp(52px, 7.8vw, 120px);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.cv-link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  min-height: 44px;
  margin-top: 42px;
  font-size: 13px;
}
.cv-link-label {
  padding-bottom: 5px;
  border-bottom: 1px solid #286a7040;
  transition: border-color .2s;
}
.cv-link svg {
  width: 29px;
  height: 18px;
  transition: transform .25s ease;
}
.cv-link:hover svg {
  transform: translateX(5px);
}
.cv-link:hover .cv-link-label {
  border-color: var(--accent);
}
@keyframes orbit-travel {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
@media (max-width: 600px) {
  .welcome {
    padding-top: 50px;
    padding-bottom: 68px;
  }
  .eyebrow {
    margin-bottom: 24px;
    font-size: 9px;
  }
  .greeting {
    max-width: 14em;
    margin-bottom: 18px;
    font-size: 21px;
  }
  .name {
    max-width: 7em;
    font-size: clamp(49px, 12.8vw, 74px);
    line-height: 1.08;
  }
  .cv-link {
    margin-top: 32px;
  }
}
@media (max-height: 520px) and (min-width: 601px) {
  .welcome {
    padding-top: 20px;
    padding-bottom: 30px;
  }
  .eyebrow {
    margin-bottom: 14px;
  }
  .name {
    font-size: 64px;
  }
  .cv-link {
    margin-top: 20px;
  }
}