/* 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;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-inline: contain;
}

.sample-gallery-stage {
  position: relative;
  width: 100%;
  min-height: 13.5rem;
  display: grid;
  place-items: center;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-inline: contain;
}

.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));
  user-select: none;
  -webkit-user-drag: none;
}

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

.sample-gallery-open {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: .2rem;
  background: transparent;
  cursor: zoom-in;
}

.sample-gallery-open:focus-visible,
.sample-zoom button:focus-visible,
.sample-zoom-viewport:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 3px;
}

.sample-zoom-open {
  overflow: hidden;
}

.sample-zoom {
  width: min(58rem, calc(100vw - 2rem));
  height: min(66rem, calc(100dvh - 2rem));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: .55rem;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 20px 60px rgba(8, 24, 43, .3);
  overflow: hidden;
}

.sample-zoom[open] {
  display: flex;
  flex-direction: column;
}

.sample-zoom::backdrop {
  background: rgba(8, 24, 43, .75);
}

.sample-zoom-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line);
}

.sample-zoom-header h2 {
  flex: 1 1 14rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.4;
}

.sample-zoom button {
  min-height: 2.75rem;
  padding: .5rem .85rem;
  border: 1px solid var(--brand-blue);
  border-radius: .3rem;
  color: var(--navy-900);
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.sample-zoom button:hover {
  background: var(--blue-50);
}

.sample-zoom-viewport {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 1rem;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface-alt);
}

.sample-zoom-viewport img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: auto;
  object-fit: contain;
}

.sample-zoom.is-zoomed img {
  width: 900px;
  height: auto;
}


.sample-gallery-control {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(9, 51, 80, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 6px 16px rgba(8, 34, 56, .12);
  cursor: pointer;
  translate: 0 -50%;
  transition:
    background-color .15s ease,
    box-shadow .15s ease,
    scale .15s ease;
}

.sample-gallery-control::before {
  content: "";
  display: block;
  width: .62rem;
  height: .62rem;
  margin: auto;
  border-top: 2px solid var(--brand-blue);
  border-right: 2px solid var(--brand-blue);
}

.sample-gallery-previous {
  left: 0;
}

.sample-gallery-previous::before {
  transform: rotate(-135deg);
  translate: .1rem 0;
}

.sample-gallery-next {
  right: 0;
}

.sample-gallery-next::before {
  transform: rotate(45deg);
  translate: -.1rem 0;
}

.sample-gallery-control:hover {
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(8, 34, 56, .17);
  scale: 1.04;
}

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

.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;
  }

  .sample-gallery-control {
    width: 2.5rem;
    height: 2.5rem;
  }

  .sample-gallery-previous {
    left: -.35rem;
  }

  .sample-gallery-next {
    right: -.35rem;
  }

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