@charset "UTF-8";
/* =========================================================
   Etch Utility Effects (ACSS-first) — v1.1
   Requires Automatic.css (ACSS)
   Prefix: u-
   ======================================================= */
/* -----------------------------
   ACSS token fallbacks (safe)
------------------------------ */
:root {
  /* Radius + borders */
  --u-radius: var(--radius, 0.85rem);
  --u-border: var(--border, 1px solid rgba(0,0,0,0.12));
  --u-border-light: var(--border-light, var(--u-border));
  --u-border-dark: var(--border-dark, var(--u-border));
  /* Dividers */
  --u-divider: var(--divider, 1px solid rgba(0,0,0,0.12));
  --u-divider-gap: var(--divider-gap, var(--space-m, 1rem));
  /* Shadows (ACSS provides vars + classes) */
  --u-shadow-s: var(--box-shadow-s, 0 6px 18px rgba(0,0,0,0.10));
  --u-shadow-m: var(--box-shadow-m, 0 8px 24px rgba(0,0,0,0.12));
  --u-shadow-l: var(--box-shadow-l, 0 14px 38px rgba(0,0,0,0.16));
  --u-shadow-xl: var(--box-shadow-xl, 0 20px 60px rgba(0,0,0,0.20));
  /* Motion */
  --u-ease: cubic-bezier(.2, .8, .2, 1);
  --u-dur-fast: 160ms;
  --u-dur: 260ms;
  /* Focus (ACSS tokens) */
  --u-focus-color: var(--focus-color, rgba(47,125,246,0.45));
  --u-focus-width: var(--focus-width, 3px);
  --u-focus-offset: var(--focus-offset, 2px);
}
/* =========================================================
   SHADOW / ELEVATION HELPERS
   (ACSS already has .box-shadow--s/m/l/xl for static shadows)
   This adds hover/interactions using ACSS shadow tokens.
========================================================= */
:where(.u-hover-shadow) {
  transition: box-shadow var(--u-dur) var(--u-ease);
}
:where(.u-hover-shadow:hover) {
  box-shadow: var(--u-shadow-m);
}
:where(.u-hover-elevate) {
  transition: transform var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
  will-change: transform;
}
:where(.u-hover-elevate:hover) {
  transform: translateY(-4px);
  box-shadow: var(--u-shadow-l);
}
:where(.u-hover-elevate-sm:hover) {
  transform: translateY(-2px);
  box-shadow: var(--u-shadow-m);
}
:where(.u-hover-scale) {
  transition: transform var(--u-dur) var(--u-ease);
  will-change: transform;
}
:where(.u-hover-scale:hover) {
  transform: scale(1.02);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :where(.u-hover-shadow), :where(.u-hover-elevate), :where(.u-hover-scale) {
    transition: none !important;
  }
  :where(.u-hover-elevate:hover), :where(.u-hover-elevate-sm:hover), :where(.u-hover-scale:hover) {
    transform: none !important;
  }
}
/* =========================================================
   LINK POLISH (animated underline)
========================================================= */
:where(.u-link-underline) {
  position: relative;
  text-decoration: none;
  color: inherit;
}
:where(.u-link-underline::after) {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--u-dur) var(--u-ease);
  opacity: 0.9;
}
:where(.u-link-underline:hover::after), :where(.u-link-underline:focus-visible::after) {
  transform: scaleX(1);
}
/* =========================================================
   DIVIDERS / SEPARATORS (ACSS-first)
   ACSS has divider utilities; these add two common patterns.
========================================================= */
/* Between-items divider on a container (direct children) */
:where(.u-between) > * + * {
  border-top: var(--u-divider);
  padding-top: var(--u-divider-gap);
  margin-top: var(--u-divider-gap);
}
/* Divider between items except last (apply to EACH item) */
:where(.u-between-not-last) {
  position: relative;
}
:where(.u-between-not-last:not(:last-child)) {
  padding-bottom: var(--u-divider-gap);
  margin-bottom: var(--u-divider-gap);
}
:where(.u-between-not-last:not(:last-child))::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--u-divider-gap) * -0.5);
  height: 0;
  border-top: var(--u-divider);
}
/* =========================================================
   GLASS / BLUR PANEL (for overlays)
========================================================= */
:where(.u-glass) {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--u-radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* =========================================================
   RADIUS / CLIP (ACSS uses var(--radius))
========================================================= */
:where(.u-radius) {
  border-radius: var(--u-radius) !important;
}
:where(.u-clip) {
  overflow: hidden !important;
}
/* =========================================================
   FOCUS POLISH (uses ACSS focus tokens)
========================================================= */
:where(.u-focus-ring:focus-visible) {
  outline: var(--u-focus-width) solid var(--u-focus-color);
  outline-offset: var(--u-focus-offset);
  border-radius: var(--u-radius);
}
:where(a.u-focus, button.u-focus, [role="button"].u-focus):focus-visible {
  outline: var(--u-focus-width) solid var(--u-focus-color);
  outline-offset: var(--u-focus-offset);
  border-radius: var(--u-radius);
}
/* =========================================================
   LOAD-IN ANIMATIONS (no JS)
========================================================= */
@keyframes uFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
:where(.u-anim-fade-in) {
  animation: uFadeIn 600ms var(--u-ease) both;
}
@keyframes uSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
:where(.u-anim-slide-up) {
  animation: uSlideUp 700ms var(--u-ease) both;
}
@media (prefers-reduced-motion: reduce) {
  :where(.u-anim-fade-in), :where(.u-anim-slide-up) {
    animation: none !important;
  }
}
/* =========================================================
   SCROLL REVEAL (CSS + JS adds .is-visible)
   Use: u-reveal + optional u-reveal--up/--left/--right
========================================================= */
:where(.u-reveal) {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--u-ease), transform 650ms var(--u-ease);
  will-change: opacity, transform;
}
:where(.u-reveal.u-reveal--up) {
  transform: translateY(14px);
}
:where(.u-reveal.u-reveal--left) {
  transform: translateX(-14px);
}
:where(.u-reveal.u-reveal--right) {
  transform: translateX(14px);
}
:where(.u-reveal.is-visible) {
  opacity: 1;
  transform: translate(0, 0);
}
@media (prefers-reduced-motion: reduce) {
  :where(.u-reveal) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* =========================================================
   IMAGE SCROLL REVEAL (enter from bottom + fade in)
   Apply to: img, figure, or wrapper
   Use: u-img-reveal (+ optional u-img-reveal--xl)
========================================================= */
:where(.u-img-reveal) {
  opacity: 0;
  transform: translateY(var(--space-l));
  transition: opacity 700ms var(--u-ease), transform 850ms var(--u-ease);
  will-change: opacity, transform;
}
:where(.u-img-reveal.is-visible) {
  opacity: 1;
  transform: translateY(0);
}
:where(.u-img-reveal--xl) {
  transform: translateY(var(--space-xl, calc(var(--space-l) * 1.5)));
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :where(.u-img-reveal) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* =========================================================
   SMALL HELPERS (ACSS-friendly)
========================================================= */
:where(.u-border) {
  border: var(--u-border) !important;
}
:where(.u-border-light) {
  border: var(--u-border-light) !important;
}
:where(.u-border-dark) {
  border: var(--u-border-dark) !important;
}
:where(.u-muted) {
  opacity: 0.82;
}
:where(.u-nowrap) {
  white-space: nowrap;
}
:where(.u-center) {
  text-align: center;
}