/* ==========================================================================
   DESIGN TOKENS
   Values come from the Desktop Build Specification (authoritative) and the
   Figma file (6GDne1knGzn7fRwTheFIwW). Where the two differ, the spec value
   is used and the Figma value is noted alongside so it can be switched.
   ========================================================================== */

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --c-page:            #F4F2F3;  /* All project page backgrounds */
  --c-header:          #141414;  /* SITE_HEADER background */
  --c-header-text:     #FFFFFF;  /* SITE_HEADER copy */
  --c-icon:            #777777;  /* Header link icons, inactive */
  --c-icon-hover:      #FFFFFF;  /* Header link icons, hover */
  --c-text:            #141414;  /* Project headings + body copy */
  --c-meta:            #A4A4A4;  /* Identifier, captions, footer */
  --c-tab:             #141414;  /* Return tab */

  /* ---- Typefaces --------------------------------------------------------- */
  --font-grotesk: "Neue Haas Grotesk Display Pro", "Helvetica Neue", Arial, sans-serif;
  --font-ayuthaya: "Ayuthaya", "Helvetica Neue", Arial, sans-serif;
  --w-light: 300;   /* 45 Light */
  --w-medium: 500;  /* 65 Medium */

  /* ---- Type scale ------------------------------------------------------- */
  --t-body-size: 22px;     --t-body-lh: 32px;      /* 45 Light */
  --t-heading-size: 32px;  --t-heading-lh: 32px;   /* 65 Medium */
  --t-caption-size: 12px;  --t-caption-lh: 32px;   /* Ayuthaya — Refinement 09 (was 14px) */
  --t-footer-size: 14px;   --t-footer-lh: 32px;    /* 45 Light */
  --t-accordion-size: 24px; --t-accordion-lh: 32px; /* Ayuthaya */

  /* Project identifier — spec: Ayuthaya 14 / 32. (Figma component: 16 / 18) */
  --t-identifier-size: 14px;
  --t-identifier-lh: 32px;

  /* Header — second pass: name 22px, description 10px (line-heights 18px) */
  --t-name-size: 22px;
  --t-name-lh: 18px;
  --t-desc-size: 10px;
  --t-desc-lh: 18px;

  /* ---- Header geometry -------------------------------------------------- */
  /* Header: padding 20 / 30, identity gap 8, links gap 20, icons 15px high */
  --header-pad-x: 30px;
  --header-pad-y: 20px;
  --identity-gap: 8px;    /* Version 3: 10 → 8 */
  --header-links-gap: 20px;
  --icon-h: 15px;
  /* Width of the active view's scrollbar (set by js/app.js). The header and
     tab end at the scrollbar so they never cover it. */
  --sbw: 0px;
  --header-h: calc(var(--header-pad-y) * 2 + var(--t-name-lh) + var(--identity-gap) + var(--t-desc-lh));

  /* ---- Return tab ------------------------------------------------------- */
  --tab-w: 80px;
  --tab-h: 47px;            /* Full height (PEEK variant) */
  --tab-h-hover: 71px;      /* EXTENDED variant: 36px visible */
  --tab-visible: 12px;      /* Resting: 12px visible below the header */
  --tab-radius: 10px;
  /* Version 3: the tab is centred on the LinkedIn / Instagram / Email group.
     js/app.js measures the group and sets --tab-left; --tab-right is the
     fallback before that runs (group centre ≈ 74.7px from the header edge). */
  --tab-right: calc(74.7px - var(--tab-w) / 2 + var(--sbw));
  --tab-icon-bottom: 12px;  /* Caret sits 12px above the tab's bottom edge in both variants */

  /* ---- Project layout --------------------------------------------------- */
  --pad-copy: 170px;         /* Horizontal padding for copy and in-margin media */
  --gap-header-identifier: 130px;
  --gap-copy: 60px;          /* Identifier → intro copy */
  /* Global spacing (second pass):
     130px — between any written copy and other content, and to the footer
      80px — only between media grouped together in the original design
      20px — media to its directly associated caption */
  --gap-section: 130px;
  --gap-group: 80px;
  --caption-pad-top: 20px;
  /* Version 3: captions sit 30px inside the right edge of their own image */
  --caption-inset: 30px;
  --para-gap: 32px;          /* One blank 32px line between heading/paragraphs */
  --footer-pad-x: 60px;
  --footer-pad-bottom: 40px; /* FOOTER frame 72px = 32px line + 40px */

  /* ---- Homepage accordion ---------------------------------------------- */
  --strip-h: 350px;          /* DEFAULT: 6 x 350 = 2100 */
  --strip-h-active: 700px;   /* PROJECT_ACTIVE_n: active strip */
  --strip-h-inactive: 280px; /* PROJECT_ACTIVE_n: other strips */
  --strip-img-h: 800px;      /* Accordion gradients: 1440 x 800 */
  --strip-img-offset: -50px; /* Image FILLs a 700px rect → centred crop, 50px above */
  --strip-title-x: 80px;
  --strip-title-y: 600px;
  /* Refinement 04: above 1440px the accordion scales as one composition so
     the 1440 framing is kept. Values are the 1440 sizes as % of the width
     (cqw = 1% of the accordion's width). */
  --strip-h-scaled: max(var(--strip-h), 24.30556cqw);
  --strip-h-active-scaled: max(var(--strip-h-active), 48.61111cqw);
  --strip-h-inactive-scaled: max(var(--strip-h-inactive), 19.44444cqw);
  --strip-img-h-scaled: max(var(--strip-img-h), 55.55556cqw);
  --strip-img-offset-scaled: calc(-1 * max(50px, 3.47222cqw));
  --strip-title-x-scaled: max(var(--strip-title-x), 5.55556cqw);
  /* Title keeps its 1440 relationship to the active strip: 68px clear below its 32px line */
  --strip-title-y-scaled: calc(var(--strip-h-active-scaled) - (var(--strip-h-active) - var(--strip-title-y)));

  /* ---- Motion (Figma prototype values) ---------------------------------- */
  /* Figma "Gentle" spring (mass 1, stiffness 100, damping 15), sampled. */
  --ease-gentle-767: linear(0, 0.0118, 0.0434, 0.09, 0.1473, 0.2117, 0.2802, 0.3504, 0.4204, 0.4886, 0.5538, 0.6153, 0.6724, 0.7247, 0.7721, 0.8146, 0.8522, 0.8851, 0.9137, 0.9381, 0.9587, 0.9758, 0.9899, 1.0012, 1.01, 1.0167, 1.0217, 1.025, 1.0271, 1.0282, 1.0283, 1.0278, 1.0268, 1.0254, 1.0237, 1.0218, 1.0199, 1.0179, 1.0159, 1.014, 1.0122, 1.0105, 1.0089, 1.0074, 1.0061, 1.005, 1.0039, 1.003, 1);
  --ease-gentle-1022: linear(0, 0.0204, 0.073, 0.1471, 0.234, 0.3266, 0.42, 0.5103, 0.5948, 0.6719, 0.7406, 0.8006, 0.8518, 0.8948, 0.9301, 0.9584, 0.9806, 0.9975, 1.0099, 1.0185, 1.024, 1.0271, 1.0283, 1.0281, 1.0268, 1.0249, 1.0225, 1.0199, 1.0173, 1.0147, 1.0122, 1.01, 1.0079, 1.0062, 1.0046, 1.0033, 1.0023, 1.0014, 1.0007, 1.0002, 0.9998, 0.9995, 0.9994, 0.9993, 0.9992, 0.9992, 0.9992, 0.9993, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);   /* Figma "Ease out" */

  --dur-accordion: 767ms;    /* Accordion: Mouse enter → Smart animate, Gentle */
  --dur-tab: 767ms;          /* Return tab hover: Smart animate, Gentle */
  --dur-page: 1022ms;        /* Project open / close: Slide, Gentle */
  --dur-icon: 200ms;         /* Header links: Smart animate, Ease out */
  --dur-dissolve: 500ms;     /* Cross-fades: Dissolve, Ease out */

  /* Site entrance — no prototype timing exists for this sequence; these
     values reuse the prototype's motion vocabulary (see README). */
  --entrance-start: 300ms;
  --entrance-reveal-dur: 3000ms;  /* Second pass: twice as slow as 1500ms */
  --entrance-desc-delay: 200ms;   /* after the name starts */
  /* Version 3 sequence: name → description → icons → accordion (speeds unchanged) */
  --entrance-icons-dur: 600ms;
  /* Version 4: the icons start as soon as the description has *visually*
     finished revealing. On this easing curve the clip edge has passed the
     top of the text at 45% of the 3000ms reveal; the remaining time only
     moves the clip through empty overhang, which read as a pause. */
  --entrance-reveal-visible: 0.45;
  --entrance-icons-delay: calc(var(--entrance-desc-delay) + var(--entrance-reveal-dur) * var(--entrance-reveal-visible));
  --entrance-rise-delay: calc(var(--entrance-icons-delay) + var(--entrance-icons-dur));   /* after the icons complete */
  --ease-reveal: cubic-bezier(0.45, 0, 0.2, 1);  /* softer start, gentle landing */

  /* ---- Scrollbar (Refinement 03) ---------------------------------------- */
  /* Second pass: YouTube dark-mode reference — narrow, rounded muted-grey
     thumb on a transparent track */
  --c-scroll-track: #242424;   /* Version 3: dark track site-wide */
  --c-scroll-thumb: #717171;
  --c-scroll-thumb-hover: #909090;
  --scroll-w: 8px;
}

/* Fallback for browsers without CSS linear() easing (pre-2023). */
@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-gentle-767: cubic-bezier(0.34, 1.15, 0.64, 1);
    --ease-gentle-1022: cubic-bezier(0.34, 1.15, 0.64, 1);
  }
}