.glimpse:not(a) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
  cursor: default;
  transition: text-decoration-color 160ms ease;
}

.glimpse:not(a):hover {
  text-decoration-color: var(--line-hover);
}

.glimpse-quiet,
.glimpse.glimpse-quiet:not(a),
a.glimpse-quiet,
a.glimpse-quiet:hover {
  text-decoration-line: none;
}

.glimpse-layer {
  --glimpse-w: 16.5rem;
  --glimpse-h: 11rem;
  --glimpse-cr: 2.05rem;
  --glimpse-media-filter: saturate(0.92) contrast(0.97);
  position: fixed;
  z-index: 8;
  top: 0;
  left: 0;
  width: var(--glimpse-w);
  height: var(--glimpse-h);
  max-width: calc(100vw - 2.5rem);
  max-height: calc(100dvh - 2.5rem);
  margin: 0;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  filter: blur(8px);
  transition:
    opacity 420ms cubic-bezier(0.37, 0, 0.18, 1),
    filter 480ms cubic-bezier(0.37, 0, 0.18, 1),
    left 280ms cubic-bezier(0.16, 1, 0.3, 1),
    top 280ms cubic-bezier(0.16, 1, 0.3, 1),
    width 280ms cubic-bezier(0.16, 1, 0.3, 1),
    height 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.glimpse-layer.is-in {
  opacity: 1;
  filter: none;
}

.glimpse-layer:not(.is-in) {
  transition-property: opacity, filter;
  transition-duration: 220ms, 240ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1), cubic-bezier(0.4, 0, 1, 1);
}

.glimpse-layer.is-snap {
  transition-property: opacity, filter;
}

.glimpse-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--glimpse-cr);
  -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 0.12) 4%,
      rgb(0 0 0 / 0.5) 9%,
      #000 16%,
      #000 84%,
      rgb(0 0 0 / 0.5) 91%,
      rgb(0 0 0 / 0.12) 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgb(0 0 0 / 0.12) 5%,
      rgb(0 0 0 / 0.5) 11%,
      #000 18%,
      #000 82%,
      rgb(0 0 0 / 0.5) 89%,
      rgb(0 0 0 / 0.12) 95%,
      transparent 100%
    );
  mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 0.12) 4%,
      rgb(0 0 0 / 0.5) 9%,
      #000 16%,
      #000 84%,
      rgb(0 0 0 / 0.5) 91%,
      rgb(0 0 0 / 0.12) 96%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgb(0 0 0 / 0.12) 5%,
      rgb(0 0 0 / 0.5) 11%,
      #000 18%,
      #000 82%,
      rgb(0 0 0 / 0.5) 89%,
      rgb(0 0 0 / 0.12) 95%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.glimpse-image,
.glimpse-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  filter: var(--glimpse-media-filter);
}

.glimpse-image[hidden],
.glimpse-video[hidden] {
  display: none;
}

.glimpse-layer.is-logo {
  --glimpse-w: 12rem;
  --glimpse-h: calc(var(--glimpse-w) * 253 / 1600);
  --glimpse-cr: 0;
  --glimpse-media-filter: invert(46%);
}

.glimpse-layer.is-logo .glimpse-frame {
  overflow: visible;
  border-radius: 0;
  -webkit-mask: none;
  mask: none;
}

.glimpse-layer.is-logo .glimpse-image {
  object-fit: contain;
  object-position: top center;
  transform: none;
}

html[data-theme="dark"] .glimpse-layer {
  --glimpse-media-filter: saturate(0.86) contrast(0.94) brightness(0.78);
}

html[data-theme="dark"] .glimpse-layer.is-logo {
  --glimpse-media-filter: brightness(0.58);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .glimpse-layer {
    --glimpse-media-filter: saturate(0.86) contrast(0.94) brightness(0.78);
  }

  html:not([data-theme="light"]) .glimpse-layer.is-logo {
    --glimpse-media-filter: brightness(0.58);
  }
}

@media (max-width: 720px) {
  .glimpse-layer {
    --glimpse-w: 13.25rem;
    --glimpse-h: 8.85rem;
    --glimpse-cr: 1.7rem;
  }

  .glimpse-layer.is-logo {
    --glimpse-w: 10rem;
  }
}

@media (max-width: 480px) {
  .glimpse-layer {
    --glimpse-w: 11rem;
    --glimpse-h: 7.35rem;
    --glimpse-cr: 1.45rem;
  }

  .glimpse-layer.is-logo {
    --glimpse-w: 8.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glimpse-layer:not(.is-pinned) {
    display: none;
  }

  .glimpse-layer.is-pinned {
    transition: none;
    filter: none;
  }
}

/* Scenic previews are atmosphere behind the page, with an uninterrupted sky. */
.scene-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 16%, #000 58%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 16%, #000 58%);
}
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 900ms cubic-bezier(.22,1,.36,1), transform 1600ms cubic-bezier(.22,1,.36,1);
}
.scene.is-visible { opacity: 1; transform: scale(1); }
.scene-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  filter: saturate(.75) contrast(.9);
}
html[data-theme="dark"] .scene-media { opacity: .3; filter: saturate(.75) brightness(.7); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .scene-media { opacity: .3; filter: saturate(.75) brightness(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .scene { transition: none; transform: none; }
}
@media print {
  .scene-background, .glimpse-layer { display: none; }
}