/* ==========================================================================
   NOETIC — layout: shell, header, footer, sections, grid
   ========================================================================== */

/* Content sits above the fixed WebGL layers. The page scrolls natively — see
   the note at the top of js/core/scroll.js for why nothing is transform-
   hijacked here (sticky pinning depends on a real scroll container). */
#viewport { position: relative; z-index: var(--z-content); }

/* ---- Rails ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 62rem; }
.wrap--wide   { max-width: 104rem; }

.section {
  position: relative;
  padding-block: clamp(4rem, 11vh, 9rem);
}
.section--tall { padding-block: clamp(6rem, 18vh, 14rem); }
.section--flush { padding-block: 0; }

/* Hairline rule that draws itself in as the section arrives. */
.section--ruled::before {
  content: "";
  position: absolute;
  top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--e-out);
}
.section--ruled.is-in::before { transform: scaleX(1); }

/* ---- Section headers ---------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--cy-400);
  margin-bottom: var(--s-5);
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.section-head {
  display: grid;
  gap: var(--s-5);
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
@media (min-width: 60rem) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: end;
    gap: var(--s-8);
  }
}
.section-head p { color: var(--tx-mid); font-size: var(--t-md); }

/* ---- Generic grids ------------------------------------------------------ */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  view-transition-name: header;
}
.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--s-4) var(--gutter);
  transition: padding var(--d-med) var(--e-out);
}
.header::before {
  content: "";
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--ink-1000) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  opacity: 0;
  transition: opacity var(--d-med) var(--e-swift), border-color var(--d-med) var(--e-swift);
}
.header.is-stuck::before { opacity: 1; border-bottom-color: var(--line); }
.header.is-stuck .header__inner { padding-block: var(--s-3); }

/* Brand mark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  position: relative;
  view-transition-name: brand;
}
.brand__mark {
  width: 26px; height: 26px; flex: none; overflow: visible;
  transition: filter var(--d-med) var(--e-swift);
}
.brand__ring { transform-origin: 50% 50%; animation: brand-spin 14s linear infinite; }
@keyframes brand-spin { to { transform: rotate(360deg); } }
.brand__word {
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-hi);
}
.brand:hover .brand__mark { filter: drop-shadow(0 0 10px var(--cy-500)); }

/* Nav */
.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.2vw, 1.2rem);
}
.nav__link {
  position: relative;
  display: block;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-sm);
  color: var(--tx-mid);
  transition: color var(--d-fast) var(--e-swift);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: var(--s-3); right: var(--s-3); bottom: 0.35rem;
  height: 1px;
  background: var(--grad-signal);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--d-med) var(--e-out);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--tx-hi); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav__link[aria-current="page"] { color: var(--tx-hi); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta { margin-left: var(--s-3); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  margin-left: auto;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.nav-toggle span {
  position: absolute; left: 50%; width: 1.1rem; height: 1.5px;
  background: var(--tx-hi);
  transform: translateX(-50%);
  transition: transform var(--d-med) var(--e-out), opacity var(--d-fast) linear;
}
.nav-toggle span:nth-child(1) { top: 1.05rem; }
.nav-toggle span:nth-child(2) { top: 1.55rem; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 0.25rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translate(-50%, -0.25rem) rotate(-45deg); }

@media (max-width: 62rem) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    margin: 0;
    padding: 6rem var(--gutter) var(--s-8);
    background: color-mix(in oklab, var(--ink-1000) 94%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--d-med) var(--e-in-out);
    pointer-events: none;
  }
  .nav.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: var(--s-4) 0;
    font-size: var(--t-lg);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity var(--d-med) var(--e-out), transform var(--d-med) var(--e-out);
    transition-delay: calc(var(--i, 0) * 45ms);
  }
  .nav.is-open .nav__link { opacity: 1; transform: none; }
  .nav__cta { margin: var(--s-5) 0 0; }
}

/* ---- Scroll progress meter (CSS scroll-driven, JS-free) ------------------ */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--grad-signal);
  z-index: calc(var(--z-header) + 1);
  box-shadow: 0 0 12px color-mix(in oklab, var(--cy-500) 60%, transparent);
}
@supports (animation-timeline: scroll()) {
  .progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes progress-grow { to { transform: scaleX(1); } }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  position: relative;
  padding-block: var(--s-9) var(--s-6);
  border-top: 1px solid var(--line);
  margin-top: var(--s-9);
  overflow: hidden;
}
.footer__grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
@media (min-width: 60rem) {
  .footer__grid { grid-template-columns: 1.7fr repeat(3, 1fr); }
}
.footer__blurb { color: var(--tx-lo); font-size: var(--t-sm); max-width: 34ch; }
.footer h5 {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--tx-lo);
  margin-bottom: var(--s-4);
  font-weight: 500;
}
.footer li + li { margin-top: var(--s-2); }
.footer li a {
  font-size: var(--t-sm);
  color: var(--tx-mid);
  transition: color var(--d-fast) var(--e-swift);
}
.footer li a:hover { color: var(--cy-400); }
.footer__note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--tx-dim);
}

/* Oversized wordmark bleeding off the bottom of the footer. */
.footer__glyph {
  display: block;
  margin-top: var(--s-7);
  font-size: clamp(4rem, 19vw, 17rem);
  font-weight: 700;
  line-height: 0.78;
  letter-spacing: -0.05em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--tx-lo) 34%, transparent);
  user-select: none;
  pointer-events: none;
  margin-bottom: -0.22em;
}

/* ---- Canvas layers ------------------------------------------------------ */
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--e-swift);
}
.fx-layer.is-ready { opacity: 1; }