/**
 * NCA Hub — Premium CSS Layer
 * Awwwards-level visual polish: glassmorphism, smooth hovers,
 * selection styles, scrollbar, focus rings, print, and dark mode.
 *
 * Loaded on every page via <link rel="stylesheet" href="/nca-premium.css">
 */

/* ─── Custom Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,.5); }

/* ─── Text Selection ──────────────────────────────────────── */
::selection { background: rgba(201,168,76,.25); color: #F0D878; }
::-moz-selection { background: rgba(201,168,76,.25); color: #F0D878; }

/* ─── Focus Visible — consistent gold ring ────────────────── */
:focus-visible {
  outline: 2px solid #C9A84C;
  outline-offset: 3px;
  border-radius: 3px;
}

/* ─── Glassmorphism cards ─────────────────────────────────── */
.glass {
  background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
}

/* Auto-glass on pod cards and note cards that match Awwwards feel */
.pod-card,
.note-card,
.sc2 {
  transition: transform .35s cubic-bezier(.23,1,.32,1),
              box-shadow .35s cubic-bezier(.23,1,.32,1),
              border-color .35s ease;
}

.pod-card:hover,
.note-card:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,76,.15), 0 0 40px rgba(201,168,76,.08);
}

/* ─── Link hover underline animation ─────────────────────── */
.animated-link {
  text-decoration: none;
  background-image: linear-gradient(#C9A84C, #C9A84C);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .3s ease;
}
.animated-link:hover { background-size: 100% 1px; }

/* ─── Button glow on hover ───────────────────────────────── */
.nc:hover,
.bp:hover,
.cta-primary:hover {
  box-shadow: 0 0 30px rgba(201,168,76,.4), 0 8px 20px rgba(0,0,0,.3);
}

/* ─── Art card image zoom ─────────────────────────────────── */
.art-card,
.art-grid-item,
.lg-art {
  overflow: hidden;
}

.art-card img,
.art-grid-item img,
.lg-art img {
  transition: transform .6s cubic-bezier(.23,1,.32,1);
}

.art-card:hover img,
.art-grid-item:hover img,
.lg-art:hover img {
  transform: scale(1.04);
}

/* ─── Gradient text utility ───────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #F0D878 0%, #C9A84C 40%, #9E7B30 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Noise texture on sections ───────────────────────────── */
.noise-bg {
  position: relative;
}
.noise-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}

/* ─── Horizontal rule gold glow ───────────────────────────── */
hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.3), transparent);
  margin: 2rem 0;
}

/* ─── Badge / chip component ─────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(201,168,76,.12);
  border: 1px solid rgba(201,168,76,.25);
  color: #C9A84C;
}

/* ─── Tooltip ─────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13,13,24,.95);
  color: #EDE5CE;
  font-size: .75rem;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  transform: translateX(-50%) translateY(4px);
  border: 1px solid rgba(201,168,76,.2);
  z-index: 1000;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Smooth image loading ─────────────────────────────────── */
img {
  transition: opacity .3s ease;
}
/* NOTE: Do NOT use img[loading]{opacity:0} — the loading attribute
   (loading="lazy") is a standard HTML performance attribute and
   setting opacity:0 on it hides images permanently. */

/* ─── Skip to content ─────────────────────────────────────── */
.skip-nav:focus {
  top: 0 !important;
  left: 0 !important;
  z-index: 99999;
}

/* ─── Print styles ────────────────────────────────────────── */
@media print {
  #nca-scroll-prog,
  #sfx-toggle,
  #ambient-cv,
  #trail-cv,
  [id^="nca-chat"],
  nav {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  a::after {
    content: " (" attr(href) ")";
    font-size: .8em;
    color: #555;
  }
}

/* ─── Reduced motion overrides ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .nca-letter { opacity: 1 !important; transform: none !important; }
  .nca-fade { opacity: 1 !important; transform: none !important; }
  .char { opacity: 1 !important; transform: none !important; }
}

/* ─── High contrast mode ───────────────────────────────────── */
@media (forced-colors: active) {
  .nc, .bp, .cta-primary {
    forced-color-adjust: none;
  }
}

/* ─── Split-text safety fallback ─────────────────────────── */
/* If GSAP ScrollTrigger never fires (slow JS, network, etc.)
   .char elements become visible after 2.5s via CSS animation.
   GSAP's inline opacity/transform override this immediately
   when it does run, so there is no visual conflict. */
@keyframes char-reveal {
  to { opacity: 1; transform: translateY(0) rotate(0deg); }
}
.char {
  animation: char-reveal 0.01s 2.5s forwards;
}

/* ─── Nav letter-spacing micro-animation ──────────────────── */
.nav-links a {
  transition: color .3s, letter-spacing .4s cubic-bezier(.23,1,.32,1), font-variation-settings .3s !important;
}
.nav-links a:hover {
  letter-spacing: .36em;
}

/* ─── Section eyebrow label glow ─────────────────────────── */
.ey {
  text-shadow: 0 0 20px rgba(201,168,76,.25);
}

/* ─── Deeper card hover shadows ──────────────────────────── */
.pod-card:hover,
.note-card:hover,
.art-card:hover,
.art-grid-item:hover,
.cg-card:hover,
.tool-card:hover {
  box-shadow: 0 32px 80px rgba(0,0,0,.6),
              0 0 0 1px rgba(201,168,76,.18),
              0 0 60px rgba(201,168,76,.07);
}

/* ─── Italic heading gold glow (no colour override) ────────── */
.sh em, .story-ch-head em {
  filter: drop-shadow(0 0 8px rgba(201,168,76,.4));
}

/* ─── Stat/proof number glow ─────────────────────────────── */
.psn, .bsn, .scrub-val {
  filter: drop-shadow(0 0 10px rgba(201,168,76,.5));
}

/* ─── Border shimmer on section dividers ─────────────────── */
.sec::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,168,76,.06) 15%,
    rgba(201,168,76,.18) 50%,
    rgba(201,168,76,.06) 85%,
    transparent 100%);
  margin-bottom: 0;
}

/* ─── Button inner shine (shimmer sweep) ─────────────────── */
.bp, .nc {
  position: relative;
  overflow: hidden;
}
.bp::before, .nc::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.12) 50%,
    transparent 100%
  );
  pointer-events: none;
  transition: left 0s;
}
.bp:hover::before, .nc:hover::before {
  left: 150%;
  transition: left .65s cubic-bezier(.23,1,.32,1);
}

/* ─── Pricing card gold accent on feature row ─────────────── */
.price-card .pf-item::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #C9A84C;
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(201,168,76,.6);
}

/* ─── Gold cursor ring when over headings ─────────────────── */
h1:hover, h2:hover, .split-heading:hover {
  cursor: default;
}

/* ─── View transition cross-fade ─────────────────────────── */
@supports (view-transition-name: none) {
  ::view-transition-old(root) {
    animation: nca-vt-fade-out .28s cubic-bezier(.4,0,1,1) both;
  }
  ::view-transition-new(root) {
    animation: nca-vt-fade-in .28s cubic-bezier(0,0,.2,1) both;
  }
  @keyframes nca-vt-fade-out {
    to { opacity: 0; transform: scale(.98); }
  }
  @keyframes nca-vt-fade-in {
    from { opacity: 0; transform: scale(1.01); }
  }
}