/* ==========================================================================
   Homepage
   ========================================================================== */

.hero {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(110px, 19vh, 150px) var(--gutter) clamp(14px, 3vh, 28px);
}

/* ---- Terminal headline -------------------------------------------------- */

.headline {
  position: absolute;
  top: clamp(28px, 8vh, 88px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  padding: 0 var(--gutter);
}

.headline__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6.5vw, 4.2rem);
  letter-spacing: 0.02em;
  color: var(--ink-hi);
  text-shadow: 0 0 18px rgba(60, 255, 122, 0.35);
  white-space: nowrap;
  animation: text-glitch-flicker 2s steps(1) infinite;
}

/* ---- Portrait ---------------------------------------------------------
   Two source photos, swapped by breakpoint: a waist-up shot for wide
   screens, and a full-body shot for narrow phones (its taller aspect
   ratio matches a phone screen far better, and it already shows full legs
   and shoes, so no fading trick is needed at the bottom). Text is baked
   into both photos, so no CSS label overlay is needed anymore. */

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

.portrait-stage__img {
  display: block;
  max-height: 80vh;
  max-width: 98vw;
  width: auto;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}

.portrait-stage__img--mobile { display: none; }

/* Darkens the lower edge into shadow (desktop crop only — the mobile photo
   already shows full legs/shoes, so it doesn't need this). */
.portrait-stage__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 88%, rgba(2, 4, 3, 0.75) 95%, #030503 100%);
}

@media (max-width: 700px) {
  .portrait-stage__img--desktop { display: none; }
  .portrait-stage__img--mobile { display: block; }
  .portrait-stage__shade { display: none; }
}

/* ---- Pill hotspots ---------------------------------------------------------
   Invisible clickable zones over each pill (text is baked into the photo).
   On hover/focus they bloom a soft colored glow behind the hand. Two sets
   of coordinates, one per photo, swapped at the same breakpoint as above. */

.pill-zone {
  position: absolute;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pill-zone__glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  opacity: 0;
  filter: blur(6px);
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}

.pill-zone--red .pill-zone__glow {
  background: radial-gradient(ellipse 55% 60% at 50% 55%, rgba(255, 59, 70, 0.55) 0%, rgba(255, 59, 70, 0) 72%);
}

.pill-zone--blue .pill-zone__glow {
  background: radial-gradient(ellipse 55% 60% at 50% 55%, rgba(59, 139, 255, 0.55) 0%, rgba(59, 139, 255, 0) 72%);
}

.pill-zone:hover .pill-zone__glow,
.pill-zone:focus-visible .pill-zone__glow {
  opacity: 1;
  animation: pill-glow-pulse 1.6s ease-in-out infinite;
}

@keyframes pill-glow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.12); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pill-zone:hover .pill-zone__glow,
  .pill-zone:focus-visible .pill-zone__glow {
    animation: none;
  }
}

/* Desktop photo coordinates (measured from oleksandr-pills-desktop.png) */
.pos-desktop.pill-zone--red { left: 3.5%; top: 47.4%; width: 32.4%; height: 22.2%; }
.pos-desktop.pill-zone--blue { left: 62.6%; top: 47%; width: 34%; height: 23%; }

/* Mobile photo coordinates (measured from oleksandr-pills-mobile.png) */
.pos-mobile.pill-zone--red { left: 5.9%; top: 28.8%; width: 30.3%; height: 12%; }
.pos-mobile.pill-zone--blue { left: 62.8%; top: 29.2%; width: 31.2%; height: 12%; }

.pos-mobile { display: none; }

@media (max-width: 700px) {
  .pos-desktop { display: none; }
  .pos-mobile { display: block; }
}

/* ---- Responsive tuning ---------------------------------------------------- */

@media (max-width: 640px) {
  .hero { padding-top: clamp(90px, 16vh, 130px); }

  .portrait-stage__img { max-width: 106vw; }
}

@media (min-width: 1440px) {
  .portrait-stage__img { max-height: 84vh; }
}