/* ============================================================================
   SQUARESPACE PREMIUM LAYER — Express Intent
   Additive layer that brings structural Squarespace/Foundry patterns into
   Express Intent's existing neon-green-on-black terminal brand.
   Loads AFTER tailwind.css. Adapts the design-system patterns to THIS site's
   tokens (accent #5BCE47, dark #0a0a0a, SF Mono labels, -0.04em display) —
   does not impose foreign colors. No markup changes required for most of it.
   ============================================================================ */

:root {
  /* Brand (Express Intent) */
  --ei-dark: #0a0a0a;
  --ei-panel: #0f0f0f;
  --ei-line: #1a1a1a;
  --ei-line-2: #1f1f1f;
  --ei-light: #f5f5f5;
  --ei-muted: #8a8a8a;
  --ei-accent: #5BCE47;
  --ei-accent-dim: rgba(91, 206, 71, 0.10);
  --ei-accent-mid: rgba(91, 206, 71, 0.20);
  --ei-accent-strong: rgba(91, 206, 71, 0.35);

  /* Structural (Squarespace-validated, brand-neutral) */
  --ei-bg-alpha-97: rgba(10, 10, 10, 0.97);  /* the 0.97 navbar signature */
  --ei-radius-sm: 4px;
  --ei-radius-lg: 8px;
  --ei-radius-pill: 9999px;
  --ei-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ei-ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --ei-t-fast: 200ms;
  --ei-t-base: 400ms;
  --ei-t-slow: 600ms;
  --ei-space-2xl: clamp(3rem, 6vw, 6rem);
  --ei-space-3xl: clamp(4rem, 8vw, 8rem);
  --ei-section-pad-y: clamp(4rem, 9vw, 8rem);
}

/* ---- 1. Nav: lift the existing /95 to the true 0.97 glass signature ---- */
nav.sticky {
  background: var(--ei-bg-alpha-97) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background var(--ei-t-base) var(--ei-ease),
              border-color var(--ei-t-base) var(--ei-ease);
}

/* ---- 2. Underline-slide hover on nav + content links (SQSP signature) --- */
.sqsp-underline,
nav.sticky a:not(.btn):not([class*="bg-"]) {
  background-image: linear-gradient(to right, var(--ei-accent), var(--ei-accent));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size var(--ei-t-base) var(--ei-ease),
              color var(--ei-t-base) var(--ei-ease);
}
.sqsp-underline:hover,
nav.sticky a:not(.btn):not([class*="bg-"]):hover {
  background-size: 100% 1.5px;
}

/* ---- 3. Premium card hovers: lift + accent border (the 6 .card grid) ---- */
.card {
  border-radius: var(--ei-radius-lg);
  transition: transform var(--ei-t-base) var(--ei-ease),
              border-color var(--ei-t-base) var(--ei-ease),
              box-shadow var(--ei-t-base) var(--ei-ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--ei-accent-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ---- 4. Imagery: slow deliberate Ken-Burns / hover-zoom ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .sqsp-kenburns {
    animation: sqsp-ken-burns 22s var(--ei-ease) infinite alternate;
    transform-origin: center center;
  }
  @keyframes sqsp-ken-burns {
    from { transform: scale(1.0); }
    to   { transform: scale(1.06); }
  }
  .sqsp-zoom { overflow: hidden; }
  .sqsp-zoom img,
  .card img {
    transition: transform var(--ei-t-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }
  .sqsp-zoom:hover img,
  .card:hover img { transform: scale(1.04); }
}

/* ---- 5. Pill button option (where a rounded CTA is wanted) ------------- */
.sqsp-pill {
  border-radius: var(--ei-radius-pill);
  transition: transform var(--ei-t-fast) var(--ei-ease),
              background var(--ei-t-base) var(--ei-ease),
              box-shadow var(--ei-t-base) var(--ei-ease);
}
.sqsp-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px var(--ei-accent-strong);
}

/* ---- 6. Section rhythm helper (opt-in via .sqsp-section) --------------- */
.sqsp-section {
  padding-top: var(--ei-section-pad-y);
  padding-bottom: var(--ei-section-pad-y);
}

/* ---- 7. Accessible focus ring in the brand accent --------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ei-accent);
  outline-offset: 2px;
  border-radius: var(--ei-radius-sm);
}

/* ---- 8. Scroll-reveal polish: refine the existing .reveal easing ------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    transition-timing-function: var(--ei-ease-decel) !important;
  }
}