html {
  /* keep anchor targets clear of the fixed header */
  scroll-padding-top: 96px;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.technical-grid {
  background-size: 60px 60px;
  background-image: radial-gradient(circle, #e1e2e6 1px, transparent 1px);
}

.hero-overlay {
  background: linear-gradient(to right, rgba(248, 249, 253, 1) 35%, rgba(248, 249, 253, 0) 100%);
}

h1, h2, h3 {
  text-wrap: balance;
}

.rotating-word {
  display: inline-block;
  border-right: 2px solid currentColor;
  padding-right: 3px;
  min-width: 1ch;
  animation: rotating-word-cursor 0.8s step-end infinite;
}

@keyframes rotating-word-cursor {
  from, to {
    border-color: transparent;
  }

  50% {
    border-color: currentColor;
  }
}

/* Portfolio image hover wash */
#works .group .relative::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 70, 104, 0.45), transparent 55%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

#works .group:hover .relative::after {
  opacity: 1;
}

/* Scroll reveal — .js-reveal is added by an inline head script, so content
   stays visible when JS is unavailable */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .js-reveal [data-reveal].revealed {
    opacity: 1;
    transform: none;
  }

  /* keep the staggered portfolio cards' 5rem offset through the reveal */
  @media (min-width: 1024px) {
    .js-reveal #works [data-reveal].lg\:translate-y-20 {
      transform: translateY(calc(5rem + 24px));
    }

    .js-reveal #works [data-reveal].lg\:translate-y-20.revealed {
      transform: translateY(5rem);
    }
  }
}

/* Submit button spinner */
.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

#siteNav {
  display: none;
}

body.nav-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  #siteNav.open {
    display: flex;
  }

  body .px-margin-desktop {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* the side gradient does nothing on narrow screens — wash the whole image */
  .hero-overlay {
    background: linear-gradient(to bottom,
      rgba(248, 249, 253, 0.97) 0%,
      rgba(248, 249, 253, 0.9) 55%,
      rgba(248, 249, 253, 0.55) 100%);
  }
}