/* Portfolio navigation only; the example websites keep their own styling. */
a.portfolio-example-return {
  position: fixed;
  overflow: hidden;
  isolation: isolate;
  left: max(28px, env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  z-index: 1500;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: #242424;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 24px rgba(0,0,0,.18);
  text-decoration: none;
  transition: background .2s;
  animation: portfolio-return-pulse 2.25s ease-in-out infinite;
}
a.portfolio-example-return::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 60%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  opacity: 0;
  transform: translateX(-220%) skewX(-20deg);
  animation: portfolio-return-shine 8s ease-in-out infinite;
}
@keyframes portfolio-return-shine {
  0%, 78% { opacity: 0; transform: translateX(-220%) skewX(-20deg); }
  80% { opacity: 1; transform: translateX(-220%) skewX(-20deg); }
  94% { opacity: 1; transform: translateX(400%) skewX(-20deg); }
  96%, 100% { opacity: 0; transform: translateX(400%) skewX(-20deg); }
}
a.portfolio-example-return svg {
  display: block;
  width: 52%;
  height: 52%;
}
a.portfolio-example-return:hover { background: #3b3b3b; }
a.portfolio-example-return:hover,
a.portfolio-example-return:focus-visible { animation-play-state: paused; }
a.portfolio-example-return:focus-visible { outline: 3px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 7px #242424; }
@keyframes portfolio-return-pulse {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.1); }
}
@media (max-width: 700px) {
  a.portfolio-example-return {
    width: 60px;
    height: 60px;
    left: max(16px, env(safe-area-inset-left));
  }
}
@media (prefers-reduced-motion: reduce) {
  a.portfolio-example-return { animation: none; transition: none; }
  a.portfolio-example-return::after { display: none; animation: none; }
}
@media print { a.portfolio-example-return { display: none; } }