/* Section acquisition effect: a camera head scans the content into view. */

[data-section-scan] {
  position: relative;
  isolation: isolate;
}

.section-scan-overlay {
  --scan-color: var(--acid);
  position: fixed;
  z-index: 90;
  overflow: visible;
  border-radius: 22px;
  color: var(--scan-color);
  opacity: 0;
  pointer-events: none;
}

html[data-theme="light"] .section-scan-overlay {
  --scan-color: var(--coral);
}

.section-scan-overlay[data-scan-section="contact"] {
  --scan-color: var(--blue-surface);
}

.section-scan-frame,
.section-scan-grid,
.section-scan-beam {
  position: absolute;
  inset: 0;
}

.section-scan-frame {
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 54px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 1px 54px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 54px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 1px 54px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 54px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 1px 54px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 54px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 1px 54px no-repeat;
  filter: drop-shadow(0 8px 18px color-mix(in srgb, currentColor 28%, transparent));
  opacity: 0;
  transform: scale(.992);
  transform-origin: center;
}

.section-scan-grid {
  overflow: hidden;
  border-radius: inherit;
  background-image:
    linear-gradient(color-mix(in srgb, currentColor 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, currentColor 16%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, var(--palette-black) 18%, var(--palette-black) 82%, transparent);
  opacity: 0;
}

.section-scan-beam {
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 12%, currentColor 88%, transparent);
  box-shadow:
    0 0 12px color-mix(in srgb, currentColor 82%, transparent),
    0 0 34px color-mix(in srgb, currentColor 46%, transparent);
  opacity: 0;
  transform: translateY(0);
  will-change: transform;
}

.section-scan-beam::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: clamp(90px, 14vw, 180px);
  background: linear-gradient(to top, color-mix(in srgb, currentColor 12%, transparent), transparent);
}

.section-scan-device {
  position: absolute;
  top: -17px;
  right: 12px;
  display: grid;
  grid-template-columns: 28px auto;
  align-items: center;
  min-width: 92px;
  height: 34px;
  padding: 0 10px 0 5px;
  border: 1px solid color-mix(in srgb, currentColor 74%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--palette-black) 24%, transparent);
  color: currentColor;
  font: 650 9px/1 var(--font-ui, Arial, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.section-scan-lens {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--ink) 82%, transparent);
}

.section-scan-lens::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}

.scan-reveal-armed [data-scan-target] {
  will-change: opacity, transform, filter, clip-path;
}

.is-scan-complete [data-scan-target] {
  opacity: 1;
  filter: none;
  clip-path: none;
  will-change: auto;
}

@media (max-width: 720px) {
  .section-scan-overlay {
    border-radius: 12px;
  }

  .section-scan-frame {
    background-size:
      34px 1px, 1px 34px,
      34px 1px, 1px 34px,
      34px 1px, 1px 34px,
      34px 1px, 1px 34px;
  }

  .section-scan-grid {
    background-size: 30px 30px;
  }

  .section-scan-device {
    right: 6px;
    min-width: 34px;
    grid-template-columns: 24px;
    padding-right: 4px;
  }

  .section-scan-device-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-scan-overlay {
    display: none;
  }

  [data-section-scan] [data-scan-target] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}