/* Small additions on top of Tailwind CDN */
html {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html {
    overflow-x: hidden;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html.dark {
  color-scheme: dark;
}

/* Hero: tech banner on the right (--hero-banner-url set inline in index.php for correct subpath) */
.hero-banner-bg {
  background-image: var(--hero-banner-url);
  background-repeat: no-repeat;
  background-position: right -4% center;
  background-size: auto clamp(240px, 52vw, 580px);
}

.hero-banner-scrim {
  background: linear-gradient(
    105deg,
    rgb(248 250 252) 0%,
    rgb(248 250 252 / 0.96) 26%,
    rgb(248 250 252 / 0.78) 42%,
    rgb(248 250 252 / 0.35) 58%,
    rgb(248 250 252 / 0.08) 72%,
    transparent 85%
  );
}

html.dark .hero-banner-bg {
  opacity: 0.88;
  filter: saturate(1.05);
}

html.dark .hero-banner-scrim {
  background: linear-gradient(
    105deg,
    rgb(2 6 23) 0%,
    rgb(2 6 23 / 0.97) 28%,
    rgb(2 6 23 / 0.82) 44%,
    rgb(2 6 23 / 0.45) 60%,
    rgb(2 6 23 / 0.12) 74%,
    transparent 88%
  );
}

@media (max-width: 1023px) {
  .hero-banner-bg {
    background-position: right -12% center;
    background-size: auto clamp(200px, 48vw, 420px);
    opacity: 0.55;
  }

  .hero-banner-scrim {
    background: linear-gradient(
      180deg,
      rgb(248 250 252) 0%,
      rgb(248 250 252 / 0.97) 42%,
      rgb(248 250 252 / 0.88) 58%,
      rgb(248 250 252 / 0.55) 78%,
      rgb(248 250 252 / 0.25) 100%
    );
  }

  html.dark .hero-banner-bg {
    opacity: 0.5;
  }

  html.dark .hero-banner-scrim {
    background: linear-gradient(
      180deg,
      rgb(2 6 23) 0%,
      rgb(2 6 23 / 0.98) 40%,
      rgb(2 6 23 / 0.9) 56%,
      rgb(2 6 23 / 0.65) 76%,
      rgb(2 6 23 / 0.35) 100%
    );
  }
}

/* Reveal on scroll — progressive enhancement */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fallback if Tailwind build omits text-pretty */
@supports (text-wrap: pretty) {
  .text-pretty {
    text-wrap: pretty;
  }
}