@charset "utf-8";

/* Quiet motion for the non-blog site. The approved hero and product pixels stay untouched. */
.site-polish-reveal {
  transition: opacity .42s ease-out, transform .42s cubic-bezier(.2,.7,.2,1);
}
.site-polish-reveal.site-polish-pending {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

/* The reflection belongs to the frame, never to the screenshot itself. */
.feature-figure .image-frame {
  position: relative;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.feature-figure .image-frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(246, 203, 160, .75), transparent);
  opacity: 0;
  transform: scaleX(.55);
  transition: opacity .3s ease, transform .3s ease;
}
.feature-figure .image-frame.site-polish-frame-entered::after {
  animation: site-polish-frame-light 1.1s ease-out;
}
@keyframes site-polish-frame-light {
  0%, 100% { opacity: 0; transform: scaleX(.55); }
  48% { opacity: .85; transform: scaleX(1); }
}

@media (hover: hover) {
  .feature-figure:hover .image-frame {
    border-color: rgba(229, 175, 126, .47);
    box-shadow: 0 26px 62px rgba(0, 0, 0, .4), 0 0 24px rgba(206, 139, 82, .075);
  }
  .feature-figure:hover .image-frame::after {
    opacity: 1;
    transform: scaleX(1);
  }
  .access-grid article,
  .download-choice-grid article,
  .detail-grid article,
  .help-grid a {
    transition: border-color .24s ease, box-shadow .24s ease;
  }
  .access-grid article:hover,
  .download-choice-grid article:hover,
  .detail-grid article:hover,
  .help-grid a:hover {
    border-color: rgba(227, 182, 140, .44);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .12);
  }
}

.button > span[aria-hidden="true"],
.text-link > span[aria-hidden="true"],
.inline-link > span[aria-hidden="true"],
.nav-action > span[aria-hidden="true"] {
  display: inline-block;
  transition: transform .22s ease;
}
.button:is(:hover, :focus-visible) > span[aria-hidden="true"],
.text-link:is(:hover, :focus-visible) > span[aria-hidden="true"],
.inline-link:is(:hover, :focus-visible) > span[aria-hidden="true"],
.nav-action:is(:hover, :focus-visible) > span[aria-hidden="true"] {
  transform: translate3d(3px, -1px, 0);
}

@media (prefers-reduced-motion: reduce) {
  .site-polish-reveal,
  .feature-figure .image-frame,
  .feature-figure .image-frame::after,
  .access-grid article,
  .download-choice-grid article,
  .detail-grid article,
  .help-grid a,
  .button > span[aria-hidden="true"],
  .text-link > span[aria-hidden="true"],
  .inline-link > span[aria-hidden="true"],
  .nav-action > span[aria-hidden="true"] {
    transition: none !important;
  }
  .feature-figure .image-frame.site-polish-frame-entered::after {
    animation: none;
  }
  .site-polish-reveal.site-polish-pending {
    opacity: 1;
    transform: none;
  }
}