/* Website Leads — shared design tokens & primitives (midu-direction rebuild) */

:root {
  --bg: #050505;
  --panel: #101010;
  --panel-2: #161616;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.55);
  --muted-2: rgba(255, 255, 255, 0.35);
  --hair: rgba(255, 255, 255, 0.1);

  --light-bg: #e8e8e6;
  --light-card: #ffffff;
  --light-text: #0a0a0a;
  --light-muted: rgba(10, 10, 10, 0.55);

  --accent: #ff7d4e;
  --accent-hot: #e93c1a;
  --accent-deep: #7e1a10;

  --cream: #f4ead8;
  --fog: #e9e9e7;

  --r-card: 24px;   /* images, project cards */
  --r-card-lg: 32px; /* big section cards (midu 32) */
  --r-sec: 36px;

  /* midu measured: 40px gutters 810–1919, 160px ≥1920, 20px ≤809;
     card gap 20px desktop / 12px mobile */
  --gutter: 40px;
  --gap-card: 20px;
  --sec-pad: clamp(4rem, 6vw, 6rem);
  --sec-pad-compact: clamp(3rem, 4vw, 4rem);
  --font: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}

@media (min-width: 1920px) {
  :root { --gutter: 160px; }
}

@media (max-width: 809px) {
  :root { --gutter: 20px; --gap-card: 12px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }

/* measured on midu @1440: body copy 16px/400, tracking -0.03em, lh 1.3 */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.03em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.container {
  width: calc(100% - 2 * var(--gutter));
  max-width: 1600px;
  margin-inline: auto;
}

/* Shared section rhythm stays fluid across breakpoints. */
.sec { padding-block: var(--sec-pad); }

/* ————— type ————— */

/* midu giant headings, measured per breakpoint: 82px (810–1919),
   98px (≥1920), 42px (≤809) — fixed steps, not fluid */
.h-giant {
  font-size: 82px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  text-wrap: balance;
}
@media (min-width: 1920px) { .h-giant { font-size: 98px; } }
@media (max-width: 809px)  { .h-giant { font-size: 42px; } }

.h-giant .dim { color: var(--muted-2); }

/* midu card headings: 32px/500/-0.04em/100% */
.h-card {
  font-size: clamp(1.6rem, 2.23vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* midu label style: 18px Regular, -0.03em */
.eyebrow {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: -0.03em;
}

/* ————— pills, chips, buttons ————— */

/* midu's measured button: 48px tall, 20px radius, 0 18px padding,
   18px Switzer 500 label; hover = label scale-down spring + spark spin */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 13px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
  transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
.pill:hover { background: rgba(255, 255, 255, 0.14); }
.pill:active { transform: scale(0.97); }

.pill--light { background: #fff; color: #0a0a0a; }
.pill--light:hover { background: #fff; }

.pill--on-light { background: rgba(10, 10, 10, 0.07); color: var(--light-text); backdrop-filter: none; }
.pill--on-light:hover { background: rgba(10, 10, 10, 0.12); }

/* label wrapper injected around pill text by app.js — midu hover:
   label settles at scale .9; the ~1.8px blur is transient motion-blur
   during the move (peaks mid-spring, resolves to sharp); spark rotates
   90° and scales 1.2 */
.pill-roll {
  display: inline-block;
  transform-origin: 50% 50%;
  transition: transform 0.7s cubic-bezier(0.25, 0.9, 0.3, 1);
}
.pill:hover .pill-roll {
  transform: scale(0.9);
  animation: pill-blur-pulse 0.7s ease-out;
}
@keyframes pill-blur-pulse {
  0%   { filter: blur(0); }
  45%  { filter: blur(1.8px); }
  100% { filter: blur(0); }
}

.pill .spark { transition: transform 0.7s cubic-bezier(0.3, 1.2, 0.4, 1); }
.pill:hover .spark { transform: rotate(90deg) scale(1.2); }

@media (prefers-reduced-motion: reduce) {
  .pill-roll, .pill .spark { transition: none; }
  .pill:hover .pill-roll { transform: none; animation: none; }
  .pill:hover .spark { transform: none; }
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  border-radius: 10px; /* midu tags: 10px */
  background: rgba(20, 20, 20, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
}
.chip--on-light { background: rgba(255, 255, 255, 0.6); color: rgba(10, 10, 10, 0.75); }

.icon-spark {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background: currentColor;
  -webkit-clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
}

.spark {
  width: 0.85em;
  height: 0.85em;
  translate: 0 -0.05em;
  transform-origin: center;
}

.pill-arrow,
.stmt-cta-arrow,
.go-dot svg {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pill-arrow,
.stmt-cta-arrow {
  width: 0.9em;
  height: 0.9em;
}

/* circular arrow button used on light cards */
.go-dot {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.06);
  color: var(--light-text);
  transition: background 0.25s ease, transform 0.25s ease;
}
.go-dot svg { width: 18px; height: 18px; }
.go-dot:hover { background: var(--accent); color: #fff; transform: scale(1.06); }

/* ————— giant gradient wordmark ————— */

.giantword {
  position: relative;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.giantword span {
  display: block;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.78;
  text-align: center;
  font-size: clamp(4.75rem, 30.5vw, 29.5rem);
  transform: translateY(0.06em);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #0b0b0b 0%, #170907 28%, #52130a 46%, #b02410 62%, #e93c1a 74%, #ff7d4e 85%, #ffc7ae 97%);
  background-blend-mode: soft-light, normal;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.giantword--footer span {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #1f0704 0%, #6e180c 30%, #c22a10 55%, #ee5426 75%, #ff9668 100%);
}

/* ————— scroll motion primitives (driven by app.js) ————— */

/* midu's measured reveal: continuous per-word scrub set inline by
   app.js each frame — floor 0.25 opacity, quadratic blur to 8px */
.reveal-words .w {
  opacity: 0.25;
  filter: blur(8px);
}
.reveal-words .w.lit { opacity: 1; filter: none; }

/* ——— load appears (midu's module values; JS flips .on) ——— */
[data-appear] {
  opacity: 0.001;
  transition:
    opacity var(--ap-dur, 0.5s) var(--ap-ease, cubic-bezier(0.56, 0, 0.47, 1)) var(--ap-delay, 0s),
    transform var(--ap-dur, 0.5s) var(--ap-ease, cubic-bezier(0.56, 0, 0.47, 1)) var(--ap-delay, 0s);
}
[data-appear="y60"] { transform: translateY(60px); }
[data-appear="scale"] { transform: scale(0.95); }
[data-appear].on { opacity: 1; transform: none; }

/* ——— scroll-scrubbed entrances (inline styles from app.js) ——— */
[data-scrub] { opacity: 0.001; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  [data-appear], [data-scrub] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; }
  .reveal-words .w { opacity: 1 !important; filter: none !important; transition: none; }
}