/* ════════════════════════════════════════════
   glass.css — Editorial cream × performant glassmorphism
   Loaded LAST so it overrides section backgrounds.
   Rules: see UPGRADE.md §A2.
   Real backdrop-filter: max 3 elements (nav-scroll, hero card, contact panel).
   ════════════════════════════════════════════ */

/* ── Utilities (reusable) ──────────────────── */
.fw-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-sheen);
  box-shadow: var(--glass-inset), var(--glass-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.fw-glass-real {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-sheen);
  box-shadow: var(--glass-inset), var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--blur-card));
  backdrop-filter: blur(var(--blur-card));
}

.fw-glass-dark {
  background: var(--glass-dark-bg);
  border: 1px solid var(--glass-dark-border);
  box-shadow: var(--glass-dark-inset), var(--glass-dark-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── Decorative blobs ──────────────────────── */
.fw-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.fw-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
  transform: translate3d(0,0,0);
}
.fw-blob--sienna { background: var(--blob-sienna); }
.fw-blob--sage   { background: var(--blob-sage); }
.fw-blob--coal   { background: var(--blob-coal); }

/* Default placement — overridden inline per-section if needed */
.fw-blob:nth-child(1) { width: 320px; height: 320px; top: 12%;  left: 6%; }
.fw-blob:nth-child(2) { width: 280px; height: 280px; bottom: 8%; right: 8%; }

/* ── Section containment for blob hosts ──────
   NOTE: contain is applied ONLY to sections with NO pinned
   descendants. `contain: paint/layout` creates a containing
   block for position:fixed — which breaks ScrollTrigger pinning
   (skills + projects pin their inner wrappers). */
.fw-hero-section,
.fw-chapter,
.fw-contact-section,
.fw-proj-more,
.fw-footer {
  position: relative;
  contain: layout paint style;
}
.fw-skills-section,
.fw-proj-section {
  position: relative;
}

/* Chapter-inner is the only blob host child that isn't already
   positioned — lift it so blobs stay behind the copy. */
.fw-chapter-inner {
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════
   OVERRIDES — apply glass to existing surfaces
   ════════════════════════════════════════════ */

/* ── NAV: real glass when scrolled ──
   JS toggles .is-scrolled on #navbar (main.js).
   Glass only active when scrolled — top state stays transparent. */
.fw-nav.is-scrolled {
  background: rgba(234,230,221,0.62);
  -webkit-backdrop-filter: blur(var(--blur-nav));
  backdrop-filter: blur(var(--blur-nav));
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset), 0 4px 16px rgba(21,20,15,0.05);
}
.fw-nav.is-scrolled.is-on-dark {
  background: rgba(14,14,12,0.55);
  border-bottom-color: var(--glass-dark-border);
  box-shadow: var(--glass-dark-inset);
}

/* ── NAV OVERLAY: fake glass sheen ── */
.fw-nav-overlay {
  background: rgba(234,230,221,0.92);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.fw-nav-overlay::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 15% 20%, rgba(188,75,35,0.10), transparent 60%),
    radial-gradient(50% 40% at 90% 85%, rgba(229,221,199,0.18), transparent 60%);
  pointer-events: none;
}

/* ── HERO avatar card: real glass ── */
.fw-avatar-card {
  background: rgba(255,250,240,0.62);
  -webkit-backdrop-filter: blur(var(--blur-card));
  backdrop-filter: blur(var(--blur-card));
  border-color: var(--glass-border);
  box-shadow:
    var(--glass-inset),
    0 14px 28px rgba(21,20,15,0.18),
    0 4px 8px rgba(21,20,15,0.10);
}

/* ── SKILLS plates: fake glass ──
   Sheen is a background layer, NOT a ::before — positioned
   pseudo-elements paint above static inline content and would
   wash out the plate copy. */
.fw-plate {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), transparent 40%),
    var(--glass-bg);
  border-color: var(--glass-border);
  border-top-color: var(--glass-sheen);
  box-shadow: var(--glass-inset), var(--glass-shadow);
}

/* ── STATS: subtle fake glass ── */
.fw-stat {
  background: var(--glass-bg-soft);
}
.fw-stat-content {
  position: relative;
  z-index: 1;
}

/* ── PROJECTS: glass on frame, tags, CTA, more-link ── */
.fw-proj-more {
  gap: 18px;
  flex-wrap: wrap;
}
.fw-proj-more-link--ssm {
  border-color: rgba(188,75,35,0.55);
}
.fw-proj-more-link--ssm:hover {
  background: var(--accent);
  color: #F4EFE6;
}
.fw-proj-thumb {
  border-color: var(--glass-border);
  box-shadow:
    var(--glass-inset),
    0 18px 40px rgba(21,20,15,0.08);
}
.fw-proj-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,0.10), transparent 45%);
  pointer-events: none;
  z-index: 1;
}
.fw-proj-tag {
  background: var(--glass-bg-soft);
  border-color: var(--glass-border);
}
.fw-proj-cta,
.fw-proj-more-link {
  background: var(--glass-bg-soft);
  border-color: var(--glass-border);
}
.fw-proj-cta:hover,
.fw-proj-more-link:hover {
  background: var(--glass-bg-strong);
}

/* ── CONTACT rows: dark glass ── */
.fw-contact-row {
  background: var(--glass-dark-bg);
  border: 1px solid var(--glass-dark-border);
  border-radius: 14px;
  margin-bottom: 2px;
  box-shadow: var(--glass-dark-inset);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.fw-contact-row:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
  transform: translateX(4px);
}

/* ── FOOTER columns: dark glass ── */
.fw-footer-brand,
.fw-footer-nav,
.fw-footer-connect {
  background: var(--glass-dark-bg);
  border: 1px solid var(--glass-dark-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--glass-dark-inset);
}

/* ── STYLE GUIDE swatches: light glass frame ── */
.fw-style-swatch {
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px;
  box-shadow: var(--glass-inset);
}

/* ════════════════════════════════════════════
   GATES — mobile + reduced-motion
   ════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Kill ALL real blur on mobile → GPU/battery friendly */
  .fw-nav.is-scrolled,
  .fw-avatar-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .fw-nav.is-scrolled {
    background: rgba(234,230,221,0.92);
  }
  .fw-avatar-card {
    background: rgba(255,250,240,0.92);
  }
  /* Hide blobs on mobile — no decorative GPU cost */
  .fw-blob { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fw-blob { display: none; }
  .fw-nav.is-scrolled,
  .fw-avatar-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .fw-nav.is-scrolled { background: rgba(234,230,221,0.95); }
  .fw-avatar-card { background: rgba(255,250,240,0.95); }
}