/*
  JustRec brand tokens.
  Single source for the marketing site (via Tailwind, see src/styles/global.css)
  and for the client video page served by the Worker (/v/*), which links /brand.css.
  Palette: azure, ink (near black), white. Gradients are layered radial meshes with grain, never plain linear.
*/

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url("/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette */
  --jr-azure-50: #eef7ff;
  --jr-azure-100: #d9eeff;
  --jr-azure-200: #b5deff;
  --jr-azure-300: #86c9ff;
  --jr-azure-400: #4fb0ff;
  --jr-azure-500: #2a97f5;
  --jr-azure-600: #1479d6;
  --jr-azure-700: #1260ab;
  --jr-azure-800: #154f87;
  --jr-azure-900: #173f69;
  --jr-azure-950: #0f2744;

  --jr-ink-50: #f6f8fa;
  --jr-ink-100: #eceff3;
  --jr-ink-200: #d9dee5;
  --jr-ink-300: #b7bfca;
  --jr-ink-400: #8994a3;
  --jr-ink-500: #5a6778;
  --jr-ink-600: #2e3b4c;
  --jr-ink-700: #1c2836;
  --jr-ink-800: #111a26;
  --jr-ink-900: #0a1019;
  --jr-ink-950: #05080d;

  --jr-white: #ffffff;

  /* Type */
  --jr-font-sans: "Bricolage Grotesque", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --jr-font-display: var(--jr-font-sans);
  --jr-display-stretch: 75%;
  --jr-display-weight: 800;
  /* Optical size for headlines: 12 = the calmer forms chosen on 5/11/2026 (font default 96 has extreme ink traps) */
  --jr-display-opsz: 12;

  /* Shape */
  --jr-radius-sm: 6px;
  --jr-radius-md: 10px;
  --jr-radius-lg: 16px;
  --jr-radius-xl: 24px;
  --jr-radius-pill: 999px;

  --jr-shadow-sm: 0 1px 2px rgb(5 8 13 / 0.06), 0 1px 1px rgb(5 8 13 / 0.04);
  --jr-shadow-md: 0 6px 16px -4px rgb(5 8 13 / 0.12), 0 2px 4px rgb(5 8 13 / 0.06);
  --jr-shadow-lg: 0 24px 48px -12px rgb(5 8 13 / 0.28), 0 4px 12px rgb(5 8 13 / 0.08);

  /* Glow hues: only for gradients, never for text or UI */
  --jr-glow-cyan: #3cc8ff;
  --jr-glow-royal: #2f6bff;
  --jr-glow-deep: #0b2a5b;

  /* Static gradients (cards, video page). Large areas use .jr-mesh instead. Always paired with .jr-grain */
  --jr-gradient-night:
    radial-gradient(38% 52% at 12% 0%, rgb(42 151 245 / 0.5), transparent 70%),
    radial-gradient(30% 40% at 88% 4%, rgb(60 200 255 / 0.26), transparent 72%),
    radial-gradient(46% 50% at 62% 108%, rgb(47 107 255 / 0.42), transparent 70%),
    radial-gradient(22% 26% at 46% 38%, rgb(181 222 255 / 0.08), transparent 70%),
    radial-gradient(40% 45% at 72% 34%, rgb(11 42 91 / 0.55), transparent 72%),
    var(--jr-ink-950);
  --jr-gradient-sky:
    radial-gradient(48% 60% at 8% 0%, rgb(255 255 255 / 0.55), transparent 65%),
    radial-gradient(40% 55% at 30% 20%, var(--jr-azure-200), transparent 70%),
    radial-gradient(45% 60% at 100% 100%, var(--jr-glow-royal), transparent 70%),
    radial-gradient(35% 45% at 78% 35%, var(--jr-glow-cyan), transparent 72%),
    var(--jr-azure-400);
  --jr-gradient-mist:
    radial-gradient(40% 55% at 88% 10%, rgb(60 200 255 / 0.2), transparent 70%),
    radial-gradient(42% 50% at 4% 96%, rgb(181 222 255 / 0.6), transparent 70%),
    radial-gradient(30% 35% at 60% 60%, rgb(47 107 255 / 0.06), transparent 70%),
    var(--jr-white);
  --jr-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --jr-grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.62'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.62'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.62'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Semantic tokens. Light set: root and every light surface, so a light card inside a dark section resets correctly */
:root,
.jr-surface-white,
.jr-surface-paper,
.jr-surface-mist {
  color-scheme: light;
  --jr-bg: var(--jr-white);
  --jr-fg: var(--jr-ink-950);
  --jr-muted: var(--jr-ink-500);
  --jr-line: var(--jr-ink-200);
  --jr-card: var(--jr-white);
  --jr-subtle: var(--jr-ink-50);
  --jr-accent: var(--jr-azure-400);
  --jr-accent-fg: var(--jr-ink-950);
  --jr-link: var(--jr-azure-700);
  --jr-focus: var(--jr-azure-500);
  --jr-accent-soft: var(--jr-azure-100);
  --jr-accent-soft-fg: var(--jr-azure-700);
  --jr-inverse: var(--jr-ink-950);
  --jr-inverse-fg: var(--jr-white);
}

/* Surfaces: set the semantic tokens for a whole section */
.jr-surface-white,
.jr-surface-paper,
.jr-surface-ink,
.jr-surface-night,
.jr-surface-sky,
.jr-surface-mist {
  background: var(--jr-bg);
  color: var(--jr-fg);
}

.jr-surface-paper {
  --jr-bg: var(--jr-ink-50);
  --jr-card: var(--jr-white);
  --jr-subtle: var(--jr-ink-100);
}

.jr-surface-mist {
  background: var(--jr-gradient-mist);
}

.jr-surface-ink,
.jr-surface-night,
.jr-surface-sky {
  color-scheme: dark;
  --jr-bg: var(--jr-ink-950);
  --jr-fg: var(--jr-white);
  --jr-muted: var(--jr-ink-300);
  --jr-line: rgb(255 255 255 / 0.12);
  --jr-card: var(--jr-ink-900);
  --jr-subtle: var(--jr-ink-800);
  --jr-accent: var(--jr-azure-400);
  --jr-accent-fg: var(--jr-ink-950);
  --jr-link: var(--jr-azure-300);
  --jr-focus: var(--jr-azure-300);
  --jr-accent-soft: rgb(79 176 255 / 0.16);
  --jr-accent-soft-fg: var(--jr-azure-300);
  --jr-inverse: var(--jr-white);
  --jr-inverse-fg: var(--jr-ink-950);
}

.jr-surface-night {
  background: var(--jr-gradient-night);
}

.jr-surface-sky {
  --jr-fg: var(--jr-ink-950);
  --jr-muted: var(--jr-ink-700);
  --jr-line: rgb(5 8 13 / 0.14);
  --jr-card: var(--jr-white);
  --jr-accent: var(--jr-ink-950);
  --jr-accent-fg: var(--jr-white);
  --jr-link: var(--jr-ink-950);
  --jr-focus: var(--jr-ink-950);
  --jr-accent-soft: rgb(255 255 255 / 0.6);
  --jr-accent-soft-fg: var(--jr-ink-950);
  --jr-inverse: var(--jr-ink-950);
  --jr-inverse-fg: var(--jr-white);
  color-scheme: light;
  background: var(--jr-gradient-sky);
}

/* Opt-in automatic dark mode (client video page) */
@media (prefers-color-scheme: dark) {
  .jr-auto {
    color-scheme: dark;
    --jr-bg: var(--jr-ink-950);
    --jr-fg: var(--jr-white);
    --jr-muted: var(--jr-ink-300);
    --jr-line: rgb(255 255 255 / 0.12);
    --jr-card: var(--jr-ink-900);
    --jr-subtle: var(--jr-ink-800);
    --jr-link: var(--jr-azure-300);
    --jr-focus: var(--jr-azure-300);
  }
}

/* Grain: sits between the background (and .jr-mesh) and the content */
.jr-grain {
  position: relative;
  isolation: isolate;
}

.jr-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--jr-grain);
  background-size: 160px;
  mix-blend-mode: overlay;
  opacity: 0.9;
  pointer-events: none;
}

/* On dark surfaces overlay barely shows: add light specks instead */
.jr-surface-night.jr-grain::before,
.jr-surface-ink.jr-grain::before {
  background-image: var(--jr-grain-dark);
  background-size: 320px;
  mix-blend-mode: screen;
  opacity: 0.26;
}

/* Mesh: soft drifting light blobs. Markup: <div class="jr-mesh jr-mesh--night"><span></span>×4</div> inside a .jr-grain element */
.jr-mesh {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.jr-mesh > span {
  position: absolute;
  display: block;
  border-radius: 43% 57% 61% 39% / 44% 41% 59% 56%;
  filter: blur(var(--jr-mesh-blur, 90px));
  will-change: transform;
  animation: jr-drift-a 26s ease-in-out infinite alternate;
}

.jr-mesh > span:nth-child(2) { animation-name: jr-drift-b; animation-duration: 31s; border-radius: 61% 39% 45% 55% / 52% 63% 37% 48%; }
.jr-mesh > span:nth-child(3) { animation-name: jr-drift-c; animation-duration: 37s; border-radius: 38% 62% 54% 46% / 61% 38% 62% 39%; }
.jr-mesh > span:nth-child(4) { animation-name: jr-drift-b; animation-duration: 22s; animation-direction: alternate-reverse; }

.jr-mesh--night > span { mix-blend-mode: screen; }
.jr-mesh--night > span:nth-child(1) { left: -12%; top: -38%; width: 62%; height: 78%; background: var(--jr-azure-500); opacity: 0.55; }
.jr-mesh--night > span:nth-child(2) { right: -16%; top: -26%; width: 44%; height: 62%; background: var(--jr-glow-cyan); opacity: 0.26; }
.jr-mesh--night > span:nth-child(3) { left: 22%; bottom: -62%; width: 74%; height: 86%; background: var(--jr-glow-royal); opacity: 0.38; }
.jr-mesh--night > span:nth-child(4) { left: 56%; top: 8%; width: 18%; height: 26%; background: var(--jr-azure-200); opacity: 0.12; --jr-mesh-blur: 70px; }

.jr-mesh--sky > span:nth-child(1) { left: -14%; top: -30%; width: 58%; height: 80%; background: var(--jr-white); opacity: 0.6; }
.jr-mesh--sky > span:nth-child(2) { right: -18%; bottom: -40%; width: 60%; height: 90%; background: var(--jr-glow-royal); opacity: 0.75; }
.jr-mesh--sky > span:nth-child(3) { left: 48%; top: -10%; width: 40%; height: 60%; background: var(--jr-glow-cyan); opacity: 0.7; }
.jr-mesh--sky > span:nth-child(4) { left: 10%; bottom: -30%; width: 36%; height: 50%; background: var(--jr-azure-200); opacity: 0.8; --jr-mesh-blur: 70px; }

.jr-mesh--deep > span { mix-blend-mode: screen; }
.jr-mesh--deep > span:nth-child(1) { left: 8%; bottom: -48%; width: 84%; height: 92%; background: var(--jr-glow-royal); opacity: 0.5; --jr-mesh-blur: 110px; }
.jr-mesh--deep > span:nth-child(2) { left: -20%; top: -12%; width: 46%; height: 60%; background: var(--jr-azure-500); opacity: 0.32; }
.jr-mesh--deep > span:nth-child(3) { right: -14%; top: 4%; width: 40%; height: 56%; background: var(--jr-glow-cyan); opacity: 0.2; }
.jr-mesh--deep > span:nth-child(4) { left: 38%; top: 30%; width: 26%; height: 30%; background: var(--jr-azure-200); opacity: 0.1; --jr-mesh-blur: 80px; }

@keyframes jr-drift-a {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to { transform: translate3d(7%, 9%, 0) rotate(28deg) scale(1.12); }
}

@keyframes jr-drift-b {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.06); }
  to { transform: translate3d(-9%, 7%, 0) rotate(-32deg) scale(0.92); }
}

@keyframes jr-drift-c {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to { transform: translate3d(6%, -11%, 0) rotate(40deg) scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .jr-mesh > span { animation: none; }
}