/* Home */
#home {
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.hero { max-width: 790px; }
h1 { font-size: clamp(56px, 7.4vw, 112px); line-height: .95; letter-spacing: -4px; margin: 0; font-weight: 700; }
.role { font-size: clamp(18px, 2.3vw, 30px); letter-spacing: 2px; color: var(--cyan); margin: 22px 0 18px; }
.intro { font-size: 17px; line-height: 1.8; color: var(--body); margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }

/*
  Pontile sospeso: piattaforma con le testate + staffa che sfuma verso la città.
  La staffa occupa --pillar px sotto il pontile: chi lo usa riserva quello spazio.
*/
.dock {
  --pillar: 90px;
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 78;
  margin-bottom: var(--pillar);
  background: url('../assets/bridge/dock-deck.webp') center / 100% 100% no-repeat;
}
.dock::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 22%;
  width: 56%;
  height: var(--pillar);
  background: url('../assets/bridge/bracket.webp') center top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(#000 40%, transparent);
  mask-image: linear-gradient(#000 40%, transparent);
}

.welcome-stand { display: flex; flex-direction: column; align-items: center; flex: none; width: 300px; }
.welcome-stand .dock { width: 96%; margin-top: -2px; }
.welcome-stand .dock::before {
  content: '';
  position: absolute;
  top: 90%;
  left: 5%;
  width: 90%;
  height: var(--pillar);
  background: url('../assets/props/cable-loop.webp') center top / contain no-repeat;
  opacity: .8;
}

/* Terminale: il testo sta dentro lo schermo dell'immagine (coordinate in % del PNG) */
.welcome {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 640 / 738;
  background: url('../assets/ui/terminal.webp') center / contain no-repeat;
  transition: filter .2s;
}
.welcome:hover { filter: brightness(1.15) drop-shadow(0 0 18px #00daff40); }
.welcome-screen {
  position: absolute;
  left: 10.5%;
  top: 7.1%;
  width: 72.5%;
  height: 34.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(180deg, #06243acc, #041526e6);
}
.welcome-screen .micro { font-size: 10px; }
.welcome strong { font-family: var(--font-display); font-size: 19px; line-height: 1.2; color: var(--cyan); text-shadow: 0 0 12px #00daff66; }
.welcome-next { font-size: 12px; color: var(--body); }

.journey #home { flex-direction: row; flex-wrap: nowrap; align-items: safe center; min-height: 0; }
/* Il nome resta protagonista anche sui desktop bassi: la misura segue anche l'altezza. */
.journey h1 { font-size: clamp(56px, min(7.4vw, 11.5vh), 112px); }
/* Home's welcome terminal remains a content link, outside the resting pad. */
.journey .welcome-stand { display: none; }
@media (min-width: 761px) and (max-height: 820px) {
  .journey .welcome-stand { width: 250px; }
  .journey .welcome-stand .dock { --pillar: 60px; }
  .journey .role { margin: 14px 0 12px; }
  .journey .actions { margin-top: 20px; }
}
@media (max-width: 760px) {
  #home { min-height: calc(100svh - var(--header-h)); flex-direction: column; align-items: stretch; justify-content: center; }
  h1 { font-size: clamp(48px, 13vw, 85px); letter-spacing: -2px; }
  .role { font-size: 18px; }
  .intro { font-size: 15px; }
  .actions { flex-direction: column; gap: 10px; margin-top: 24px; }
  .actions .button { justify-content: space-between; }
  .welcome-stand { width: min(280px, 100%); align-self: center; }
  .journey #home { flex-direction: column; align-items: stretch; justify-content: safe center; }
  .journey .welcome-stand { margin: 28px auto 0; }
  .journey .welcome-stand .dock { --pillar: 40px; }
}

.availability { max-width: 64ch; margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.actions .hero-contact { align-self: center; margin: 0; font-size: 14px; }
@media (max-width: 760px) { .actions .hero-contact { align-self: flex-start; padding-block: 8px; } }