/* J.I. Development — shared presentation (works with Tailwind CDN) */

.hero-slide {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
}

.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.75rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-slide {
    transition: none;
  }
}

/* Inner page hero */
.page-hero {
  position: relative;
  min-height: clamp(14rem, 32vw, 22rem);
}

.page-hero--compact {
  min-height: clamp(11rem, 22vw, 17rem);
}

/* Portfolio — blueprint drafting-sheet hero (no photo) */
.page-hero--blueprint .page-hero-media {
  background-color: #153a50;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(125, 211, 252, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.07) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 0 10px rgba(255, 255, 255, 0.02);
}

.page-hero.page-hero--blueprint::after {
  background: linear-gradient(
    115deg,
    rgba(8, 32, 48, 0.9) 0%,
    rgba(12, 45, 64, 0.55) 45%,
    rgba(18, 58, 80, 0.28) 100%
  );
}

.page-hero-media {
  position: absolute;
  inset: 0;
}

.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(15, 23, 42, 0.92) 0%,
    rgba(15, 23, 42, 0.55) 45%,
    rgba(26, 26, 46, 0.35) 100%
  );
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
}

/* Header surface — light bar stays crisp on scroll */
.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}