/* ============================================================
   HOME PAGE — self-contained layout.
   Fixed hero + smooth scroll + light scroll parallax (driven by
   home.js). Chrome (header/nav, buttons, contact, footer, tokens,
   type scale) comes from styles.css + type-system.css. The project
   CARD system (grid + .pj cards + dim/blur + cursor label) is shared
   with the case studies and lives in cards.css + cards.js.
   ============================================================ */

/* Both project sections are a centered 1400px content column (with a 24px min
   side gap on narrower screens so cards never touch the edges). */
.work.container { max-width: none; width: min(1400px, calc(100% - 48px)); padding-inline: 0; }

/* ---------- HERO (fixed layer; fades + drifts as the page scrolls over it) ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; }   /* in-flow spacer */
.hero__stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;              /* the HEADLINE sits at the vertical centre */
  justify-content: center;
  text-align: center;
  will-change: opacity, transform;
}
/* The block is sized by the headline only (the top cluster is absolute), so
   centring the block centres the headline itself. Its own tighter side padding
   gives the Display-1 headline room for two lines. */
.hero__block { position: relative; width: 100%; max-width: 1500px; padding-inline: clamp(24px, 3vw, 48px); }
.hero__top {
  position: absolute; left: 0; right: 0;
  bottom: calc(100% + clamp(44px, 6vw, 96px));   /* floats above the centred headline */
  display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1vw, 14px);
}

/* Clickable intro (avatar + greeting) → About. Underline wipes in from the left. */
.hero__intro {
  display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1vw, 14px);
  color: inherit; text-decoration: none; cursor: pointer;
}
.hero__avatar { width: clamp(56px, 5vw, 72px); height: clamp(56px, 5vw, 72px); border-radius: 50%; overflow: hidden; flex: none; }
.hero__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__greeting { position: relative; font-weight: 300; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -0.02em; }
.hero__greeting::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.hero__intro:hover .hero__greeting::after,
.hero__intro:focus-visible .hero__greeting::after { transform: scaleX(1); }
.hero__name { font-weight: 700; }   /* "Amanda" is bold */
.hero__titles {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(8px, 1vw, 18px); font-weight: 300; font-size: clamp(15px, 1.4vw, 20px);
  letter-spacing: -0.02em; margin-top: 2px;
}
.hero__sep { display: inline-block; width: 1px; height: 1em; background: rgba(0, 0, 0, 0.28); }
.hero__headline {
  font-weight: 500;
  font-size: clamp(2.25rem, 5.3vw, 5rem);   /* Display 1 (up to 80px), fluid below */
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  max-width: 1400px;
  text-wrap: balance;
  margin: 0 auto;
}

/* Scroll cue — fixed at the bottom; opacity fades on scroll (set in JS). */
.hero__cue {
  position: fixed; left: 50%; bottom: clamp(18px, 4vh, 40px); transform: translateX(-50%);
  z-index: 2;
  display: inline-flex; flex-direction: column; align-items: center; gap: 18px;
  color: var(--black); text-decoration: none; opacity: 0.42; will-change: opacity;
}
.hero__cue-label { font-size: var(--fs-body-lg); font-weight: 500; }
.hero__cue-mouse { width: 24px; height: 40px; border: 2px solid var(--black); border-radius: 14px; display: flex; }
.hero__cue-dot {
  width: 8px; height: 8px; margin: auto; border-radius: 50%;
  background: linear-gradient(170deg, #1a1a1a, #000000);
  animation: cue-dot 1.15s ease-in-out infinite;
}
@keyframes cue-dot { 0% { transform: translateY(-6px); opacity: 0; } 45% { opacity: 1; } 100% { transform: translateY(9px); opacity: 0; } }

/* ---------- WORK SECTIONS (opaque; scroll up over the fixed hero) ---------- */
.work { padding-top: clamp(56px, 8vw, 120px); background: var(--white); }
.work--first { padding-top: clamp(80px, 11vw, 168px); }        /* first section clears the hero */
/* "Other projects" gets a big, deliberate 300px of breathing room top + bottom. */
.work--last { padding-top: 300px; padding-bottom: 300px; }
.work__title { text-align: center; font-weight: 500; margin-bottom: clamp(36px, 5vw, 72px); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px) {
  /* Mobile hero = the SAME fixed-stage model as desktop, so it FADES + drifts
     as the page scrolls up over it (driven by home.js). The headline stays
     vertically centred (stage flex-centres the block, which now holds only the
     headline); the "top" cluster (avatar/greeting/titles) is pinned near the
     TOP of the screen. Cue inherits the desktop fixed-bottom + JS fade. */
  .hero { min-height: 100svh; }
  .hero__stage { padding-inline: clamp(24px, 6vw, 40px); }   /* keeps fixed + flex-centre from base */
  .hero__block { position: static; max-width: none; padding-inline: 0; }
  .hero__top {
    position: absolute; left: 0; right: 0; bottom: auto;
    top: clamp(92px, 15vh, 150px);   /* near the top, clear of the sticky header */
    margin-bottom: 0;
  }
  .work { padding-top: clamp(48px, 12vw, 80px); }
  .work--first { padding-top: clamp(48px, 12vw, 80px); padding-bottom: clamp(48px, 12vw, 80px); }
  /* Mobile-only separator line between the two project sections. */
  .work--last {
    border-top: 1px solid var(--line);
    padding-top: clamp(48px, 12vw, 80px); padding-bottom: clamp(64px, 16vw, 120px);
  }
  .work__title { margin-bottom: clamp(28px, 8vw, 44px); }
}