/* engine.css - The Liberation Engine shared UI layer.
   Cutting-edge, restrained, dark-vaporwave. Consumes tokens.css color vars.
   Motion / space / type / depth tokens live here. GPU-only animation (transform + opacity).
   Glows derived via color-mix() from existing brand vars, so the WCAG contrast gate stays green.
   Linked site-wide by build_site.py after /tokens.css. Content needs zero JS to render. */

@layer le.tokens, le.base, le.type, le.components, le.motion, le.utils;

@layer le.tokens {
  :root {
    /* fluid type scale (min, fluid, max) */
    --fs--1:  clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
    --fs-0:   clamp(1.00rem, 0.94rem + 0.30vw, 1.15rem);
    --fs-1:   clamp(1.30rem, 1.13rem + 0.85vw, 1.85rem);
    --fs-2:   clamp(1.75rem, 1.35rem + 2.00vw, 3.00rem);
    --fs-3:   clamp(2.30rem, 1.50rem + 4.00vw, 4.60rem);
    --fs-hero:clamp(2.80rem, 1.40rem + 7.00vw, 6.50rem);

    /* fluid space scale */
    --sp-2xs: clamp(0.50rem, 0.45rem + 0.25vw, 0.65rem);
    --sp-xs:  clamp(0.75rem, 0.60rem + 0.50vw, 1.00rem);
    --sp-s:   clamp(1.00rem, 0.82rem + 0.70vw, 1.40rem);
    --sp-m:   clamp(1.50rem, 1.15rem + 1.40vw, 2.40rem);
    --sp-l:   clamp(2.40rem, 1.70rem + 2.80vw, 4.20rem);
    --sp-xl:  clamp(3.60rem, 2.30rem + 5.00vw, 7.00rem);

    --r-s: 10px; --r-m: 16px; --r-l: 28px; --r-pill: 999px;

    /* derived from brand vars: no new declared colors, contrast gate untouched */
    --glow-mg: color-mix(in oklab, var(--brand-mg, #e879f9) 36%, transparent);
    --glow-cy: color-mix(in oklab, var(--brand-cy, #34e3f2) 36%, transparent);
    --line:    color-mix(in oklab, var(--border) 60%, transparent);
    --glass:   color-mix(in oklab, var(--surface) 72%, transparent);

    --sh-1: 0 1px 2px rgba(0,0,0,.35);
    --sh-2: 0 10px 34px rgba(0,0,0,.45);
    --sh-glow: 0 0 0 1px color-mix(in oklab, var(--brand-mg, #e879f9) 30%, transparent), 0 10px 44px var(--glow-mg);

    --ease:      cubic-bezier(.22,.61,.36,1);
    --ease-back: cubic-bezier(.34,1.40,.64,1);
    --d-1: 150ms; --d-2: 280ms; --d-3: 540ms;

    --maxw: 72rem;
    --blur: 14px;
  }
}

@layer le.base {
  .le-wrap    { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-s); }
  .le-section { padding-block: var(--sp-xl); }
  .le-stack > * + * { margin-block-start: var(--sp-s); }
}

@layer le.type {
  .le-kinetic {
    font-size: var(--fs-hero); line-height: .98; font-weight: 800;
    letter-spacing: -.03em; text-wrap: balance;
    background: linear-gradient(100deg, var(--brand-mg, #e879f9), var(--brand-cy, #34e3f2) 72%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  /* if background-clip:text is unsupported, keep the headline visible */
  @supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .le-kinetic { color: var(--brand-cy, #34e3f2); background: none; }
  }
  .le-eyebrow {
    font-size: var(--fs--1); letter-spacing: .22em; text-transform: uppercase;
    color: var(--brand-cy, #34e3f2); font-weight: 600;
  }
  .le-lede { font-size: var(--fs-1); color: var(--muted-fg); max-width: 46ch; text-wrap: pretty; }
  .le-h2   { font-size: var(--fs-2); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
}

@layer le.components {
  /* ambient duotone aura: fixed, behind everything, GPU transforms only */
  .le-aura { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
  .le-aura::before, .le-aura::after {
    content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
    filter: blur(80px); opacity: .24; will-change: transform;
  }
  .le-aura::before { background: var(--brand-mg, #e879f9); top: -18vmax; left: -10vmax;
    animation: le-drift1 22s var(--ease) infinite alternate; }
  .le-aura::after  { background: var(--brand-cy, #34e3f2); bottom: -20vmax; right: -12vmax;
    animation: le-drift2 26s var(--ease) infinite alternate; }

  /* glass: sparse use only (nav, hero panel) */
  .le-glass {
    background: var(--glass);
    backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    border: 1px solid var(--line); border-radius: var(--r-l);
  }

  .le-card {
    position: relative; background: var(--surface); color: var(--surface-fg);
    border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-m);
    transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
  }
  .le-card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, 0%), var(--glow-mg), transparent 60%);
    transition: opacity var(--d-2) var(--ease);
  }
  .le-card:hover {
    transform: translateY(-4px); box-shadow: var(--sh-2);
    border-color: color-mix(in oklab, var(--brand-mg, #e879f9) 40%, var(--line));
  }
  .le-card:hover::before { opacity: .5; }

  .le-btn {
    display: inline-flex; align-items: center; gap: .5em;
    padding: .8em 1.5em; border-radius: var(--r-pill); font-weight: 650; font-size: var(--fs-0);
    color: var(--body-bg);
    background: linear-gradient(100deg, var(--brand-mg, #e879f9), var(--brand-cy, #34e3f2));
    border: 0; cursor: pointer; text-decoration: none;
    transition: transform var(--d-1) var(--ease-back), box-shadow var(--d-2) var(--ease), filter var(--d-1) var(--ease);
  }
  .le-btn:hover  { transform: translateY(-2px); box-shadow: var(--sh-glow); }
  .le-btn:active { transform: translateY(0) scale(.97); }
  .le-btn--ghost { background: transparent; color: var(--body-fg); border: 1px solid var(--line); }
  .le-btn--ghost:hover { border-color: var(--brand-cy, #34e3f2); box-shadow: 0 0 0 1px var(--glow-cy); }

  /* scroll progress: scaleX driven by engine.js --p */
  .le-progress {
    position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 100;
    transform-origin: 0 50%; transform: scaleX(var(--p, 0));
    background: linear-gradient(90deg, var(--brand-mg, #e879f9), var(--brand-cy, #34e3f2));
  }

  :where(a, button, [tabindex], summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px;
  }
}

@layer le.motion {
  /* progressive enhancement: only hide reveal targets when JS is active (.le-js on <html>) */
  .le-js .le-reveal { opacity: 0; transform: translateY(20px); }
  .le-js .le-reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease);
  }
  .le-js .le-reveal[data-delay="1"].is-in { transition-delay: 80ms; }
  .le-js .le-reveal[data-delay="2"].is-in { transition-delay: 160ms; }
  .le-js .le-reveal[data-delay="3"].is-in { transition-delay: 240ms; }

  @keyframes le-drift1 { to { transform: translate3d(8vmax, 6vmax, 0) scale(1.15); } }
  @keyframes le-drift2 { to { transform: translate3d(-7vmax, -5vmax, 0) scale(1.10); } }
}

@layer le.utils {
  .le-grid   { display: grid; gap: var(--sp-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  .le-center { display: grid; place-items: center; text-align: center; }
  .le-dim    { color: var(--muted-fg); }
}

/* the binding constraint from the design panel: full reduced-motion opt-out */
@media (prefers-reduced-motion: reduce) {
  .le-js .le-reveal, .le-js .le-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .le-aura::before, .le-aura::after { animation: none !important; }
  .le-card, .le-btn { transition: none !important; }
  .le-card:hover, .le-btn:hover { transform: none !important; }
}