/* Visual Valley — brand tokens & base components (vv-tokens.css)
   Use together with vv-living.js. Fonts: Geist + Geist Mono (Google Fonts). */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* colour */
  --vv-grey: #EBEBF0;          /* brand grey: every text area */
  --vv-ink: #141418;           /* text on grey */
  --vv-white: #F4F4F4;         /* text on dark gradients / images */
  --vv-night: #050505;         /* footer / closing */
  --vv-muted: #6B6B75;         /* small labels on grey */

  /* gradient palettes (max 5 colours, one saturation range) — mirrored in vv-living.js */
  --vv-horizon-blue: #1D224F, #305CC8, #72C4C1, #D89887, #D35B4C;
  --vv-night-pal: #0E0928, #7A45E0, #DFB3F7, #F2BE8A, #3080CB;
  --vv-ember: #020000, #4E0E43, #E3241B, #F0503F, #EECEA5;

  /* type */
  --vv-font: "Geist", system-ui, sans-serif;
  --vv-mono: "Geist Mono", ui-monospace, monospace;
  --vv-display: clamp(44px, 7.6vw, 110px);   /* 100px at 1080 wide in the tool, Light 300 */
  --vv-title: clamp(34px, 4.6vw, 72px);
  --vv-body: clamp(20px, 2.2vw, 32px);
  --vv-label: 13px;

  /* layout: text always 75px from the edge at 1080px → ~7vw */
  --vv-margin: clamp(24px, 6.95vw, 120px);
  --vv-space-above: clamp(32px, 6.95vw, 120px);
}

html { background: var(--vv-grey); color: var(--vv-ink); font-family: var(--vv-font); font-weight: 300; -webkit-font-smoothing: antialiased; }
body { margin: 0; }

/* typography */
.vv-display { font-size: var(--vv-display); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; margin: 0; }
.vv-title { font-size: var(--vv-title); font-weight: 300; line-height: 1.12; letter-spacing: -.015em; margin: 0; }
.vv-body { font-size: var(--vv-body); font-weight: 300; line-height: 1.25; margin: 0; max-width: 18em; }
.vv-display b, .vv-title b, .vv-body b { font-weight: 600; }   /* accent word: Light → SemiBold */
.vv-label { font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; }

/* living frame: a section with the animated gradient behind it */
.vv-frame { position: relative; overflow: hidden; min-height: 100svh; background: var(--vv-grey); }
.vv-frame > :not(.vv-canvas) { position: relative; z-index: 1; }
.vv-frame--half { min-height: 70svh; }

/* text on top of the gradient */
.vv-overlay { color: var(--vv-white); padding: var(--vv-space-above) var(--vv-margin); }
.vv-overlay--centre { padding-left: 50%; }            /* "start: centre" */
.vv-overlay--centre-50 { padding-left: calc(50% - 50px); } /* "start: centre −50px" */

/* text area: solid panel that slides in from a side (position/size set by vv-living.js) */
.vv-frame > .vv-area.vv-area { position: absolute; z-index: 2; overflow: hidden; background: var(--vv-grey); color: var(--vv-ink); visibility: hidden; }
.vv-frame > .vv-area.vv-area--dark { background: #0B0B0E; color: var(--vv-white); }
.vv-area__content { position: absolute; box-sizing: border-box; padding: var(--vv-space-above) var(--vv-margin); }
/* content is anchored to the edge the area grows from, so it never moves */
.vv-area[data-side-now="top"] > .vv-area__content { top: 0; left: 0; }
.vv-area[data-side-now="bottom"] > .vv-area__content { bottom: 0; left: 0; }
.vv-area[data-side-now="left"] > .vv-area__content { left: 0; }
.vv-area[data-side-now="right"] > .vv-area__content { right: 0; }
.vv-area__content--centre { padding-left: 50%; }
.vv-area > .vv-area__content > img, .vv-area > .vv-area__content > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vv-area__content--media { padding: 0; }

/* soft edge where a photo meets the grey (like the tool's blurred image layers) */
.vv-soft-edge { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); }

/* links/buttons: no pills, no shadows */
.vv-link { color: inherit; text-decoration: none; font-weight: 400; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.vv-link::after { content: " →"; }

@media (prefers-reduced-motion: reduce) { .vv-frame > .vv-area { transition: none; } }