/* ==========================================================================
   Contact page — payphone with social-link keys
   ========================================================================== */

.contact-hero {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(130px, 17vh, 170px) var(--gutter) clamp(24px, 4vh, 48px);
}

.contact-title {
  position: absolute;
  top: clamp(28px, 7vh, 76px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  padding: 0 var(--gutter);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 5.2vw, 3.1rem);
  letter-spacing: 0.06em;
  color: var(--ink-hi);
  animation: text-glitch-flicker 1.5s steps(1) infinite;
  text-shadow: 0 0 18px rgba(60, 255, 122, 0.35);
}


/* ---- Payphone stage --------------------------------------------------------- */

.phone-stage {
  position: relative;
  display: inline-block;
}

.phone-stage__img {
  display: block;
  max-height: 74vh;
  max-width: 97vw;
  width: auto;
  height: auto;
  border-radius: 6px;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.6));
}

@media (max-width: 700px) {
  .phone-stage {
    width: 96vw;
    aspect-ratio: 0.72;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .phone-stage__img {
    max-width: none;
    max-height: none;
    width: auto;
    height: 100%;
    border-radius: 0;
  }
}

/* ---- Key hotspots ------------------------------------------------------------
   Each sits exactly over a physical keypad button (coordinates measured from
   the source photo), styled to look like it belongs on the phone: a dark
   metallic badge with the platform icon, glowing green like the LCD screen. */

.key-hotspot {
  position: absolute;
  width: 3.9%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #4a4a48 0%, #1c1c1a 55%, #0a0a09 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.25),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s var(--ease-out), transform 0.2s var(--ease-out);
}

.key-hotspot:hover,
.key-hotspot:focus-visible {
  transform: translate(-50%, -50%) scale(1.22);
}

.key-hotspot:active {
  transform: translate(-50%, -50%) scale(1.1);
}

.key-hotspot--instagram { left: 46.1%; top: 37.8%; }
.key-hotspot--linkedin { left: 50.7%; top: 44.6%; }
.key-hotspot--email { left: 55.7%; top: 50.9%; }

/* On the mobile crop (see media query above), the container is narrower
   than the photo's own aspect ratio, so ~26% of the image width is cropped
   off each side to fill more of the screen height. Icon x-positions are
   recomputed for that visible window; y stays the same since cropping is
   horizontal only. Icon size is also scaled up to match, since percentages
   are now relative to a narrower box. */
@media (max-width: 700px) {
  .key-hotspot { width: 8.1%; }

  .key-hotspot--instagram { left: 41.9%; top: 37.8%; }
  .key-hotspot--linkedin { left: 52.3%; top: 44.6%; }
  .key-hotspot--email { left: 63.2%; top: 50.9%; }
}

.key-hotspot__icon {
  width: 52%;
  height: 52%;
  color: #8fe6a0;
  filter: drop-shadow(0 0 2px rgba(143, 230, 160, 0.6));
  transition: color 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}

.key-hotspot__glow {
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 230, 160, 0.55) 0%, rgba(143, 230, 160, 0) 70%);
  opacity: 0;
  filter: blur(4px);
  transition: opacity 0.35s var(--ease-out);
  pointer-events: none;
}

.key-hotspot:hover,
.key-hotspot:focus-visible {
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(143, 230, 160, 0.75);
}

.key-hotspot:hover .key-hotspot__icon,
.key-hotspot:focus-visible .key-hotspot__icon {
  color: #eafff0;
  filter: drop-shadow(0 0 6px rgba(143, 230, 160, 0.95));
}

.key-hotspot:hover .key-hotspot__glow,
.key-hotspot:focus-visible .key-hotspot__glow {
  opacity: 1;
  animation: pill-glow-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .key-hotspot:hover .key-hotspot__glow,
  .key-hotspot:focus-visible .key-hotspot__glow {
    animation: none;
  }
}

/* ---- Back link (reuses the same look as the portfolio page) ----------------- */

.back-link {
  position: fixed;
  top: clamp(14px, 3vh, 26px);
  left: clamp(14px, 3vw, 32px);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
  padding: 0.55em 1.1em 0.55em 0.85em;
  border: 1px solid rgba(60, 255, 122, 0.35);
  border-radius: 999px;
  background: rgba(4, 7, 5, 0.55);
  backdrop-filter: blur(6px);
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}

.back-link:hover,
.back-link:focus-visible {
  border-color: var(--code-bright);
  background: rgba(14, 61, 32, 0.45);
}

.back-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}