/* framer-look · system.css — tokens, themes, type, motion, components.
   Learned from Framer's own channel (Learning/Framer.md). Two faces: dark (SaaS) and light (studio).
   Rule: JS writes numbers (--p, --i, --mx, --my, --rx, --ry); CSS derives everything. */

/* ---------- tokens ---------- */
:root {
  /* the dark face */
  --ground: #050506;            /* near-black, not grey */
  --ground-2: #0b0b0e;          /* section alternate */
  --surface: #101014;           /* cards: one step up */
  --surface-2: #16161c;
  --line: rgb(255 255 255 / .08);
  --line-strong: rgb(255 255 255 / .16);
  --ink: #f5f5f7;
  --ink-2: rgb(245 245 247 / .64);   /* the muted sub-line */
  --ink-3: rgb(245 245 247 / .42);
  --accent: #8b5cf6;            /* violet — used as light, not fill */
  --accent-2: #38bdf8;          /* the second hue the glow drifts toward */
  --accent-ink: #fff;
  --glow: rgb(139 92 246 / .55);
  --shadow-1: 0 1px 0 rgb(255 255 255 / .06) inset, 0 1px 2px rgb(0 0 0 / .5);
  --shadow-2: 0 1px 0 rgb(255 255 255 / .08) inset, 0 12px 32px -8px rgb(0 0 0 / .7), 0 40px 80px -24px rgb(0 0 0 / .8);
  --grid-ink: rgb(255 255 255 / .05);
  --scrim: rgb(0 0 0 / .6);

  /* shape */
  --r-card: 20px; --r-card-lg: 28px; --r-ctl: 12px; --r-pill: 999px;

  /* type — Inter Tight for display (tight, heavy), Inter for text */
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-0: .8125rem; --fs-1: .9375rem; --fs-2: 1.0625rem; --fs-3: 1.25rem; --fs-4: 1.5rem;
  --fs-5: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --fs-6: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  --fs-7: clamp(3rem, 1.5rem + 6.5vw, 6.5rem);       /* the hero */

  /* space — 8px scale */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 62ch;
  --wrap: 1180px;

  /* motion — Framer's numbers, translated.
     Spring 500/60/1  = Framer's default effect spring (probably; New Effects 04:30)   → settles ~560ms
     Spring 400/30/1  = the presenter's "smoother" spring (New Effects 04:54)          → ~400ms, 2% overshoot
     Spring 400/30/1.5 = the hover spring seen in the panel (New Effects 01:35)         → ~460ms, 8% overshoot */
  --spring-default: linear(0, 0.119, 0.26, 0.413, 0.519, 0.622, 0.704, 0.758, 0.81, 0.851, 0.878, 0.904, 0.922, 0.939, 0.952, 0.961, 0.969, 0.976, 0.98, 0.985, 0.987, 0.99, 0.992, 0.994, 1);
  --spring-soft:    linear(0, 0.061, 0.182, 0.327, 0.474, 0.608, 0.722, 0.814, 0.885, 0.937, 0.974, 0.997, 1.011, 1.019, 1.021, 1.021, 1.019, 1.016, 1.012, 1.009, 1.007, 1.005, 1.003, 1.002, 1);
  --spring-hover:   linear(0, 0.062, 0.163, 0.322, 0.457, 0.619, 0.761, 0.855, 0.947, 1.012, 1.046, 1.071, 1.079, 1.079, 1.072, 1.062, 1.049, 1.036, 1.026, 1.015, 1.008, 1.002, 0.997, 0.995, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-default: 560ms; --t-soft: 400ms; --t-hover: 460ms; --t-fast: 160ms;

  /* appear (Framer's "Scroll Animations" / Appear presets): fade + 20–40px travel, per-item stagger */
  --appear-dist: 28px; --appear-dur: var(--t-default); --appear-ease: var(--spring-default); --stagger: 60ms;

  color-scheme: dark;
}

/* the light face — same anatomy, different clothes */
:root[data-theme="light"] {
  --ground: #f4f1ea;            /* eggshell, not white */
  --ground-2: #ece8df;
  --surface: #ffffff;
  --surface-2: #f8f6f1;
  --line: rgb(20 18 12 / .08);
  --line-strong: rgb(20 18 12 / .16);
  --ink: #141210;
  --ink-2: rgb(20 18 16 / .62);
  --ink-3: rgb(20 18 16 / .42);
  --accent: #5b6b4f;            /* sage — the studio secondary */
  --accent-2: #b9a77a;          /* sand */
  --accent-ink: #f4f1ea;
  --glow: rgb(91 107 79 / .28);
  --shadow-1: 0 1px 2px rgb(20 18 12 / .08), 0 0 0 1px rgb(20 18 12 / .04);
  --shadow-2: 0 1px 2px rgb(20 18 12 / .06), 0 12px 32px -8px rgb(20 18 12 / .16), 0 40px 80px -24px rgb(20 18 12 / .18);
  --grid-ink: rgb(20 18 12 / .06);
  --scrim: rgb(20 18 12 / .4);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 var(--fs-2)/1.55 var(--font-text); letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-7); font-weight: 650; letter-spacing: -0.045em; line-height: .96; }
h2 { font-size: var(--fs-6); }
h3 { font-size: var(--fs-4); letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }
.lede { font-size: var(--fs-3); color: var(--ink-2); line-height: 1.5; max-width: 40ch; text-wrap: pretty; }
.eyebrow { font: 500 var(--fs-0)/1 var(--font-text); letter-spacing: .02em; color: var(--ink-2); display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: color-mix(in oklab, var(--surface) 70%, transparent); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

/* the mono spec label — construction left visible (design-taste §11a-6) */
.spec { font: 500 .6875rem/1.3 var(--font-mono); letter-spacing: .02em; color: var(--ink-3); display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.spec b { color: var(--ink-2); font-weight: 600; }
.spec .n { color: var(--accent); }

/* ---------- controls ---------- */
.btn {
  --pad: .85rem 1.35rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: var(--pad); border-radius: var(--r-pill); font-weight: 500; font-size: var(--fs-1); line-height: 1; white-space: nowrap;
  min-height: 48px; position: relative; isolation: isolate;
  transition: transform var(--t-hover) var(--spring-hover), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.96); transition-duration: 100ms; }       /* Press: Framer default scale 0.9 on a 148px tile; 0.96 on a button */
.btn-primary { background: var(--ink); color: var(--ground); }
.btn-primary:hover { transform: translateY(-1px); }
/* the gradient-rim pill: the Framer hero button */
.btn-glow { background: var(--surface); color: var(--ink); border: 1px solid transparent; background-clip: padding-box; }
.btn-glow::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--angle, 180deg), var(--accent), var(--accent-2), var(--accent)); }
.btn-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--surface); }
.btn-glow { box-shadow: 0 0 0 0 var(--glow); }
.btn-glow:hover { box-shadow: 0 0 32px -6px var(--glow); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-3); background: color-mix(in oklab, var(--ink) 6%, transparent); }
.btn-lg { --pad: 1.05rem 1.6rem; font-size: var(--fs-2); min-height: 56px; }   /* primary CTA ≥56px (design-taste §13b) */
.btn-icon { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); }
.btn-icon:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); }

/* ---------- surfaces ---------- */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-1); overflow: clip;
  transition: transform var(--t-hover) var(--spring-hover), border-color var(--t-fast), box-shadow var(--t-hover);
}
/* Hover: lift + brighten the border (Framer hover effect on a card) */
@media (hover: hover) {
  .card.is-hover:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
}
/* pointer spotlight: the light follows --mx/--my written by data-tilt */
.card.is-spot::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at calc(var(--mx, .5) * 100%) calc(var(--my, .5) * 100%), color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%);
  transition: opacity var(--t-soft); }
.card.is-spot:hover::before { opacity: 1; }
.glass { background: color-mix(in oklab, var(--ground) 62%, transparent); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid var(--line); }

/* the faint grid that sits behind Framer heroes */
.grid-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(var(--grid-ink) 1px, transparent 1px), linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 100%); }
.dots-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(var(--grid-ink) 1px, transparent 1.5px); background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000, transparent 90%); -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000, transparent 90%); }

/* the glow: accent used as light. @property lets the hue drift — Framer's animated gradient "shader" in CSS */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 180deg; }
@property --hue { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.bloom { position: absolute; left: 50%; top: 0; translate: -50% -55%; width: min(120vw, 1100px); aspect-ratio: 1.6; pointer-events: none; z-index: 0; filter: blur(60px); opacity: .9;
  background: radial-gradient(ellipse at 50% 60%, color-mix(in oklab, var(--accent) 70%, transparent) 0%, color-mix(in oklab, var(--accent-2) 40%, transparent) 35%, transparent 70%);
  animation: hue 14s linear infinite; }
@keyframes hue { to { --hue: 360deg; } }
.bloom { filter: blur(60px) hue-rotate(calc(var(--hue) * .15)); }

/* ---------- appear (Scroll Animations) ---------- */
[data-appear] { --d: calc(var(--i, 0) * var(--stagger)); }
[data-appear]:not(.is-in) { opacity: 0; transform: translateY(var(--appear-dist)); }
[data-appear].is-in { opacity: 1; transform: none; transition: opacity var(--appear-dur) var(--appear-ease) var(--d), transform var(--appear-dur) var(--appear-ease) var(--d); }
[data-appear="scale"]:not(.is-in) { transform: scale(.92) translateY(12px); }
[data-appear="left"]:not(.is-in) { transform: translateX(-40px); }
[data-appear="right"]:not(.is-in) { transform: translateX(40px); }
[data-appear="blur"]:not(.is-in) { filter: blur(6px); }
[data-appear="blur"].is-in { filter: blur(0); transition: opacity var(--appear-dur) var(--appear-ease) var(--d), transform var(--appear-dur) var(--appear-ease) var(--d), filter var(--appear-dur) var(--appear-ease) var(--d); }
/* stagger groups: children carry --i */
[data-stagger] > [data-appear] { --d: calc(var(--i, 0) * var(--stagger)); }
/* text effects: words / chars */
[data-split] .w { display: inline-block; white-space: pre; }
[data-split] .c { display: inline-block; }
[data-split].is-in .w, [data-split].is-in .c { animation: word-in var(--appear-dur) var(--spring-soft) both; animation-delay: calc(var(--i) * var(--word-stagger, 40ms)); }
[data-split]:not(.is-in) .w, [data-split]:not(.is-in) .c { opacity: 0; }
@keyframes word-in { from { opacity: 0; transform: translateY(.6em) rotate(2deg); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- marquee (Slideshow → Ticker) ---------- */
[data-marquee] { display: flex; gap: var(--mq-gap, 3rem); overflow: hidden; white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
[data-marquee] > * { display: flex; gap: var(--mq-gap, 3rem); flex: none; align-items: center; animation: marquee var(--mq-dur, 40s) linear infinite; }
[data-marquee]:hover > * { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% - var(--mq-gap, 3rem))); } }

/* ---------- slideshow (Slideshow 2.0) ---------- */
[data-slideshow] { position: relative; }
[data-slideshow] .slides { display: flex; gap: var(--slide-gap, 1.25rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); padding-bottom: .5rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
[data-slideshow] .slides::-webkit-scrollbar { display: none; }
[data-slideshow] .slides.is-drag { cursor: grabbing; scroll-behavior: auto; }
[data-slideshow] .slides > * { flex: none; scroll-snap-align: start; width: min(78vw, 420px); }
[data-slideshow] .dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1rem; }
[data-slideshow] .dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: transform var(--t-fast), background-color var(--t-fast); }
[data-slideshow] .dots button[aria-current="true"] { background: var(--ink); transform: scale(1.25); }
[data-slideshow] .arrows { display: flex; gap: .5rem; }

/* ---------- overlays (<dialog>) ---------- */
dialog { border: 0; padding: 0; background: transparent; color: inherit; max-width: none; max-height: none; }
dialog::backdrop { background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog.modal { margin: auto; width: min(92vw, 520px); }
dialog.modal .card { padding: var(--s-6); border-radius: var(--r-card-lg); box-shadow: var(--shadow-2); }
dialog.sheet { margin: 0 0 0 auto; height: 100dvh; width: min(92vw, 380px); }
dialog.sheet .card { height: 100%; border-radius: 0; border-block: 0; border-right: 0; padding: var(--s-6); display: flex; flex-direction: column; }
/* enter: Framer "Scale In" / "Slide In" with the default spring; exit: ease-out. @starting-style animates from display:none. */
dialog[open] { transition: opacity var(--t-default) var(--ease-out), transform var(--t-default) var(--spring-default), overlay var(--t-default) allow-discrete, display var(--t-default) allow-discrete; }
dialog[open]::backdrop { transition: opacity var(--t-default) ease-in, overlay var(--t-default) allow-discrete, display var(--t-default) allow-discrete; }
@starting-style { dialog[open] { opacity: 0; transform: scale(.92); } dialog.sheet[open] { transform: translateX(40px); } dialog[open]::backdrop { opacity: 0; } }
dialog:not([open]) { opacity: 0; transform: scale(.96); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-5); }

/* ---------- custom cursor ---------- */
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor label, html.has-cursor input, html.has-cursor textarea, html.has-cursor select, html.has-cursor summary { cursor: none; }
.cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity var(--t-fast); will-change: transform; }
.cursor.is-on { opacity: 1; }
.cursor__dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: var(--ink); mix-blend-mode: exclusion;
  transition: width var(--t-hover) var(--spring-hover), height var(--t-hover) var(--spring-hover), opacity var(--t-fast), background-color var(--t-fast); }
.cursor[data-state="link"] .cursor__dot { width: 40px; height: 40px; opacity: .5; }
.cursor[data-state="text"] .cursor__dot { width: 3px; height: 24px; border-radius: 2px; }
.cursor[data-state="view"] .cursor__dot, .cursor[data-state="drag"] .cursor__dot { width: 72px; height: 72px; mix-blend-mode: normal; background: var(--ink); }
.cursor.is-down .cursor__dot { transform: scale(.85); }
.cursor__label { position: absolute; left: 0; top: 0; translate: -50% -50%; font: 500 .75rem/1 var(--font-text); color: var(--ground); letter-spacing: .01em; opacity: 0; transition: opacity var(--t-fast); white-space: nowrap; }
.cursor[data-state="view"] .cursor__label, .cursor[data-state="drag"] .cursor__label { opacity: 1; }
html.has-modal .cursor { mix-blend-mode: normal; }

/* ---------- form (Forms) ---------- */
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--fs-0); color: var(--ink-2); font-weight: 500; }
.field input, .field textarea, .field select { width: 100%; font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: .85rem 1rem; min-height: 48px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); }
.field input:user-invalid, .field textarea:user-invalid { border-color: #e5484d; }
form[data-form] .done, form[data-form] .err { display: none; }
form[data-form].is-done > :not(.done) { display: none; }
form[data-form].is-done .done { display: grid; gap: .5rem; place-items: center; text-align: center; padding: var(--s-6) 0; }
form[data-form].is-error .err { display: block; color: #e5484d; font-size: var(--fs-0); }
.check { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); animation: pop var(--t-hover) var(--spring-hover) both; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* ---------- 3D ---------- */
.persp { perspective: 1200px; }                 /* Framer's default Perspective 1200 (Scroll Transforms 02:08) */
.tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform var(--t-hover) var(--spring-hover); will-change: transform; }

/* ---------- page transitions (Page Effects) — cross-document view transitions, zero JS ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 220ms var(--ease-out) both vt-out; }
::view-transition-new(root) { animation: 320ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
.brand { view-transition-name: brand; }

/* ---------- reduced motion: rest state, instantly ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-appear]:not(.is-in) { opacity: 1; transform: none; filter: none; }
  [data-split]:not(.is-in) .w, [data-split]:not(.is-in) .c { opacity: 1; }
  [data-marquee] > * { animation: none; }
  .bloom { animation: none; }
  @view-transition { navigation: none; }
}