/* ============================================================
   Kevin Charboneau — Portfolio
   FOUNDATION: type ramp · grid · dark theme · nav · hero · transitions
   Built on the Morflax DS tokens, retuned to the Figma direction:
   near-black canvas, steel-blue depth, ice-blue ink, DM Sans system.
   ============================================================ */

/* ---- Fonts ------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=DM+Mono:wght@400;500&display=swap');
@font-face {
  font-family: 'Cal Sans';
  src: url('https://cdn.jsdelivr.net/gh/calcom/font/fonts/webfonts/CalSans-SemiBold.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* ============================================================
   DESIGN TOKENS  (override the DS dark theme to the Figma palette)
   ============================================================ */
:root {
  /* Figma-derived dark palette */
  --ink:        #0b0d0f;   /* page base */
  --ink-2:      #101316;   /* work canvas (rgb 17,17,17, cooled) */
  --ink-3:      #161a1e;   /* raised surface */
  --ink-4:      #1d2329;   /* hover surface */

  --steel-deep: #1e384a;
  --steel:      #456380;
  --steel-soft: #5e7585;
  --mist:       #c2d6e1;
  --ice:        #e0f4ff;   /* primary ink / brand light-blue */

  /* Semantic ink */
  --fg:         #eaf4fb;
  --fg-1:       rgba(224, 244, 255, 0.66);
  --fg-2:       rgba(224, 244, 255, 0.44);
  --fg-3:       rgba(224, 244, 255, 0.26);
  --line:       rgba(224, 244, 255, 0.12);
  --line-2:     rgba(224, 244, 255, 0.20);
  --line-soft:  rgba(224, 244, 255, 0.06);

  --hero-grad:  linear-gradient(208deg, #1e384a 8%, #3c576e 42%, #5e7585 70%, #93b0c2 100%);

  /* Type families (display is swappable via Tweaks) */
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-sans:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, monospace;
  --font-brush:   'Cal Sans', 'DM Sans', sans-serif;

  /* ---- Type ramp (fluid modular scale) ---- */
  --t-eyebrow:  0.8125rem;                       /* 13 */
  --t-meta:     0.875rem;                         /* 14 */
  --t-body-sm:  0.9375rem;                        /* 15 */
  --t-body:     1.0625rem;                        /* 17 */
  --t-body-lg:  clamp(1.125rem, 0.4vw + 1rem, 1.25rem);
  --t-lead:     clamp(1.25rem, 1.1vw + 1rem, 1.625rem);
  --t-h5:       1.125rem;
  --t-h4:       clamp(1.25rem, 0.8vw + 1rem, 1.5rem);
  --t-h3:       clamp(1.625rem, 1.6vw + 1rem, 2.25rem);
  --t-h2:       clamp(2.125rem, 3.4vw + 1rem, 3.5rem);
  --t-h1:       clamp(2.75rem, 4.6vw + 1rem, 4.75rem);
  --t-display:  clamp(4rem, 12vw, 11.5rem);

  --lh-tight:   1.02;
  --lh-snug:    1.12;
  --lh-head:    1.06;
  --lh-lead:    1.32;
  --lh-body:    1.62;

  --tr-display: -0.035em;
  --tr-head:    -0.02em;
  --tr-snug:    -0.012em;
  --tr-caps:    0.14em;
  --tr-caps-sm: 0.10em;

  /* ---- Grid ---- */
  --container:  1320px;
  --gutter:     clamp(16px, 1.6vw, 28px);
  --margin:     clamp(20px, 5vw, 72px);

  /* ---- Radii / elevation (lean on DS, define page-locals) ---- */
  /* All corner radii flattened to 12px site-wide (pills/circles kept as shape primitives). */
  --r-sm: 12px; --r-md: 12px; --r-lg: 12px; --r-xl: 12px; --r-2xl: 12px;
  --r-pill: 999px;
  /* Override DS radius tokens so bundle components match. */
  --radius-xs: 12px; --radius-sm: 12px; --radius-md: 12px; --radius-lg: 12px;
  --radius-xl: 12px; --radius-2xl: 12px; --radius-3xl: 12px;
  --shadow-float: 0 2px 6px rgba(0,0,0,0.28), 0 18px 50px -18px rgba(0,0,0,0.65);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.78, 0.2, 1);
  --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 160ms; --dur-2: 280ms; --dur-3: 520ms; --dur-4: 820ms;

  /* Motion-intensity multiplier (driven by Tweaks). */
  --motion: 1;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Section-level snap. 'proximity' (not 'mandatory') so the tall pinned Work
     carousel scrolls freely through its projects and only the section
     boundaries gently snap into place. */
  scroll-snap-type: y proximity;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--ice); color: var(--ink); }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ---- Type primitives ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.mono { font-family: var(--font-mono); }
.grad-ice {
  background: linear-gradient(180deg, #fff 0%, var(--mist) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================
   GRID + CONTAINER
   ============================================================ */
.wrap {
  width: 100%;
  max-width: calc(var(--container) + var(--margin) * 2);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.section { padding-block: clamp(72px, 11vw, 168px); position: relative; }

.sec-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: baseline;
  margin-bottom: clamp(36px, 5vw, 72px);
}
/* Pin the section eyebrow to the top of the viewport while scrolling the
   section — mirrors the "Selected Work" sticky stage head. */
.about .sec-head,
.contact .sec-head {
  position: sticky; top: 0; z-index: 5;
  margin-bottom: clamp(8px, 1.5vw, 20px);
  padding-top: clamp(18px, 2.4vw, 28px);
  padding-bottom: clamp(30px, 4.5vw, 56px);
}
.about .sec-head { background: linear-gradient(to bottom, var(--ink) 0%, var(--ink) 52%, transparent 100%); }
.contact .sec-head { background: linear-gradient(to bottom, var(--ink-2) 0%, var(--ink-2) 52%, transparent 100%); }
.sec-head__label {
  grid-column: 1 / 7;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--steel-soft);
}
.sec-head__label::before {
  content: ""; width: 34px; height: 1px; background: var(--line-2);
}
.sec-head__index {
  grid-column: 11 / 13;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--fg-2);
  letter-spacing: var(--tr-caps-sm);
}
@media (max-width: 720px) {
  .sec-head__label { grid-column: 1 / 10; }
  .sec-head__index { grid-column: 10 / 13; }
}

/* ============================================================
   SCROLL REVEAL  (visible resting state; animate from hidden
   only when in view, gated on reduced-motion)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(calc(26px * var(--motion))); }
  .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity var(--dur-4) var(--ease-emph),
                transform var(--dur-4) var(--ease-emph);
    transition-delay: var(--rd, 0ms);
  }
  .reveal[data-d="1"].is-in { --rd: 80ms; }
  .reveal[data-d="2"].is-in { --rd: 160ms; }
  .reveal[data-d="3"].is-in { --rd: 240ms; }
  .reveal[data-d="4"].is-in { --rd: 320ms; }
  .reveal[data-d="5"].is-in { --rd: 400ms; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 80;
  padding: clamp(18px, 2.4vw, 30px) var(--margin);
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease);
}
.nav > * { pointer-events: auto; }
.nav.is-hidden { transform: translateY(-118%); opacity: 0; }

.brand {
  display: flex; align-items: center; gap: 9px;
  color: var(--ice);
  cursor: pointer;
}
.brand__kc {
  --w-kc: 23px;     /* KC mark width at 28px tall (25:30) */
  --w-full: 158px;  /* wordmark width at 28px tall (169:30) */
  position: relative;
  display: block;
  height: 28px;
  width: var(--w-kc);
  color: var(--ice);
  overflow: visible;
  transition: width 0.6s var(--ease-emph);
}
.brand__kc.is-open { width: var(--w-full); }
.brand__kc svg { height: 100% !important; width: auto !important; max-width: none !important; display: block; }
.brand__kc svg path { fill: currentColor; }
/* Clean KC monogram shown at rest; cross-fades out as the wordmark unfurls. */
.brand__mono {
  position: absolute; left: 0; top: 0; height: 100%;
  opacity: 1;
  transition: opacity 0.2s var(--ease);
}
.brand__kc.is-open .brand__mono { opacity: 0; }
/* Wordmark — hidden at rest; clipped from the right so it reveals one letter
   at a time on hover (openBrand steps the inset back). */
.brand__word {
  position: absolute; left: 0; top: 0; height: 100%;
  clip-path: inset(0 85.8% 0 0);
  opacity: 0;
  transition: opacity 0.18s var(--ease), clip-path 0.11s var(--ease);
}
.brand__kc.is-open .brand__word { opacity: 1; }
@media (max-width: 520px) { .brand__kc { height: 26px; --w-kc: 22px; --w-full: 147px; } }

.nav__links {
  display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px);
}
.nav__link {
  appearance: none; border: 0; background: none; cursor: pointer;
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: var(--tr-caps-sm);
  text-transform: uppercase;
  color: var(--fg-1);
  padding: 6px 2px;
  transition: color var(--dur-1) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--ice);
  transition: right var(--dur-2) var(--ease);
}
.nav__link:hover { color: var(--ice); }
.nav__link:hover::after,
.nav__link.is-active::after { right: 0; }
.nav__link.is-active { color: var(--ice); }
@media (max-width: 600px) { .nav__links { gap: 18px; } }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--hero-grad);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate;
}
.hero__sparkles {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero__grain {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 78% 64%, rgba(224,244,255,0.10), transparent 46%),
    radial-gradient(90% 70% at 12% 6%, rgba(12,18,24,0.42), transparent 60%);
  pointer-events: none;
}
.hero__wordmark {
  position: absolute;
  left: 50%; top: clamp(26%, 35vh, 38%);
  transform: translateX(-50%) translateY(calc(-50% - 20px));
  width: min(48vw, 630px);
  aspect-ratio: 656 / 353;
  z-index: 4;
  color: var(--ice);
  filter: drop-shadow(0 24px 60px rgba(10,18,26,0.45));
  will-change: transform;
}
.hero__wordmark .wm-wipe { width: 100%; height: 100%; }
.hero__wordmark .wm-wipe > span, .hero__wordmark svg { display: block; width: 100%; height: 100%; }

/* ---- Wordmark entrance ----
   Matches the page-transition wordmark motion (scale-up + fade on --ease).
   Runs on the inner .wm-wipe so it never fights the centering / parallax
   transform on .hero__wordmark. Resting state is the natural, fully-visible
   mark, so print / reduced-motion just show it. */
.hero__wordmark .wm-wipe { transform-origin: center 58%; }
@media (prefers-reduced-motion: no-preference) {
  .hero .wm-wipe { animation: wmReveal var(--dur-3) var(--ease) forwards; }
}
@keyframes wmReveal {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.hero__glasses-wrap {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
}
.hero__glasses {
  width: min(108%, 1500px);
  margin: 0 auto -2%;
  object-fit: contain;
  object-position: bottom center;
  transform-origin: bottom center;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,0.5));
  will-change: transform;
  pointer-events: none;
}
.hero__caption {
  position: absolute;
  left: 0; right: 0; bottom: clamp(34px, 6vh, 72px);
  z-index: 3;
  text-align: center;
  padding-inline: var(--margin);
}
.hero__role {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.35rem, 4vw + 1rem, 4.15rem);
  line-height: 1.0;
  letter-spacing: var(--tr-head);
  color: #fff;
  text-shadow: 0 2px 28px rgba(10,18,26,0.45);
}
.hero__sub {
  margin-top: 0.7em;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.9375rem, 0.6vw + 0.8rem, 1.18rem);
  line-height: 1.25;
  letter-spacing: var(--tr-caps-sm);
  text-transform: uppercase;
  color: var(--mist);
  text-shadow: 0 2px 18px rgba(10,18,26,0.45);
}

/* ============================================================
   PAGE TRANSITION OVERLAY  (.pt)  — one element, three styles.
   JS toggles .cover (incoming) then .reveal (outgoing) phases.
   ============================================================ */
.pt {
  position: fixed; inset: 0; z-index: 200;
  pointer-events: none;
  display: grid; place-items: center;
  visibility: hidden;
  will-change: clip-path, transform, opacity;
}
.pt__mark {
  width: min(60vw, 520px);
  aspect-ratio: 656 / 353;
  color: var(--ice);
  opacity: 0; transform: scale(0.94);
  filter: drop-shadow(0 20px 50px rgba(8,16,24,0.5));
}
.pt__mark > span, .pt__mark svg { display: block; width: 100%; height: 100%; }

/* ---- Curtain / wipe (wordmark) ---- */
.pt--curtain { background: var(--steel-deep); clip-path: inset(0 0 100% 0); }
.pt--curtain.cover  { visibility: visible; animation: ptCurtainCover var(--dur-3) var(--ease-emph) forwards; }
.pt--curtain.reveal { visibility: visible; clip-path: inset(0 0 0 0); animation: ptCurtainReveal var(--dur-3) var(--ease-emph) forwards; }
.pt--curtain.cover  .pt__mark { animation: ptMarkIn  var(--dur-3) var(--ease) forwards; }
.pt--curtain.reveal .pt__mark { opacity: 1; transform: scale(1); animation: ptMarkOut var(--dur-3) var(--ease) forwards; }
@keyframes ptCurtainCover  { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ptCurtainReveal { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
@keyframes ptMarkIn  { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes ptMarkOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.05); } }

/* ---- Cover / slide ---- */
.pt--cover { background: var(--ink-2); transform: translateY(100%); }
.pt--cover.cover  { visibility: visible; animation: ptCoverIn  var(--dur-3) var(--ease-emph) forwards; }
.pt--cover.reveal { visibility: visible; transform: translateY(0); animation: ptCoverOut var(--dur-3) var(--ease-emph) forwards; }
@keyframes ptCoverIn  { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ptCoverOut { from { transform: translateY(0); } to { transform: translateY(-100%); } }

/* ---- Fade / dissolve ---- */
.pt--fade { background: var(--ink); opacity: 0; }
.pt--fade.cover  { visibility: visible; animation: ptFadeIn  var(--dur-2) var(--ease) forwards; }
.pt--fade.reveal { visibility: visible; opacity: 1; animation: ptFadeOut var(--dur-2) var(--ease) forwards; }
@keyframes ptFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ptFadeOut { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pt { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; scroll-snap-type: none; }
}

/* ---- Section snap targets ---- */
@media (min-width: 861px) {
  .hero, .work, .about, .contact { scroll-snap-align: start; }
  /* The Work track is multi-viewport; snap only its entry, not the carousel. */
  .work { scroll-snap-align: start; }
}

/* ============================================================
   FOOTER baseline shared
   ============================================================ */
.foot-base {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 22px; margin-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--t-meta);
  letter-spacing: var(--tr-caps-sm); color: var(--fg-2);
}
@media (max-width: 560px) { .foot-base { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* ============================================================
   HERO — mobile & tablet tuning
   The wordmark is locked to 48vw for desktop composition; on narrower
   screens that reads far too small, so scale it up and lift it, and give
   the caption a touch more breathing room.
   ============================================================ */
@media (max-width: 860px) {
  .hero__wordmark { width: min(66vw, 460px); top: 50%; transform: translateX(-50%) translateY(-50%); }
  .hero__glasses { width: min(168%, 1100px); max-width: none; flex: 0 0 auto; }
}
@media (max-width: 560px) {
  .hero__wordmark { width: min(78vw, 380px); top: 50%; transform: translateX(-50%) translateY(-50%); }
  .hero__glasses { width: min(200%, 960px); max-width: none; flex: 0 0 auto; }
  .hero__caption { bottom: clamp(28px, 5vh, 48px); }
}