/*
 * Context Design Co — v4.0 "Obsidian Glass" Primitives
 * Import order: tokens.css → glass.css → page styles.
 * Brief: design/v4/SMART-PROMPT.md §8.4
 *
 * Contents:
 *   1. Layout shell        .g-container, .g-section, .g-seam
 *   2. Ambient field       .g-dotfield, .g-glow
 *   3. Progressive frost   .g-nav (+ 4 bands, scroll-driven)
 *   4. Glass surfaces      .g-panel, .g-card, .g-pill
 *   5. Controls            .g-btn, .g-btn--fill, .g-btn--ghost, .g-input
 *   6. Type utilities      .g-kicker, .g-h1/.g-h2/.g-h3, .g-dim, .g-statement
 *   7. Motion              .g-reveal, .g-lit word states, hero stagger
 *   8. Fallbacks           @supports, reduced-transparency, mobile blur relief
 */

/* ---------- 1 · LAYOUT SHELL ---------- */

.g-container {
  width: 100%;
  max-width: var(--cdc-max-page);
  margin: 0 auto;
  padding: 0 var(--cdc-page-pad);
  box-sizing: border-box;
}

.g-section {
  position: relative;
  padding: var(--cdc-section-pad) 0;
}

/* seam fade — sections meet in a gradient breath, never a border */
.g-seam::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: clamp(110px, 16vh, 220px);
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(var(--cdc-obsidian-rgb), 0.45) 40%,
    rgba(var(--cdc-obsidian-rgb), 0.0) 100%);
}

.g-hairline-row {
  border-top: 1px solid var(--cdc-hairline-soft);
}

/* ---------- 2 · AMBIENT FIELD ---------- */

/* sparse dot grid — the quiet machine-made texture behind heroes */
.g-dotfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle 1px at 1px 1px, var(--cdc-gridline) 99%, transparent);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 78% 68% at 62% 30%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 78% 68% at 62% 30%, #000 0%, transparent 78%);
}

/* grain film — kills banding, adds material realism. Fixed, whisper-quiet. */
.g-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* copper glow — ALWAYS placed behind glass, never on it */
.g-glow {
  position: absolute;
  pointer-events: none;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--cdc-copper-glow) 0%,
    var(--cdc-copper-veil) 34%,
    transparent 68%);
  filter: blur(40px);
  opacity: .5;
}
.g-glow--soft { opacity: .28; }

/* ---------- 3 · PROGRESSIVE FROST NAV (terafab mechanics) ----------
 * Four stacked backdrop-filter bands with decreasing blur and their own
 * masks → graduated frost falloff instead of a hard-edged blur box.
 * JS sets --nav-blur (px) and --nav-bg (0..1) from scroll position;
 * static pages may hardcode --nav-blur: 14px; --nav-bg: 1. */

.g-nav {
  --nav-blur: 14px;
  --nav-bg: 1;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
}

.g-nav__frost {
  position: absolute;
  inset: 0 0 -34px 0;          /* frost reaches below the bar and fades out */
  pointer-events: none;
}

.g-nav__band {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(var(--band-blur)) saturate(calc(1 + var(--nav-bg) * 0.35));
  -webkit-backdrop-filter: blur(var(--band-blur)) saturate(calc(1 + var(--nav-bg) * 0.35));
  background: rgba(var(--cdc-obsidian-rgb), calc(var(--nav-bg) * var(--band-tint) * 0.55));
  -webkit-mask-image: var(--band-mask);
          mask-image: var(--band-mask);
}
.g-nav__band--1 {
  --band-blur: calc(var(--nav-blur) * 1.12);
  --band-tint: 0.62;
  --band-mask: linear-gradient(180deg, #000 0%, #000 20%, rgba(0,0,0,.55) 38%, transparent 58%);
}
.g-nav__band--2 {
  --band-blur: calc(var(--nav-blur) * 0.68);
  --band-tint: 0.42;
  --band-mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.88) 26%, rgba(0,0,0,.35) 52%, transparent 74%);
}
.g-nav__band--3 {
  --band-blur: calc(var(--nav-blur) * 0.38);
  --band-tint: 0.24;
  --band-mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,.22) 62%, transparent 88%);
}
.g-nav__band--4 {
  --band-blur: calc(var(--nav-blur) * 0.14);
  --band-tint: 0.10;
  --band-mask: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 42%, transparent 100%);
}

.g-nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cdc-space-6);
  max-width: var(--cdc-max-page);
  margin: 0 auto;
  padding: 1.05rem var(--cdc-page-pad);
  box-sizing: border-box;
}

.g-nav__brand {
  font-family: var(--cdc-font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--cdc-ink);
  text-decoration: none;
  white-space: nowrap;
}
.g-nav__brand .brand-accent { color: var(--cdc-copper-hi); }

.g-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.7rem);
}
.g-nav__links a {
  font-size: var(--cdc-body-sm-size);
  font-weight: 450;
  color: var(--cdc-ink-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--cdc-dur-fast) var(--cdc-ease);
}
.g-nav__links a:hover { color: var(--cdc-ink); }
.g-nav__links a.is-cta { color: var(--cdc-copper-hi); }
.g-nav__links a.is-cta:hover { color: var(--cdc-copper-2); }

/* ---------- 4 · GLASS SURFACES ---------- */

/* hero-grade panel — the biggest glass moments (one or two per page) */
.g-panel {
  position: relative;
  background: var(--cdc-glass-tint);
  backdrop-filter: blur(var(--cdc-glass-blur)) saturate(var(--cdc-glass-sat)) brightness(var(--cdc-glass-bright));
  -webkit-backdrop-filter: blur(var(--cdc-glass-blur)) saturate(var(--cdc-glass-sat)) brightness(var(--cdc-glass-bright));
  border: var(--cdc-glass-border);
  border-top-color: var(--cdc-glass-border-top);
  border-radius: var(--cdc-r-xl);
  box-shadow: var(--cdc-glass-edge), var(--cdc-glass-shadow);
}

/* gradient-border upgrade (Linear/Vercel specular edge) — hero panel only */
.g-panel--edge { border-color: transparent; }
.g-panel--edge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.04) 38%,
    rgba(198, 113, 31, 0.10) 62%,
    rgba(255, 255, 255, 0.12) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

/* content card — grids of 2–4 */
.g-card {
  position: relative;
  background: var(--cdc-glass-tint-2);
  backdrop-filter: blur(var(--cdc-glass-blur-2)) saturate(var(--cdc-glass-sat)) brightness(var(--cdc-glass-bright));
  -webkit-backdrop-filter: blur(var(--cdc-glass-blur-2)) saturate(var(--cdc-glass-sat)) brightness(var(--cdc-glass-bright));
  border: var(--cdc-glass-border);
  border-top-color: var(--cdc-glass-border-top);
  border-radius: var(--cdc-r-lg);
  box-shadow: var(--cdc-glass-edge), var(--cdc-glass-shadow);
  padding: var(--cdc-space-8);
  transition:
    transform var(--cdc-dur) var(--cdc-ease-soft),
    background var(--cdc-dur) var(--cdc-ease),
    border-color var(--cdc-dur) var(--cdc-ease),
    box-shadow var(--cdc-dur) var(--cdc-ease);
}
.g-card:hover {
  transform: translateY(-4px);
  background: rgba(20, 28, 50, 0.55);   /* brighten the FILL, never the blur */
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: var(--cdc-glass-edge), var(--cdc-glass-shadow-lift);
}

/* cursor spotlight (Linear pattern) — JS writes --mx / --my only */
.g-card--spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 0%),
    rgba(198, 113, 31, 0.09), transparent 42%);
  opacity: 0;
  transition: opacity 400ms var(--cdc-ease);
  pointer-events: none;
}
.g-card--spot:hover::after { opacity: 1; }

/* capsule — chips, inputs, compact CTAs */
.g-pill {
  position: relative;
  background: var(--cdc-glass-tint-3);
  backdrop-filter: blur(var(--cdc-glass-blur-3)) saturate(var(--cdc-glass-sat));
  -webkit-backdrop-filter: blur(var(--cdc-glass-blur-3)) saturate(var(--cdc-glass-sat));
  border: var(--cdc-glass-border);
  border-radius: var(--cdc-r-pill);
  box-shadow: var(--cdc-glass-edge);
}

/* ---------- 5 · CONTROLS ---------- */

.g-btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: .55rem;
  font-family: var(--cdc-font-body);
  font-size: var(--cdc-body-sm-size);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  padding: .85rem 1.45rem;
  border-radius: var(--cdc-r-pill);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--cdc-dur-fast) var(--cdc-ease),
    color var(--cdc-dur-fast) var(--cdc-ease),
    border-color var(--cdc-dur-fast) var(--cdc-ease),
    transform var(--cdc-dur-fast) var(--cdc-ease);
}
.g-btn:active { transform: translateY(1px); }
.g-btn:focus-visible { outline: 2px solid rgba(255,255,255,.45); outline-offset: 3px; }

/* primary — copper fill. ONE per section. */
.g-btn--fill {
  background: linear-gradient(180deg, var(--cdc-copper-2) 0%, var(--cdc-copper) 58%, var(--cdc-copper-deep) 130%);
  border: 1px solid rgba(233, 166, 95, .35);
  color: #FFF7EE;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 24px -10px var(--cdc-copper-glow);
}
.g-btn--fill:hover {
  background: linear-gradient(180deg, #E08F2E 0%, var(--cdc-copper-2) 58%, var(--cdc-copper) 130%);
}

/* secondary — glass capsule */
.g-btn--glass {
  background: var(--cdc-glass-tint-3);
  backdrop-filter: blur(var(--cdc-glass-blur-3)) saturate(var(--cdc-glass-sat));
  -webkit-backdrop-filter: blur(var(--cdc-glass-blur-3)) saturate(var(--cdc-glass-sat));
  border: var(--cdc-glass-border);
  color: var(--cdc-ink);
  box-shadow: var(--cdc-glass-edge);
}
.g-btn--glass:hover { border-color: rgba(255,255,255,.2); }

/* tertiary — bare arrow link */
.g-btn--ghost {
  padding: .4rem 0;
  border-radius: 0;
  background: none;
  border: none;
  color: var(--cdc-ink-3);
}
.g-btn--ghost:hover { color: var(--cdc-ink); }
.g-btn--ghost.is-copper { color: var(--cdc-copper-hi); }
.g-btn--ghost.is-copper:hover { color: var(--cdc-copper-2); }

.g-input {
  font-family: var(--cdc-font-body);
  font-size: 1rem;
  color: var(--cdc-ink);
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
}
.g-input::placeholder { color: var(--cdc-ink-3); }

/* ---------- 6 · TYPE UTILITIES ---------- */

.g-kicker {
  font-size: var(--cdc-kicker-size);
  font-weight: var(--cdc-kicker-weight);
  letter-spacing: var(--cdc-kicker-ls);
  color: var(--cdc-ink-3);
  margin: 0 0 var(--cdc-space-4);
}

.g-h1, .g-h2, .g-h3 {
  font-family: var(--cdc-font-display);
  color: var(--cdc-ink);
  margin: 0;
  text-wrap: balance;
}
.g-h1 { font-size: var(--cdc-h1-size); line-height: var(--cdc-h1-lh); letter-spacing: var(--cdc-h1-ls); font-weight: var(--cdc-h1-weight); }
.g-h2 { font-size: var(--cdc-h2-size); line-height: var(--cdc-h2-lh); letter-spacing: var(--cdc-h2-ls); font-weight: var(--cdc-h2-weight); }
.g-h3 { font-size: var(--cdc-h3-size); line-height: var(--cdc-h3-lh); letter-spacing: var(--cdc-h3-ls); font-weight: var(--cdc-h3-weight); }

/* two-tone headline: dim the context, the point stays white */
.g-dim { color: var(--cdc-ink-3); }
/* copper word — at most ONE per page */
.g-copper { color: var(--cdc-copper-hi); }

.g-lede {
  font-size: var(--cdc-lede-size);
  line-height: 1.55;
  color: var(--cdc-ink-2);
  max-width: 62ch;
}

/* scroll-lit statement (terafab device): words start ghosted, light up on scroll */
.g-statement {
  font-family: var(--cdc-font-display);
  font-weight: 300;
  font-size: var(--cdc-statement-size);
  line-height: var(--cdc-statement-lh);
  letter-spacing: var(--cdc-statement-ls);
  color: var(--cdc-ink-2);
  max-width: 26ch;
  text-wrap: pretty;
  margin: 0;
}
.g-statement .w { color: var(--cdc-ink-4); transition: color .4s var(--cdc-ease); }
.g-statement .w.is-lit { color: var(--cdc-ink); }
.g-statement strong { font-weight: 400; }
.g-statement .w.is-lit strong,
.g-statement .w--copper.is-lit { color: var(--cdc-copper-hi); }

/* ---------- 7 · MOTION ---------- */

/* entrance: blur-in from below (terafab hero mechanics) */
.g-reveal {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--cdc-dur-enter) var(--cdc-ease-out),
    filter var(--cdc-dur-enter) var(--cdc-ease-out),
    transform var(--cdc-dur-enter) var(--cdc-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, filter, transform;
}
.g-reveal.is-in {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}
/* no-JS safety: everything visible */
html:not(.js) .g-reveal { opacity: 1; filter: none; transform: none; }

/* ---------- 8 · FALLBACKS ---------- */

/* no backdrop-filter → solid surfaces (text contrast holds regardless) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .g-panel, .g-card { background: var(--cdc-glass-tint-solid); }
  .g-pill, .g-btn--glass { background: #101728; }
  .g-nav__band { background: rgba(var(--cdc-obsidian-rgb), calc(var(--nav-bg) * var(--band-tint))); }
}

@media (prefers-reduced-transparency: reduce) {
  .g-panel, .g-card, .g-pill, .g-btn--glass, .g-nav__band {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--cdc-glass-tint-solid) !important;
  }
}

/* mobile GPU relief — smaller blur radii under 720px */
@media (max-width: 720px) {
  :root {
    --cdc-glass-blur: 14px;
    --cdc-glass-blur-2: 10px;
    --cdc-glass-blur-3: 8px;
  }
  .g-nav { --nav-blur: 10px; }
  .g-card { padding: var(--cdc-space-6); }
}