/* CDSWeb scroll reveal motion
   Motion is progressive enhancement and never reduces text opacity. */

:root {
  --reveal-duration: 620ms;
  --reveal-distance: 1rem;
  --reveal-easing: cubic-bezier(.22, 1, .36, 1);
}

.reveal-ready .home-page [data-reveal],
.reveal-ready .home-page [data-reveal-item] {
  translate: 0 var(--reveal-distance);
  transition:
    translate var(--reveal-duration) var(--reveal-easing),
    scale var(--reveal-duration) var(--reveal-easing);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: translate, scale;
}

.reveal-ready .home-page [data-reveal="scale"],
.reveal-ready .home-page [data-reveal-item="scale"] {
  translate: 0 .65rem;
  scale: .985;
}

.reveal-ready .home-page [data-reveal].is-visible,
.reveal-ready .home-page [data-reveal-item].is-visible {
  translate: 0 0;
  scale: 1;
  will-change: auto;
}

.stat-count {
  display: inline-block;
  min-width: 6ch;
  font-variant-numeric: tabular-nums;
}

.stat-count-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .home-page [data-reveal],
  .reveal-ready .home-page [data-reveal-item] {
    translate: none !important;
    scale: none !important;
    transition: none !important;
  }
}

/* Homepage sample gallery */
.sample-preview > img {
  width: auto;
  height: auto;
  max-width: min(82%, 18rem);
  max-height: 13.5rem;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(8, 34, 56, .18));
}

.sample-gallery {
  position: relative;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: 1.25rem 1.25rem .9rem;
}

.sample-gallery-stage {
  width: 100%;
  min-height: 13.5rem;
  display: grid;
  place-items: center;
}

.sample-gallery-slide {
  width: auto;
  max-width: min(82%, 18rem);
  max-height: 13.5rem;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(8, 34, 56, .18));
}

.sample-gallery-slide[hidden] {
  display: none;
}

.sample-gallery-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 1.5rem;
}

.sample-gallery-dot {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.sample-gallery-dot::before {
  content: "";
  position: absolute;
  inset: .39rem;
  border: 2px solid var(--brand-blue);
  border-radius: 50%;
  background: transparent;
  transition: transform .15s ease, background-color .15s ease;
}

.sample-gallery-dot:hover::before {
  transform: scale(1.12);
}

.sample-gallery-dot[aria-pressed="true"]::before {
  background: var(--brand-blue);
}

.sample-gallery-dot:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 3px;
}

/* CDSW-016: replaceable images for the homepage output visual. */
.home-page .output-file-data,
.home-page .output-file-pdf {
  overflow: hidden;
  padding: 0;
  background-color: #ffffff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.home-page .output-file-data {
    min-height: 13.5rem;
    background-image: url('/img/outputs/structured-responses.webp?v=1');
}

.home-page .output-file-pdf {
    width: min(70%, 16rem);
    min-height: 15rem;
    background-image: url('/img/outputs/original-form.webp?v=1');
}

.home-page .output-file-data > *,
.home-page .output-file-pdf > * {
  visibility: hidden;
}

@media (max-width: 43.99rem) {
  .sample-gallery {
    padding-inline: 1rem;
  }

  .sample-gallery-stage,
  .sample-gallery-slide {
    max-height: 12.5rem;
  }

  .home-page .output-file-pdf {
    width: min(78%, 15rem);
  }
}