/* ==========================================================================
   Page: hub (home). Layout specific to the home page only.

   Two layouts:
   - Pointer layout (mouse/trackpad, ≥768px): big arrow in a left column,
     dim at rest, lights up and slides to the hovered link.
   - Touch / small screens: small arrow at the top right of each link.
   ========================================================================== */

.hub {
  /* Arrow column (Figma: 197px arrow + 120px gap @ 144px headline) */
  --arrow-size: calc(var(--text-display) * 1.37);
  --arrow-gap: calc(var(--text-display) * 0.83);
  --arrow-rest-opacity: 0.2;
  --text-offset: 0px;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: var(--space-8) var(--space-6);
}

@media (min-width: 60rem) {
  .hub {
    padding-block: 7.5rem var(--space-7);   /* Figma: 120px top */
  }
}

.hub__header,
.hub__links,
.hub__footer {
  padding-left: var(--text-offset);
}

/* --- Header: name + role ------------------------------------------------ */
.hub__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  color: var(--color-text-muted);
}

@media (min-width: 60rem) {
  .hub__header {
    gap: 2.5rem;   /* Figma: 40px */
  }
}

.hub__name {
  font-size: var(--text-name);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.hub__role {
  max-width: 24em;
  font-size: var(--text-role);
  font-weight: var(--weight-light);
  line-height: 1.2;
}

/* Lines only break at the separators, never inside a phrase. */
.hub__role > span {
  white-space: nowrap;
}

.hub__role-sep {
  margin-inline: 0.2em;
}

/* --- Links -------------------------------------------------------------- */
.hub__main {
  flex: 1;
  margin-top: clamp(var(--space-8), 10vh, 6.375rem);   /* Figma: first link at y=390 */
}

.hub__links {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-8), var(--arrow-gap), 7.5rem);   /* Figma: 120px */
}

/* Big arrow: only exists in the pointer layout. */
.hub__arrow {
  display: none;
}

/* --- Pointer layout ----------------------------------------------------- */
@media (min-width: 48rem) and (hover: hover) and (pointer: fine) {
  .hub {
    --text-offset: calc(var(--arrow-size) + var(--arrow-gap));
  }

  .hub__links .display-link {
    display: block;
    width: fit-content;
    max-width: 100%;
  }

  .hub__links .display-link__arrow {
    display: none;
  }

  /* One arrow for the whole list. Sits dim on the first link; on hover or
     keyboard focus it goes to full opacity and slides to that link. When the
     pointer leaves, it dims again where it is. --arrow-y comes from
     /assets/js/hub.js. */
  .hub__arrow {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: var(--arrow-rest-opacity);
    pointer-events: none;
    transform: translateY(var(--arrow-y, 0px));
    transition:
      transform var(--duration-arrow) var(--ease-out),
      opacity var(--duration-base) var(--ease-out);
    will-change: transform, opacity;
  }

  .hub__arrow.is-active {
    opacity: 1;
  }

  /* While one link is active, the other one's subtitle steps back. */
  .hub__links:has(.display-link:hover, .display-link:focus-visible)
    .display-link:not(:hover, :focus-visible) .display-link__subtitle {
    color: var(--color-text-muted);
  }
}

/* --- Footer ------------------------------------------------------------- */
.hub__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-9);
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  color: var(--color-text-muted);
}

.hub__email {
  color: var(--color-text);
  -webkit-user-select: all;
  user-select: all;
  cursor: text;
}

/* --- Desktop scale: fit the whole composition in one screen ---------------
   Every size below is "Figma px × --u". --u is the largest scale at which
   the 1440 × 1080 composition (Figma frame + footer) fits the window, so the
   page keeps the exact Figma proportions and never needs to scroll.
   --u and --zoom are defined in tokens.css (shared with the cursor). */
@media (min-width: 48rem) and (hover: hover) and (pointer: fine) {
  .hub {
    --text-display:     calc(144 * var(--u));
    --text-display-sub: calc(64 * var(--u));
    --text-name:        calc(72 * var(--u));
    --text-role:        max(13px, calc(32 * var(--u)));
    --text-sm:          max(13px, calc(18 * var(--u)));

    /* Centered 1108-wide block (Figma: 166 → 1274) */
    --container-width: calc(1108 * var(--u));
    --gutter: calc(166 * var(--u));

    padding-block: calc(120 * var(--u)) calc(48 * var(--u));
  }

  .hub__header { gap: calc(40 * var(--u)); }
  .hub__main   { margin-top: calc(106 * var(--u)); }
  .hub__links  { gap: var(--arrow-gap); }               /* 120 */
  .hub__footer { margin-top: calc(72 * var(--u)); gap: calc(12 * var(--u)) calc(32 * var(--u)); }
}