.glass-text {
  --light-x: 50%;
  --light-y: 50%;
  --pointer-x: 0px;
  --pointer-y: 0px;
  --pointer-tilt-x: 0deg;
  --pointer-tilt-y: 0deg;
  --interaction-scale: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transform:
    perspective(700px)
    translate3d(var(--pointer-x), var(--pointer-y), 0)
    rotateX(var(--pointer-tilt-x))
    rotateY(var(--pointer-tilt-y))
    scale(var(--interaction-scale));
  transform-origin: center;
  transform-style: preserve-3d;
  transition:
    opacity 180ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 320ms ease;
}

.glass-text::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: radial-gradient(
    circle 52px at var(--light-x) var(--light-y),
    rgba(232, 232, 232, 0.98) 0%,
    rgba(160, 160, 160, 0.86) 26%,
    rgba(72, 72, 72, 0.44) 50%,
    transparent 78%
  );
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.glass-text:focus-visible,
a:focus-visible > .glass-text {
  outline: 1px solid currentColor;
  outline-offset: 7px;
  --interaction-scale: 1.075;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.13));
}

.glass-text:active,
a:active > .glass-text {
  opacity: 0.42;
  --interaction-scale: 0.985;
}

@media (hover: hover) and (pointer: fine) {
  .glass-text:hover,
  .glass-text:focus-visible,
  a:hover > .glass-text,
  a:focus-visible > .glass-text {
    --interaction-scale: 1.075;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.13));
  }

  .glass-text.is-tilting {
    transition-duration: 75ms;
  }

  .glass-text:hover::after,
  .glass-text:focus-visible::after,
  a:hover > .glass-text::after,
  a:focus-visible > .glass-text::after {
    opacity: 0.94;
  }

  .glass-text:active,
  a:active > .glass-text {
    --interaction-scale: 0.985;
  }
}

/* The link owns its layout and focus ring; its text owns the glass effect. */
a:focus-visible > .glass-text { outline: none; }
.glass-text--prose, .glass-text--prose::after { display: block; }
.glass-text--prose { transform-origin: left center; }

/* Home links and photography titles share these exact resting and active
   styles. Change them here once to keep both pages identical.
   Each closed row is 48px high, with no gap between rows. */
.home-title,
.project-title {
  position: relative;
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  min-height: 48px;
  padding: 0;
  color: #333;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(0);
  transition:
    color 180ms ease,
    font-size 580ms cubic-bezier(.2, .9, .25, 1.12),
    transform 580ms cubic-bezier(.2, .9, .25, 1.12);
}

.home-title > .glass-text,
.project-title-text { vertical-align: middle; }

.home-title:hover,
.home-title:focus-visible,
.project-title:hover,
.project-title:focus-visible,
.project.is-selected .project-title {
  color: #000;
  font-size: calc(var(--title-size) * 1.125);
  transform: translateY(-2px);
}

.home-title:focus-visible,
.project-title:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* Keep the hover color solid and prevent a gray flash when pressed. */
.home-title > .glass-text::after,
.project-title > .glass-text::after { display: none; }
.home-title:active > .glass-text,
.project-title:active > .glass-text { opacity: 1; }

/* Shared by the home navigation and photography titles. Change this one
   definition to update both entrances, including their top-to-bottom timing. */
.text-arrive {
  animation: nav-link-arrive 760ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(100ms + var(--arrival-index, 0) * 150ms);
}

@keyframes nav-link-arrive {
  0% { opacity: 0; transform: translate3d(0, 20px, 0) scale(0.82); }
  58% { opacity: 1; transform: translate3d(0, -3px, 0) scale(1.045); }
  78% { transform: translate3d(0, 1px, 0) scale(0.985); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .text-arrive { animation: none; }
  .home-title, .project-title { transition: none; }
  .glass-text,
  a:hover > .glass-text,
  a:focus-visible > .glass-text {
    transition: none;
    transform: none;
    filter: none;
  }

  .glass-text::after {
    transition: none;
  }
}