/* ============================================================
   Pedro Oliveira — Executive Design Portfolio
   1. Tokens, fonts, reset
   ============================================================ */

/* ---------- Typefaces (self-hosted) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */
:root {
  /* Surface — dark */
  --ink-900: #05070a;
  --ink-800: #0a0f17;
  --ink-700: #111720;
  --ink-600: #161e29;

  /* Surface — light */
  --paper: #f4f6f8;
  --paper-pure: #ffffff;

  /* Text */
  --on-dark: #ffffff;
  --on-dark-2: #9da8b5;
  --on-dark-3: #7e8a98;
  --on-light: #05070a;
  --on-light-2: #47525f;
  --on-light-3: #5f6b79;

  /* Signature */
  --blue: #3c82ff;
  --blue-soft: #6ea8ff;
  --blue-deep: #1f57c4;

  /* Hairlines */
  --rule-dark: rgba(255, 255, 255, 0.14);
  --rule-dark-soft: rgba(255, 255, 255, 0.08);
  --rule-light: rgba(5, 7, 10, 0.14);
  --rule-light-soft: rgba(5, 7, 10, 0.08);

  /* Contextual (flipped per section) */
  --bg: var(--ink-900);
  --fg: var(--on-dark);
  --fg-2: var(--on-dark-2);
  --fg-3: var(--on-dark-3);
  --rule: var(--rule-dark);
  --rule-soft: var(--rule-dark-soft);

  /* Type scale */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "Segoe UI", Arial, sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia,
    serif;

  --fs-hero: clamp(3.4rem, 6vw, 7rem);
  --fs-beat: clamp(2.5rem, 5.1vw, 5.6rem);
  --fs-h2: clamp(2.25rem, 4vw, 5rem);
  --fs-h3: clamp(1.5rem, 2.3vw, 2.5rem);
  --fs-h4: clamp(1.25rem, 1.5vw, 1.625rem);
  --fs-lead: clamp(1.125rem, 1.25vw, 1.375rem);
  --fs-body: clamp(1.0625rem, 1.05vw, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.75rem;
  --fs-metric: clamp(3.25rem, 6.2vw, 6.5rem);

  --lh-display: 1.02;
  --lh-title: 1.08;
  --lh-body: 1.62;

  /* Layout */
  --maxw: 1440px;
  --gutter: clamp(1.25rem, 4.5vw, 5rem);
  --col-gap: clamp(1.25rem, 2vw, 2.5rem);
  --section-y: clamp(6rem, 13vh, 11.5rem);
  --nav-h: 72px;

  /* Motion
     One family of curves, used everywhere, so the whole page moves like a
     single object rather than a pile of components:
       --ease        general state changes; symmetric, no overshoot
       --ease-out    entrances; a long expo tail that decelerates into place
       --ease-spring one soft overshoot, only for things that flip or snap
       --ease-in     exits; leaves quickly, so nothing lingers */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --dur-xs: 180ms;
  --dur: 640ms;
  --dur-fast: 380ms;
  --dur-slow: 1000ms;

  /* Reveal — transform runs longer than opacity so a block is legible
     before it has finished settling. */
  --reveal-rise: 26px;
  --reveal-dur: 1000ms;
  --reveal-fade: 620ms;
  --reveal-step: 70ms;

  /* Film
     --film-overlap is the distance the impact strip travels up over the
     pinned stage at the end of the film. It is added to --film-scroll and
     then taken back off as a negative margin, so the net page length is
     unchanged: 600 - 100 is the same 500 the page had before the strip
     started overlapping. */
  --film-scroll: 600vh;
  --film-overlap: 100vh;
  --scrim: 0.42;
}

@media (max-width: 900px) {
  :root {
    --film-scroll: 500vh;
    --nav-h: 60px;
  }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}
ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
}
::selection {
  background: var(--blue);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}