/* ==========================================================================
   HOME — built to the Figma "Home" frame (1512 × 982) and mobile frame (402 × 830).
   Every position is a Figma pixel value multiplied by --u, so the whole
   composition scales as one piece and stays anchored to the bottom edge.
   ========================================================================== */

.home {
  --u: min(calc(100vw / 1512), calc(100dvh / 982));
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

.home-stage {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(1512 * var(--u));
  height: calc(982 * var(--u));
  transform: translateX(-50%);
}

.home-portrait {
  position: absolute;
  top: calc(50 * var(--u));
  left: calc(220 * var(--u));
  width: calc(1093 * var(--u));
  max-width: none;
  user-select: none;
  pointer-events: none;
}

.home-signature {
  position: absolute;
  top: calc(321 * var(--u));
  left: calc(335 * var(--u));
  width: calc(221 * var(--u));
  margin: 0;
}

.home-signature img {
  width: 100%;
}

.home-subtitle {
  display: none;
}

.home-roles {
  position: absolute;
  top: calc(397 * var(--u));
  left: calc(1027 * var(--u));
  margin: 0;
  font-family: var(--font-mono);
  font-size: calc(16 * var(--u));
  line-height: 1.25;
  color: var(--ink);
  list-style: none;
  padding: 0;
}

/* Each line hugs its text so the typewriter reveal steps one character at a time */
.home-roles li {
  width: fit-content;
}

.home-nav {
  position: absolute;
  top: calc(742 * var(--u));
  left: calc(574 * var(--u));
  display: flex;
  gap: calc(15 * var(--u));
}

.home-pill {
  display: grid;
  place-items: center;
  width: calc(123 * var(--u));
  height: calc(38 * var(--u));
  border-radius: 112px;
  font-family: var(--font-mono);
  font-size: calc(16 * var(--u));
  color: var(--ink);
  background: #fff;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
    color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Frosted glass on hover / keyboard focus */
.home-pill:hover,
.home-pill:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

.home-pill:hover {
  transform: translateY(-2px);
}

.home-pill:active {
  transform: scale(0.96);
}

/* ---------- Entrance motion ---------- */
.home-portrait {
  animation: home-rise 1.1s var(--ease) both;
}

.home-signature {
  animation: home-sign 1.2s 0.35s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.home-roles li,
.home-subtitle {
  animation: fade-up 0.7s var(--ease) both;
}

.home-roles li:nth-child(1) { animation-delay: 0.55s; }
.home-roles li:nth-child(2) { animation-delay: 0.65s; }
.home-roles li:nth-child(3) { animation-delay: 0.75s; }
.home-subtitle { animation-delay: 0.6s; }

.home-pill {
  animation: fade-up 0.7s var(--ease) both;
}

.home-pill:nth-child(1) { animation-delay: 0.85s; }
.home-pill:nth-child(2) { animation-delay: 0.95s; }
.home-pill:nth-child(3) { animation-delay: 1.05s; }

@keyframes home-rise {
  from { opacity: 0; transform: translateY(40px) scale(1.015); }
  to { opacity: 1; transform: none; }
}

/* Signature "writes" itself left to right */
@keyframes home-sign {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ---------- Mobile frame (iPhone 17, 402 wide) ---------- */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .home {
    --u: min(calc(100vw / 402), calc(100dvh / 830));
  }

  .home-stage {
    width: calc(402 * var(--u));
    height: calc(830 * var(--u));
  }

  .home-portrait {
    top: calc(255 * var(--u));
    left: calc(-175 * var(--u));
    width: calc(753 * var(--u));
  }

  .home-signature {
    top: calc(55 * var(--u));
    left: calc(106 * var(--u));
    width: calc(190 * var(--u));
  }

  .home-subtitle {
    display: block;
    position: absolute;
    top: calc(233 * var(--u));
    left: 0;
    right: 0;
    width: fit-content;
    margin: 0 auto;
    font-family: var(--font-mono);
    font-size: calc(12 * var(--u));
    text-align: center;
    color: var(--ink);
  }

  .home-roles {
    display: none;
  }

  .home-nav {
    top: calc(664 * var(--u));
    left: calc(141 * var(--u));
    flex-direction: column;
    gap: calc(18 * var(--u));
  }

  .home-pill {
    width: calc(120 * var(--u));
    height: calc(36 * var(--u));
    font-size: calc(16 * var(--u));
  }
}

/* Motion (motion-fx.js) owns transforms on the home pills */
.has-motion .home-pill {
  transition-property: background-color, color, box-shadow;
}

.has-motion .home-pill:hover,
.has-motion .home-pill:active {
  transform: none;
}

.pre-motion .home-portrait,
.pre-motion .home-signature,
.pre-motion .home-roles li,
.pre-motion .home-subtitle,
.pre-motion .home-pill {
  opacity: 0;
}