/* CONTACT — #contact footer section */

#contact {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
}

/* Quiet end-card light: a broad diagonal spectrum, softened into a real light
   spill rather than a UI gradient. The global grain sits above it, tying it to
   the texture used everywhere else on the reel. */
#contact::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: -24%;
  bottom: -2%;
  width: 148%;
  height: 48%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(62, 102, 255, 0.02) 8%,
    rgba(62, 102, 255, 0.2) 22%,
    rgba(122, 92, 255, 0.18) 39%,
    rgba(255, 61, 129, 0.16) 56%,
    rgba(255, 122, 41, 0.13) 72%,
    rgba(255, 194, 75, 0.07) 86%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 61%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 61%, transparent 100%);
  filter: blur(42px) saturate(1.15);
  mix-blend-mode: screen;
  opacity: 0.46;
  transform: rotate(-8deg) translate3d(-3%, 10%, 0) scaleX(0.98);
  transform-origin: center;
  animation: contact-spectrum-drift 18s cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  will-change: transform, opacity;
}

@keyframes contact-spectrum-drift {
  0% {
    opacity: 0.38;
    transform: rotate(-8deg) translate3d(-3%, 10%, 0) scaleX(0.98);
  }
  52% {
    opacity: 0.48;
    transform: rotate(-7deg) translate3d(1%, 0, 0) scaleX(1.02);
  }
  100% {
    opacity: 0.42;
    transform: rotate(-9deg) translate3d(4%, -8%, 0) scaleX(1.05);
  }
}

#contact .contact-email {
  display: block;
  font-size: clamp(1.6rem, 5.2vw, 4.6rem);
  margin-top: 2.2rem;
  font-variation-settings: 'wdth' 110, 'wght' 700;
  color: var(--bone);
  position: relative;
  width: fit-content;
  max-width: 100%;
}

/* spectrum underline, off by default, wipes in on hover */
#contact .contact-email::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.06em;
  width: 100%;
  height: 3px;
  background: var(--spectrum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-cut);
}

#contact .contact-email:hover::after,
#contact .contact-email:focus-visible::after {
  transform: scaleX(1);
}

/* rgb-split on hover, static (not velocity-driven) */
#contact .contact-email:hover,
#contact .contact-email:focus-visible {
  text-shadow: 2px 0 rgba(255, 61, 129, 0.55), -2px 0 rgba(62, 102, 255, 0.55);
}

#contact .contact-meta {
  margin-top: 2rem;
}

@media (max-width: 700px) {
  #contact::before {
    left: -42%;
    bottom: 5%;
    width: 184%;
    height: 42%;
    filter: blur(30px) saturate(1.1);
    opacity: 0.38;
  }
}

@media (prefers-reduced-motion: reduce) {
  #contact::before {
    animation: none;
    opacity: 0.34;
    transform: rotate(-8deg) translate3d(0, 2%, 0);
    will-change: auto;
  }
}