/* Only JS-selected elements are hidden. Without JS all content stays visible. */
.home-loading {
  overflow: hidden;
}

/* The reserved gutter is painted by the root, outside the fixed overlay. */
html.home-loading-cover {
  background-color: var(--color1);
}

.home-loading body {
  overflow: hidden;
}

.home-loading:not(.home-header-visible) :is(.site-header, #global-nav),
.home-loading #home main>section:not(#hero),
.home-loading #home :is(footer, #fixed-contact, .back-to-top) {
  visibility: hidden;
}

.home-loading:not(.home-left-visible) #home #hero .hero-left>div::before,
.home-loading:not(.home-right-visible) #home #hero .hero-right {
  opacity: 0;
}

.home-loading #home #hero .hero-right :is(h1 > span, strong, p) {
  opacity: 0;
}

.home-loader {
  position: fixed;
  inset: 0;
  /* Cover the reserved scrollbar gutter as well as the content viewport. */
  right: auto;
  width: 100vw;
  z-index: 20000;
  display: grid;
  place-items: center;
  background: white;
}

.home-loader-surface {
  position: absolute;
  inset: 0;
  background: var(--color1);
}

.home-loader-content {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
  color: white;
}

.home-loader-logo {
  width: clamp(64px, 10vw, 120px);
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: url('../img/logo-mark.svg') no-repeat center / contain;
  mask: url('../img/logo-mark.svg') no-repeat center / contain;
  clip-path: inset(var(--load-progress, 100%) 0 0 0);
}

.home-loader-progress {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal-pending {
    opacity: 0;
    translate: 0 24px;
  }

  .reveal-running {
    animation: content-reveal var(--reveal-duration, .65s) cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--reveal-delay, 0s);
  }

  /* Opacity only: preserve the fixed header's existing transform animation. */
  .entrance-header {
    animation: header-entrance .4s ease both;
    animation-delay: var(--reveal-delay, 0s);
  }

  /* Keep hero geometry stable for the fixed-header scroll threshold. */
  .entrance-hero {
    animation: header-entrance .65s ease both;
  }
}

@keyframes content-reveal {
  from {
    opacity: 0;
    translate: 0 24px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .service-hero-step {
    animation: service-hero-reveal .65s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--reveal-delay, 0s);
    --hero-offset: 0 28px;
  }

  figure.service-hero-step {
    --hero-offset: 60px 0;
    animation-duration: .975s;
  }

  :is(.eyebrow, h1).service-hero-step {
    --hero-offset: 0 -28px;
  }

  .hero-service.service-hero-step {
    --hero-offset: -40px 0;
  }

  /* Clip horizontal entrance overflow without changing hero layout. */
  body:is(#unwanted, #demolition, #faraway) {
    overflow-x: clip;
  }
}

@keyframes service-hero-reveal {
  from {
    opacity: 0;
    translate: var(--hero-offset);
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes header-entrance {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media print {
  html.home-loading-cover {
    background-color: white;
  }

  .home-loader {
    display: none !important;
  }

  .home-loading,
  .home-loading body {
    overflow: visible;
  }

  .home-loading #home :is(.site-header, #global-nav, section, footer, .hero-right),
  .home-loading #home #hero .hero-left>div::before,
  .home-loading #home #hero .hero-right :is(h1 > span, strong, p) {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .reveal-pending,
  .reveal-running,
  .entrance-header,
  .entrance-hero,
  .service-hero-step {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
  }
}