/* Splat glass for the AVO landing options.
   Tokens, type and surfaces from docs/design/splat-glass-client/README.md. Surfaces draw their
   two layers (specks, core) as ::before / ::after so the markup stays one element per control;
   splat-glass.js injects the SVG filters once per page and sets data-side="left|right" from each
   element's centre, which picks the fade direction below. */

:root {
  color-scheme: dark;
  --ground: #0D1117;
  --glass: #5A5A5A;
  --hot: #6FD9D5;
  --on-hot: #0A2A2C;
  --plum: #B48CB4;
  --on-plum: #261A2A;
  --blue: #1FC9FF;
  --link: #7ADCFF;
  --text: #FFFFFF;
  --text-2: rgba(255, 255, 255, 0.66);
  --text-3: rgba(255, 255, 255, 0.42);
  --rule: rgba(255, 255, 255, 0.14);

  --f-display: Mulish, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: Inter, "Segoe UI", system-ui, sans-serif;
  --f-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --edge: 24px;
  --content: 1232px;
  --gap: 28px;
  --section: 128px;
  --display: 64px;
  --h1: 44px;
  --h2: 24px;
}

@media (max-width: 639px) {
  :root { --edge: 16px; --section: 80px; --display: 40px; --h1: 32px; --h2: 22px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- type ---------- */
.t-display, .t-h1, .t-h2, .t-h3, .t-label {
  margin: 0; font-family: var(--f-display); font-weight: 800; text-wrap: balance;
}
.t-display { font-size: var(--display); line-height: 1.02; letter-spacing: -0.025em; }
.t-h1 { font-size: var(--h1); line-height: 1.1; letter-spacing: -0.02em; }
.t-h2 { font-size: var(--h2); line-height: 1.2; letter-spacing: -0.015em; }
.t-h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }
.t-label { font-size: 15px; line-height: 1.3; }
.t-lead { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.t-body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.t-caption { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.t-mono {
  font-family: var(--f-mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.t-eyebrow {
  font-family: var(--f-mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--link);
}

.wordmark { font-family: var(--f-display); font-weight: 900; font-size: 15px; letter-spacing: 0.06em; color: var(--text); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { width: 40px; height: 40px; object-fit: contain; display: block; }

/* the "AVO by OVA.DESIGN" lockup */
.lockup { display: inline-flex; align-items: baseline; gap: 0.42em; white-space: nowrap; color: var(--text); }
.lockup .by { font-family: var(--f-body); font-weight: 400; font-size: 0.86em; letter-spacing: 0; color: var(--text-2); }
.lockup .maker { font-family: var(--f-display); font-weight: 900; letter-spacing: 0.06em; }

/* ---------- layout ---------- */
.wrap { width: min(var(--content), 100% - 2 * var(--edge)); margin-inline: auto; }
.section { padding-block: var(--section); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 1023px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- icons: 18px Lucide-style strokes ---------- */
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon.fill { fill: currentColor; stroke: none; }
.btn-32 .icon { width: 16px; height: 16px; }

/* ---------- splat glass surfaces ---------- */
.sg { position: relative; isolation: isolate; border-radius: 48px; corner-shape: superellipse(2); }
.sg::before, .sg::after {
  content: ""; position: absolute; inset: var(--sg-inset, 0); pointer-events: none;
  border-radius: inherit; corner-shape: superellipse(2); background: var(--sg-colour);
}
.sg::before { z-index: -2; filter: var(--sg-specks); }
.sg::after {
  z-index: -1; filter: var(--sg-core);
  -webkit-mask-image: linear-gradient(var(--sg-dir, to right), #000 var(--sg-solid, 20%), transparent var(--sg-clear, 100%));
  mask-image: linear-gradient(var(--sg-dir, to right), #000 var(--sg-solid, 20%), transparent var(--sg-clear, 100%));
}

/* Hot controls: solid at the end facing the screen centre, fading outward. */
.sg-hot { --sg-colour: var(--hot); --sg-specks: url(#sg-specks-hot6FD9D5045); --sg-core: url(#sg-core-hot6FD9D51); color: var(--on-hot); }
.sg-plum { --sg-colour: var(--plum); --sg-specks: url(#sg-specks-hotB48CB4045); --sg-core: url(#sg-core-hotB48CB41); color: var(--on-plum); }
.sg-hot[data-side="left"], .sg-plum[data-side="left"] { --sg-dir: to left; }
.sg-hot[data-side="right"], .sg-plum[data-side="right"] { --sg-dir: to right; }

/* Glass bodies and secondaries: solid at the outer end, fading toward the centre. */
.sg-sec, .sg-input { --sg-colour: var(--glass); --sg-specks: url(#sg-specks-hot5A5A5A03); --sg-core: url(#sg-core-hot5A5A5A06); color: rgba(255, 255, 255, 0.86); }
.sg-mid { --sg-colour: var(--glass); --sg-specks: url(#sg-specks-mid5A5A5A03); --sg-core: url(#sg-core-mid5A5A5A06); --sg-solid: 70%; --sg-clear: 115%; }
.sg-body { --sg-colour: var(--glass); --sg-specks: url(#sg-specks-body5A5A5A03); --sg-core: url(#sg-core-body5A5A5A06); --sg-solid: 70%; --sg-clear: 115%; border-radius: 32px; }
.sg-sec[data-side="left"], .sg-input[data-side="left"], .sg-mid[data-side="left"], .sg-body[data-side="left"] { --sg-dir: to right; }
.sg-sec[data-side="right"], .sg-input[data-side="right"], .sg-mid[data-side="right"], .sg-body[data-side="right"] { --sg-dir: to left; }

/* Backdrops (panels over the scene): no directional mask, reach past the box. */
.sg-backdrop { --sg-colour: var(--glass); --sg-specks: url(#sg-backdrop-specks); --sg-core: url(#sg-backdrop-core); --sg-inset: -20px; }
.sg-backdrop.short { --sg-core: url(#sg-backdrop-core-short); --sg-inset: -12px; }
.sg-backdrop::after { -webkit-mask-image: none; mask-image: none; }

/* Chips: 24 tall, 13 / 600 */
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; font: 600 13px/1 var(--f-body); white-space: nowrap; }
.sg-chip-blue { --sg-colour: var(--blue); --sg-specks: url(#sg-specks-chip1FC9FF045); --sg-core: url(#sg-core-chip1FC9FF1); color: #04222C; }
.sg-chip-hot { --sg-colour: var(--hot); --sg-specks: url(#sg-specks-chip6FD9D5045); --sg-core: url(#sg-core-chip6FD9D51); color: var(--on-hot); }
.sg-chip-grey { --sg-colour: var(--glass); --sg-specks: url(#sg-specks-chip5A5A5A03); --sg-core: url(#sg-core-chip5A5A5A06); color: rgba(255, 255, 255, 0.86); }
.sg-chip-blue[data-side="left"], .sg-chip-hot[data-side="left"] { --sg-dir: to left; }
.sg-chip-grey[data-side="left"] { --sg-dir: to right; }
.sg-chip-grey[data-side="right"] { --sg-dir: to left; }

/* Low power / reduced motion: keep the blurred core, drop the specks layer. */
@media (prefers-reduced-transparency: reduce) {
  .sg::before { display: none; }
}

/* ---------- buttons, three heights ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; background: none; cursor: pointer; white-space: nowrap; text-decoration: none;
  font-family: var(--f-display); font-weight: 700;
}
.btn:hover { text-decoration: none; }
.btn-48 { height: 48px; padding: 0 24px; font-size: 16px; }
.btn-40 { height: 40px; padding: 0 20px; font-size: 15px; }
.btn-32 { height: 32px; padding: 0 14px; font-size: 14px; }
.btn-icon.btn-40 { width: 40px; padding: 0; }
.btn-icon.btn-32 { width: 32px; padding: 0; }
.btn-ghost { color: rgba(255, 255, 255, 0.8); }
.btn-ghost:hover { color: #fff; }
.btn.sg-hot:hover::after, .btn.sg-plum:hover::after { --sg-solid: 45%; }
.btn.sg-sec:hover { color: #fff; }
.btn.sg-sec:hover::after { --sg-solid: 45%; }
@media (max-width: 639px) {
  .btn-block-phone { width: 100%; }
}

/* ---------- inputs ---------- */
.field { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; gap: 10px; }
.field input {
  position: relative; flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none;
  font: 400 14px/1 var(--f-body); color: #fff;
}
.field input::placeholder { color: rgba(255, 255, 255, 0.42); }
.field:focus-within { outline: 2px solid var(--link); outline-offset: 3px; }

/* ---------- photos take the dissolve edge (image-edge component) ---------- */
.edge-img { position: relative; display: block; border-radius: 32px; corner-shape: superellipse(2); }
.edge-img > img, .edge-img > canvas {
  position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px);
  object-fit: cover; display: block; filter: url(#sg-img-body); max-width: none;
}
.edge-img.chip-edge { border-radius: 20px; }
.edge-img.chip-edge > img, .edge-img.chip-edge > canvas { inset: -15px; width: calc(100% + 30px); height: calc(100% + 30px); filter: url(#sg-img-chip); }

/* ---------- aura type: the Display role only ----------
   Whole white letters, never moved, on a thin white rim; outside the rim a grainy near-white
   band, a tight glow whose outline is pushed sideways in places, and uneven side flares carry
   a spectrum across the title, all with film grain (filters from splat-glass.js). Phone sizes
   take the h1 scale. Six filters a scale: the whole aura for a still title; for a live one
   (below) four copies of the colour alone, each drifted by its own field, and the still top
   (letter, rim, near band). */
.t-aura { --aura-a: url(#sg-aura-display); --aura-f1: url(#sg-aura-display-f1); --aura-f2: url(#sg-aura-display-f2); --aura-f3: url(#sg-aura-display-f3); --aura-f4: url(#sg-aura-display-f4); --aura-top: url(#sg-aura-display-top); filter: var(--aura-a); }
.t-aura-giant { --aura-a: url(#sg-aura-giant); --aura-f1: url(#sg-aura-giant-f1); --aura-f2: url(#sg-aura-giant-f2); --aura-f3: url(#sg-aura-giant-f3); --aura-f4: url(#sg-aura-giant-f4); --aura-top: url(#sg-aura-giant-top); filter: var(--aura-a); }
@media (max-width: 639px) { .t-aura { --aura-a: url(#sg-aura-h1); --aura-f1: url(#sg-aura-h1-f1); --aura-f2: url(#sg-aura-h1-f2); --aura-f3: url(#sg-aura-h1-f3); --aura-f4: url(#sg-aura-h1-f4); --aura-top: url(#sg-aura-h1-top); } }
@media (prefers-reduced-transparency: reduce) {
  .t-aura, .t-aura-giant { filter: none; text-shadow: 0 0 6px rgba(150, 190, 250, 0.7), 0 0 20px rgba(176, 150, 236, 0.4); }
  .aura-live > .aura-copy { display: none; }
  .aura-live > .aura-letters { filter: none; }
}

/* ---------- the aura, alive ----------
   Add .aura-live to an aura title and splat-glass.js stacks four copies of its text behind
   the title, each the aura's colour (tight glow, bloom and flares) with its flares living in
   random lobes of its own (a quarter strength elsewhere in the zones) and reaching out of the
   letters there, on both sides at once, up to 34 px at display size, with a little jitter and
   its own film grain. The tight glow and bloom are the same in every copy, so they hold
   still. The copies turn in
   a 5 s rotation of four uneven fades (1.1, 1.55, 1.0 and 1.35 s), one fading out exactly as
   the next fades in, added with plus-lighter and always summing to one, so flares come out of
   the text here while they draw back there, with no trail and no change in brightness. The
   title's own text on top takes the still letter, rim and near band, so the letters never move
   and read exactly as in the still aura. Only opacity animates, so no filter is ever re-run
   after its first paint (a transform would re-raster a filtered copy every frame). Under
   prefers-reduced-motion the four copies rest at a quarter each. Until the script has built
   the copies the title shows its still aura, so nothing flashes. */
.aura-live, .t-aura.aura-live, .t-aura-giant.aura-live { display: grid; isolation: isolate; }
.aura-live[data-aura-live] { filter: none; }
.aura-live > * { grid-area: 1 / 1; min-width: 0; }
.aura-live > .aura-copy {
  pointer-events: none; -webkit-user-select: none; user-select: none; mix-blend-mode: plus-lighter; will-change: opacity;
  animation: aura-f1 5s ease-in-out infinite;
}
.aura-live > .aura-copy:nth-child(1) { filter: var(--aura-f1); }
.aura-live > .aura-copy:nth-child(2) { filter: var(--aura-f2); animation-name: aura-f2; }
.aura-live > .aura-copy:nth-child(3) { filter: var(--aura-f3); animation-name: aura-f3; }
.aura-live > .aura-copy:nth-child(4) { filter: var(--aura-f4); animation-name: aura-f4; }
.aura-live > .aura-letters { position: relative; z-index: 1; filter: var(--aura-top); }
/* the four fades (1.1, 1.55, 1.0 and 1.35 s): 1 to 2 over 0 to 22%, 2 to 3 to 53%, 3 to 4 to 73%,
   4 to 1 to 100% */
@keyframes aura-f1 { 0% { opacity: 1; } 22%, 73% { opacity: 0; } 100% { opacity: 1; } }
@keyframes aura-f2 { 0% { opacity: 0; } 22% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes aura-f3 { 0%, 22% { opacity: 0; } 53% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes aura-f4 { 0%, 53% { opacity: 0; } 73% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .aura-live > .aura-copy { animation: none; opacity: 0.25; }
}

/* ---------- hint pill (viewer) ---------- */
.hint {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; white-space: nowrap;
  font-size: 13px; color: rgba(255, 255, 255, 0.72);
}
.hint b { color: #fff; font-weight: 600; }

/* ---------- track (tour bar) ---------- */
.track { position: relative; height: 4px; border-radius: 48px; background: rgba(255, 255, 255, 0.14); }
.track .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 48px; background: var(--hot); }
.track .dot {
  position: absolute; top: -3px; width: 10px; height: 10px; margin-left: -5px; padding: 0; border: 0;
  border-radius: 48px; background: rgba(255, 255, 255, 0.35); cursor: pointer;
}
.track .dot.on { background: var(--hot); }

/* ---------- common page chrome ---------- */
.site-footer { padding-block: 64px 40px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer nav a { color: var(--text-2); font-size: 14px; }
.site-footer nav a:hover { color: #fff; text-decoration: none; }

.placeholder-note { color: var(--text-3); }