/* Homepage pointer effects ported from the Astro site's section glow and Button. */
#hello.section--clean-cover {
  isolation: isolate;
  overflow: clip;
}

#hello.section--clean-cover .section__inner {
  position: relative;
  z-index: 1;
}

.portfolio-cover__flow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 32rem;
  max-width: 62vw;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(160, 190, 255, 0.1) 22%,
    rgba(120, 255, 220, 0.07) 42%,
    rgba(255, 255, 255, 0) 75%
  );
  filter: blur(28px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-cover__flow--visible {
  opacity: 1;
}

.portfolio-cover__actions .button {
  --home-button-x: 50%;
  --home-button-y: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    color 250ms cubic-bezier(0.25, 1, 0.5, 1),
    border-color 250ms cubic-bezier(0.25, 1, 0.5, 1),
    background 250ms cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 250ms cubic-bezier(0.25, 1, 0.5, 1),
    transform 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

.portfolio-cover__actions .button::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  border-radius: inherit;
  background: radial-gradient(
    circle 80px at var(--home-button-x) var(--home-button-y),
    rgba(216, 150, 250, 0.55),
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.portfolio-cover__actions .button svg {
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-cover__actions .button:hover,
  .portfolio-cover__actions .button:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(216, 160, 250, 0.5);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.24),
      rgba(255, 255, 255, 0.1)
    );
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.44),
      0 0 44px rgba(216, 150, 250, 0.4);
  }

  .portfolio-cover__actions .button--light:hover,
  .portfolio-cover__actions .button--light:focus-visible {
    color: var(--ink);
    border-color: transparent;
    background:
      linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.92),
          rgba(255, 255, 255, 0.74)
        )
        padding-box,
      linear-gradient(
          180deg,
          rgba(255, 255, 255, 1),
          rgba(216, 160, 250, 0.45)
        )
        border-box;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 0 44px rgba(216, 150, 250, 0.4);
  }

  .portfolio-cover__actions .button:hover::before,
  .portfolio-cover__actions .button:focus-visible::before {
    opacity: 1;
  }

  .portfolio-cover__actions .button:hover svg,
  .portfolio-cover__actions .button:focus-visible svg {
    transform: translateX(0.25em);
  }
}

@media (max-width: 991px),
  (hover: none),
  (pointer: coarse),
  (prefers-reduced-motion: reduce) {
  .portfolio-cover__flow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-cover__actions .button,
  .portfolio-cover__actions .button::before,
  .portfolio-cover__actions .button svg {
    transition: none;
  }
}

@media print {
  .portfolio-cover__flow {
    display: none;
  }
}