@scope (.gg-telescope-zoom) {
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:scope {
  font-size: 12px;
  --color-text: #1a1a1a;
  --color-bg: #fff;
  --color-link: #1a1a1a;
  --color-link-hover: #1a1a1a;
  --page-padding: 1.5rem;
}

:scope {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: 'area-normal', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:scope,
:scope {
  max-width: 100vw;
  overflow-x: hidden;
}

:scope {
  margin: 0;
}

@media (scripting: enabled) {
  .loading {
    &::before,
    &::after {
      content: '';
      position: fixed;
      z-index: 10000;
    }

    &::before {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--color-bg);
    }

    &::after {
      top: 50%;
      left: 50%;
      width: 100px;
      height: 1px;
      margin: 0 0 0 -50px;
      background: var(--color-link);
      animation: loaderAnim 1.5s ease-in-out infinite alternate forwards;
    }
  }
}

@keyframes loaderAnim {
  0% {
    transform: scaleX(0);
    transform-origin: 0% 50%;
  }

  50% {
    transform: scaleX(1);
    transform-origin: 0% 50%;
  }

  50.1% {
    transform: scaleX(1);
    transform-origin: 100% 50%;
  }

  100% {
    transform: scaleX(0);
    transform-origin: 100% 50%;
  }
}

a {
  text-decoration: none;
  color: var(--color-link);
  font-weight: 600;
  outline: none;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
    color: var(--color-link-hover);
  }

  &:focus {
    outline: none;
    background: lightgrey;

    &:not(:focus-visible) {
      background: transparent;
    }

    &:focus-visible {
      outline: 2px solid red;
      background: transparent;
    }
  }
}

.tz-frame {
  display: grid;
  z-index: 1000;
  grid-row-gap: 1rem;
  grid-column-gap: 2rem;
  pointer-events: none;
  justify-items: start;
  align-content: start;
  padding: var(--page-padding);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  grid-template-columns: auto auto auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    'title title title sponsor'
    'back github archive sponsor';

  #cdawrap {
    max-width: 400px;
    align-self: start;
    text-align: right;
  }

  a,
  button {
    pointer-events: auto;
  }

  .tz-frame__title {
    grid-area: title;
    font-size: inherit;
    margin: 0;
  }

  .tz-frame__back {
    grid-area: back;
    justify-self: start;
  }

  .tz-frame__archive {
    grid-area: archive;
    justify-self: start;
  }

  .tz-frame__github {
    grid-area: github;
  }

  .frame__tags {
    grid-area: tags;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .frame__demos {
    grid-area: demos;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
}

.tz-section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  --progress: 0;

  .tz-section__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    transform: scale(var(--progress));

    .tz-section__media__front,
    .tz-section__media__back {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .tz-section__media__front {
      filter: blur(2px);

      img {
        mask-image: url(./mask.png);
        mask-position: 50% 50%;
        mask-size: cover;
      }
    }

    .tz-front-1 {
      transform: scale(1);
    }

    .tz-front-2 {
      transform: scale(0.85);
    }

    .tz-front-3 {
      transform: scale(0.6);
    }

    .tz-front-4 {
      transform: scale(0.45);
    }

    .tz-front-5 {
      transform: scale(0.3);
    }

    .tz-front-6 {
      transform: scale(0.15);
    }

    img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  h1 {
    font-size: 3vw;
    font-weight: normal;
    transform: translateY(-15%);
    font-weight: 600;
    display: flex;

    span {
      display: inline-block;
    }

    .tz-left {
      transform: translate3d(calc(var(--progress) * (-66vw + 100%) - 0.5vw), 0, 0);
    }

    .tz-right {
      transform: translate3d(calc(var(--progress) * (66vw - 100%)), 0, 0);
    }

    @media (max-width: 768px) {
      font-size: 9vw;

      .tz-left {
        transform: translate3d(calc(var(--progress) * (-100vw + 100%) - 0.5vw), 0, 0);
      }

      .tz-right {
        transform: translate3d(calc(var(--progress) * (100vw - 100%)), 0, 0);
      }
    }
  }
}

.tz-section__images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  perspective: 100vh;

  img {
    position: absolute;
    width: 10vw;

    @media (max-width: 768px) {
      width: 20vw;
    }

    &:nth-of-type(1) {
      top: 15vw;
      left: -3vw;
    }

    &:nth-of-type(2) {
      top: 5vw;
      left: 20vw;
    }

    &:nth-of-type(3) {
      top: 8vw;
      left: 26.5vw;

      @media (max-width: 768px) {
        top: 30vw;
        left: 30vw;
      }
    }

    &:nth-of-type(4) {
      top: 18vw;
      right: 18vw;

      @media (max-width: 768px) {
        right: 15vw;
        top: 30vw;
      }
    }

    &:nth-of-type(5) {
      top: 5vw;
      right: 10vw;

      @media (max-width: 768px) {
        top: 10vw;
        right: 5vw;
      }
    }

    &:nth-of-type(6) {
      bottom: 5vw;
      left: 10vw;

      @media (max-width: 768px) {
        left: 5vw;
      }
    }

    &:nth-of-type(7) {
      bottom: 8vw;
      left: 22.5vw;

      @media (max-width: 768px) {
        left: 10vw;
        bottom: 27.5vw;
      }
    }

    &:nth-of-type(8) {
      bottom: 3vw;
      left: 45vw;

      @media (max-width: 768px) {
        bottom: 10vw;
        left: 35vw;
      }
    }

    &:nth-of-type(9) {
      bottom: 5vw;
      right: 15vw;

      @media (max-width: 768px) {
        bottom: 5vw;
      }
    }

    &:nth-of-type(10) {
      bottom: 9vw;
      right: 7vw;

      @media (max-width: 768px) {
        right: 3vw;
        bottom: 22vw;
      }
    }
  }
}

}
.gg-telescope-zoom{position:relative;isolation:isolate;background:#fff;color:#1a1a1a;font-family:area-normal,sans-serif;font-size:12px;text-transform:none;font-weight:400;--page-padding:1.5rem;--color-link:#1a1a1a;}
.gg-telescope-zoom .tz-frame{position:absolute;z-index:5;}
/* Goldstine UI kit adaptation */
.gg-telescope-zoom {
  --color-text: #F3F5F7;
  --color-bg: #111A23;
  --color-link: #E7B52E;
  --color-link-hover: #C88710;
  color: #F3F5F7;
  background: #111A23;
  font-family: GoldstineSynonym, sans-serif;
}
.gg-telescope-zoom .tz-section { isolation: isolate; background: #111A23; }
.gg-telescope-zoom .tz-section__media { z-index: 0; }
.gg-telescope-zoom .tz-section__images { z-index: 2; }
/* Keep the flying thumbnails at the demo's 10vw size despite host image rules. */
.gg-telescope-zoom .tz-section__images img { width: 10vw !important; height: auto !important; }
@media (max-width: 768px) {
  .gg-telescope-zoom .tz-section__images img { width: 20vw !important; }
}
.gg-telescope-zoom .tz-section h1 {
  z-index: 3;
  position: relative;
  color: #F3F5F7;
  font-family: GoldstineChillax, sans-serif;
  font-weight: 500;
  letter-spacing: -.045em;
}
.gg-telescope-zoom .tz-section h1 .tz-right { color: #E7B52E; }
.gg-telescope-zoom .tz-section__media__front img { mask-image: url('./mask.png'); }
@media (prefers-reduced-motion: reduce) {
  .gg-telescope-zoom { --progress: 1 !important; }
  .gg-telescope-zoom .tz-section__media__front { filter: none; transform: scale(1) !important; }
  .gg-telescope-zoom .tz-section__images img { transform: none !important; }
}

/* The host section must not become a scroll container around the fixed pin.
   The viewport stage already clips the flying images. */
html body #research-telescope-zoom { overflow: visible; }

/* The title follows the image through depth; its words stay laterally fixed. */
.gg-telescope-zoom .tz-section { perspective: 100vh; transform-style: preserve-3d; }
.gg-telescope-zoom .tz-section h1 { transform-style: preserve-3d; will-change: transform; }
.gg-telescope-zoom .tz-section h1 .tz-left,
.gg-telescope-zoom .tz-section h1 .tz-right { transform: none !important; }