/* ============================================================
   Alias — Base element defaults & helpers.
   Small, non-invasive resets that make tokens feel "on-brand"
   out of the box. Consumers can rely on these globals.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur-theme) ease, color var(--dur-theme) ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--accent-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

code, kbd, pre, samp { font-family: var(--font-mono); }

::selection {
  background: var(--accent-subtle);
  color: var(--text-primary);
}

/* Eyebrow / all-caps label helper */
.alias-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-text);
}

/* Dotted brand canvas — the default marketing backdrop.
   Dots read light in light theme, faint white in dark. */
.alias-dot-grid {
  background-image: radial-gradient(var(--dot-grid) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Film-grain overlay for large media / hero tiles.
   Apply to a positioned container; needs assets/grain.png. */
.alias-grain { position: relative; }
.alias-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("../assets/grain.png");
  background-size: 90px 90px;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  z-index: 4;
}

/* ============================================================
   Mesh — the abstract gradient accent with a grainy finish.
   A dark tile, 2–5 blurred colour blobs, a vignette, and grain
   on top. Reserved for hero / CTA / feature tiles; never behind
   body copy, never more than one per screen fold.

   <div class="alias-mesh alias-grain" style="border-radius:var(--radius-3xl)">
     <div class="alias-mesh-field">
       <span class="alias-mesh-blob" style="width:48%;height:70%;left:-4%;top:-8%;
             background:var(--mesh-1);animation:alias-blob-a 16s ease-in-out infinite"></span>
       …
     </div>
     <div class="alias-mesh-content">…</div>
   </div>
   ============================================================ */
.alias-mesh {
  position: relative;
  overflow: hidden;
  background: var(--mesh-base);
  border: 1px solid var(--border-subtle);
}
.alias-mesh-field {
  position: absolute;
  inset: -8%;
  z-index: 1;
}
.alias-mesh-blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(var(--mesh-blur));
}
/* Vignette — keeps the edges from glowing and holds contrast for content. */
.alias-mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 50%, transparent 40%, var(--mesh-vignette) 100%);
}
.alias-mesh-content {
  position: relative;
  z-index: 3;
  color: #F7F7F5;
}

@keyframes alias-blob-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(7%,9%) scale(1.18); } }
@keyframes alias-blob-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-9%,6%) scale(1.12); } }
@keyframes alias-blob-c { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6%,-8%) scale(1.2); } }
@keyframes alias-blob-d { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-7%,-6%) scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}