/* ============================================================
   Portfolio hero — production styles
   Single source of truth for index.html.
   Relative url()s resolve from this file's location (repo root), so the
   ./assets/... paths match the HTML.
   ============================================================ */

/* ----- Futura LT (display) — web-licensed, shipped in assets/fonts ----- */
@font-face {
  font-family: "Futura LT";
  src: url("./assets/fonts/FuturaLT-Bold.woff2") format("woff2"),
       url("./assets/fonts/FuturaLT-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- semantic color tokens (mirrors the Figma "Semantic" collection) --- */
  --surface-default: #fbfbfe;
  --surface-raised:  #f9f9ff;   /* reserved: raised panels — footer now uses --surface-default + frame */
  --text-primary:    #252626;
  --text-secondary:  #55585b;   /* Figma var is misspelled "text/seconday" */
  --text-accent:     #4549e7;
  --accent-default:  #4549e7;
  --text-on-accent:  #fbfbfe;
  --indigo-overlay:  rgba(38, 33, 92, 0.5);
  --border-accent-subtle: rgba(69, 73, 231, 0.16);   /* accent @16% — hairline frame/divider */

  --font-display: "Futura LT", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(24px, 8.33vw, 120px);   /* 120px at 1440 */
  --stage-max: 1800px;                     /* strategy B: cap & center, image bleeds past it */
  --content-max: 678px;

  /* --- DEFAULT (Figma-frame) type & spacing ---
     Base values. Also used <961px (mobile, where the clamps scale down).
     Overridden by the viewport tiers further below. */
  --h1-size:     clamp(42px, 11vw, 112px);
  --role-size:   clamp(26px, 4vw, 40px);
  --body-size:   clamp(16px, 1.4vw, 18px);
  --gap-section: clamp(32px, 4.4vw, 64px);   /* name (H1) ↔ "Designer & Researcher" */
  --gap-desc:    40px;                         /* "Designer & Researcher" ↔ body */
  --gap-cta:     40px;                         /* body ↔ button group */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--surface-default);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* guards the full-bleed image/footer */
}
img { display: block; max-width: 100%; }
.accent { color: var(--text-accent); }

/* ===== Frame (XL) ===== */
.xl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 46vw, 660px);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "topbar  topbar"
    "content image"
    "footer  footer";
  min-height: 100vh;
  background: var(--surface-default);
  overflow: hidden;
}

.top-bar {
  grid-area: topbar;
  display: flex; align-items: flex-end;
  padding: clamp(20px, 5vw, 40px) var(--gutter) clamp(14px, 2.5vw, 28px);
}
.monogram {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 3vw, 32px); line-height: 1; color: var(--text-primary);
}

.content {
  grid-area: content; align-self: center;
  display: flex; flex-direction: column; gap: var(--gap-cta);
  padding-left: var(--gutter); padding-right: clamp(16px, 3vw, 40px);
  max-width: var(--content-max);
}
.text { display: flex; flex-direction: column; gap: var(--gap-section); }
.h1 {
  display: flex; flex-direction: column;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: var(--h1-size);
}
.h1 .line { white-space: nowrap; }
.h1 .line--accent { color: var(--text-accent); }
.h1 .line--primary { color: var(--text-primary); }

.description { display: flex; flex-direction: column; gap: var(--gap-desc); }
.role {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--role-size); line-height: 1.05; color: var(--text-primary);
}
.body {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--body-size); line-height: 1.5; color: var(--text-secondary);
  max-width: 518px;
}

.button-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.button {
  font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1;
  padding: 20px 24px; border-radius: 80px; border: none; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; cursor: pointer; transition: opacity 0.15s ease;
}
/* hover/press affordance is the GSAP "Lift" (see animations.js) */
.button--primary { background: var(--accent-default); color: var(--text-on-accent); }
.button--secondary { background: transparent; color: var(--text-accent); }

.hero-image {
  grid-area: image; position: relative; min-height: 320px;
  border-top-left-radius: clamp(120px, 25vw, 368px);
  overflow: hidden; background: #d9dbe6;
}
.hero-image__photo { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.hero-image__overlay {
  position: absolute; inset: 0;
  background: var(--indigo-overlay); mix-blend-mode: plus-lighter; pointer-events: none;
}

.logo-ticker {
  grid-area: footer; background: var(--surface-default); min-height: 157px;
  border-top: 1px solid var(--border-accent-subtle);
  border-bottom: 1px solid var(--border-accent-subtle);
  display: flex; align-items: center; justify-content: center;
  padding: 24px var(--gutter);
}
.logos {
  width: 100%; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 4vw, 64px); flex-wrap: wrap;
}
.logos li { display: flex; align-items: center; }
.logo { width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.62; }
.logo--ns { height: 28px; } .logo--backbase { height: 28px; }
.logo--ziggo { height: 31px; } .logo--essent { height: 25px; }

/* ============================================================
   DESKTOP (≥961px) — Strategy B: cap & center the stage at 1800,
   let the image + footer bleed to the viewport edges beyond it.
   ============================================================ */
@media (min-width: 961px) {
  .xl { max-width: var(--stage-max); margin-inline: auto; overflow: visible; }
  .hero-image {
    margin-right: min(0px, calc((var(--stage-max) - 100vw) / 2));
  }
  .logo-ticker {
    margin-inline: min(0px, calc((var(--stage-max) - 100vw) / 2));
    padding-inline: max(var(--gutter), calc((100vw - var(--stage-max)) / 2 + var(--gutter)));
  }
}

/* ===== type & spacing tiers — width AND height aware =====
   Shorter viewports get smaller type/spacing so the hero keeps fitting.
   Cascade order matters: LARGER first, then SMALLER (overrides on short
   screens), then EXTRA-SMALL (overrides on very short screens). */

/* ----- LARGER · only when wide (≥1561) AND genuinely tall (≥1080) -----
   The big 136px type needs real vertical room; below 1080 tall it crams,
   so wide-but-short viewports fall back to the Default tier. */
@media (min-width: 1561px) and (min-height: 1080px) {
  .xl {
    --h1-size:     clamp(112px, 8vw, 136px);
    --role-size:   clamp(40px, 2.8vw, 48px);
    --body-size:   clamp(18px, 1.2vw, 20px);
    --gap-section: clamp(64px, 5vw, 92px);
    --gap-desc:    clamp(32px, 2.4vw, 40px);
    --gap-cta:     clamp(64px, 5vw, 92px);
    --content-max: 760px;
  }
}

/* ----- 1431–1560px wide & tall: base = Figma-frame defaults ----- */

/* ----- SMALLER · narrow widths (961–1430) OR short viewports (≤860 tall) ----- */
@media (min-width: 961px) and (max-width: 1430px),
       (min-width: 961px) and (max-height: 860px) {
  .xl {
    --h1-size:     clamp(72px, 7vw, 96px);
    --role-size:   clamp(28px, 2.6vw, 34px);
    --body-size:   16px;
    --gap-section: clamp(28px, 3.4vw, 48px);
    --gap-desc:    clamp(16px, 1.8vw, 24px);
    --gap-cta:     clamp(28px, 3.4vw, 48px);
    --content-max: 600px;
  }
}

/* ----- EXTRA-SMALL · very short viewports (≤680 tall) ----- */
@media (min-width: 961px) and (max-height: 680px) {
  .xl {
    --h1-size:     clamp(56px, 5.2vw, 76px);
    --role-size:   clamp(24px, 2vw, 30px);
    --body-size:   15px;
    --gap-section: clamp(20px, 2.4vw, 32px);
    --gap-desc:    18px;
    --gap-cta:     18px;
    --content-max: 560px;
  }
}

/* ----- short viewports also trim the chrome (top bar + footer) so the hero fits ----- */
@media (min-width: 961px) and (max-height: 860px) {
  .top-bar { padding-top: clamp(16px, 3vw, 28px); padding-bottom: clamp(10px, 2vw, 18px); }
  .logo-ticker { min-height: 116px; }
}
@media (min-width: 961px) and (max-height: 680px) {
  .logo-ticker { min-height: 92px; }
}

/* ===== mobile stack (≤960px) ===== */
@media (max-width: 960px) {
  .xl {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "topbar" "content" "image" "footer";
  }
  .content {
    align-self: start;
    padding: clamp(16px,6vw,48px) var(--gutter) clamp(32px,8vw,56px);
    max-width: none;
  }
  .hero-image { min-height: clamp(300px, 62vw, 480px); border-top-left-radius: clamp(80px, 24vw, 220px); }
}
@media (max-width: 520px) { .logos { justify-content: center; gap: 28px 36px; } }

/* ============================================================
   PAGE-LOAD REVEAL (GSAP) — experiment, branch hero-flyin-reveal.
   Pre-hide animated elements, and ONLY when JS is active (`html.js`).
   With JS off, nothing here matches → everything renders normally.
   animations.js reveals them; the reduced-motion block is the CSS
   safety net (logos settle dimmed at .62, not full opacity).
   ============================================================ */
html.js .monogram,
html.js .h1,
html.js .role,
html.js .body,
html.js .button,
html.js .logo,
html.js .hero-image { opacity: 0; }

html.js .monogram,
html.js .h1,
html.js .role,
html.js .body,
html.js .button,
html.js .logo,
html.js .hero-image { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  html.js .monogram,
  html.js .h1,
  html.js .role,
  html.js .body,
  html.js .button,
  html.js .hero-image { opacity: 1; }
  html.js .logo { opacity: 0.62; }
  html.js .monogram,
  html.js .h1,
  html.js .role,
  html.js .body,
  html.js .button,
  html.js .logo,
  html.js .hero-image { will-change: auto; }
}