/* ============ HERO ============ */
#home.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 972;
  min-height: 560px;
  background: url('../assets/hero-bg.png') center / cover no-repeat;
  background-color: var(--gray-bg, #b3b3b3);
  overflow: hidden;
}

#home .hero-stage {
  position: absolute;
  inset: 0;
}

/* --- Layered typography (design: 270px on a 1920 canvas ≈ 14.06vw) --- */
#home .hero-word {
  position: absolute;
  line-height: 1.16;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

#home .hero-word--developer {
  left: 0;
  top: 5.2%;
  z-index: 1;
  font-family: var(--font-hero-alt, 'Albert Sans', sans-serif);
  font-weight: 400;
  font-size: clamp(48px, 14.06vw, 270px);
  color: var(--yellow, #ffd43b);
}

#home .hero-word--coder {
  left: 59.9%;
  top: 47.8%;
  z-index: 1;
  font-family: var(--font-hero, 'Alatsi', sans-serif);
  font-weight: 400;
  font-size: clamp(48px, 14.06vw, 270px);
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .25);
}

#home .hero-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

#home .hero-word--amp {
  left: 14%;
  top: 47.8%;
  z-index: 3;
  font-family: var(--font-hero, 'Alatsi', sans-serif);
  font-weight: 400;
  font-size: clamp(48px, 14.06vw, 270px);
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .3);
}

/* --- Social icons, top right --- */
#home .hero-social {
  position: absolute;
  top: clamp(18px, 2.65vw, 51px);
  right: clamp(16px, 2.9vw, 56px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
}

#home .hero-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
}
#home .hero-social__link:hover { transform: translateY(-3px); }

#home .hero-social__link--linkedin img { width: clamp(30px, 2.6vw, 50px);  height: auto; }
#home .hero-social__link--github  img { width: clamp(42px, 3.65vw, 70px); height: auto; }
#home .hero-social__link--email   img { width: clamp(36px, 3.07vw, 59px); height: auto; }

/* --- Entrance animations (Figma motion: Developer slides in from -200px, ease-out).
   Gated behind html.js so the hero is never blank when JS doesn't run. --- */
html.js #home .hero-word--developer {
  opacity: 0;
  transform: translateX(-200px);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1), opacity .55s ease-out;
}
html.js #home .hero-word--coder {
  opacity: 0;
  transform: translateX(200px);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1) .1s, opacity .55s ease-out .1s;
}
html.js #home .hero-word--amp {
  opacity: 0;
  transition: opacity .8s ease-out .3s;
}
html.js #home .hero-portrait {
  opacity: 0;
  transition: opacity .9s ease-out .15s;
}
html.js #home .hero-social {
  opacity: 0;
  transform: translateY(-14px);
  transition: transform .6s ease-out .45s, opacity .6s ease-out .45s;
}

body.loaded #home .hero-word--developer,
body.loaded #home .hero-word--coder { opacity: 1; transform: none; }
body.loaded #home .hero-word--amp,
body.loaded #home .hero-portrait { opacity: 1; }
body.loaded #home .hero-social { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  #home .hero-word--developer,
  #home .hero-word--coder,
  #home .hero-word--amp,
  #home .hero-portrait,
  #home .hero-social {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============ FLOATING DOCK ============ */
.dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px;
  background: var(--dock-bg, #171717);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

.dock-item {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tile, #262626);
  color: #fff;
  transition:
    transform .3s cubic-bezier(.34, 1.56, .64, 1),
    background-color .2s ease,
    color .2s ease;
}

.dock-item svg {
  width: 24px;
  height: 24px;
  display: block;
  overflow: visible;
}

.dock-item:hover { transform: scale(1.18) translateY(-4px); }

.dock-item.active {
  background: #d4d4d4;
  color: #171717;
}

.dock-item--avatar {
  background: none;
  overflow: hidden;
}
.dock-item--avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.dock-item--avatar.active {
  outline: 2px solid #d4d4d4;
  outline-offset: 1px;
}

@media (max-width: 600px) {
  .dock { gap: 8px; padding: 8px 14px; bottom: 16px; }
  .dock-item { width: 42px; height: 42px; }
  .dock-item svg { width: 20px; height: 20px; }
}