/**
 * 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: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(201,168,76,.4), rgba(201,168,76,.2));
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(201,168,76,.3);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(201,168,76,.65), rgba(201,168,76,.4)); }

/* ─── 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 1s via CSS animation.
   GSAP's inline opacity/transform override this immediately
   when it does run, so there is no visual conflict. */
@keyframes char-reveal {
  from { opacity: 0; transform: translateY(10px) rotate(-5deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0deg); }
}
.char {
  opacity: 0;
  transform: translateY(10px) rotate(-5deg);
  animation: char-reveal 0.01s 1s forwards;
}

/* ─── Hero content CSS fallback ──────────────────────────── */
/* .li elements start at translateY(112%) in CSS and are clipped
   by .lm{overflow:hidden}. If revealHero() never fires (preloader
   stuck, GSAP fails), these CSS animations make them visible.
   GSAP inline transforms override immediately when it runs. */
@keyframes li-reveal {
  to { transform: translateY(0); }
}
@keyframes hero-fade-in {
  to { opacity: 1; transform: none; }
}
.lm .li {
  animation: li-reveal 0.4s 2s cubic-bezier(.16,1,.3,1) forwards;
}
.hsub {
  animation: hero-fade-in 0.4s 2.2s ease-out forwards;
}
.hact {
  animation: hero-fade-in 0.4s 2.4s ease-out forwards;
}
.hcard {
  animation: hero-fade-in 0.4s 2s ease-out forwards;
}
.h-auth {
  animation: hero-fade-in 0.4s 2.6s ease-out 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 + lift ───────────────────── */
.pod-card:hover,
.note-card:hover,
.art-card:hover,
.art-grid-item:hover,
.cg-card:hover,
.tool-card:hover {
  transform: translateY(-4px);
  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 gradient text ─────────────────── */
.sh em, .story-ch-head em {
  background: linear-gradient(135deg, #F0D878 0%, #C9A84C 60%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #C9A84C; /* fallback if gradient-text unsupported */
}

/* ─── Stat/proof numbers — gold gradient text ────────────── */
.psn, .bsn, .scrub-val {
  background: linear-gradient(180deg, #F0D878 0%, #C9A84C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #C9A84C; /* fallback */
  filter: drop-shadow(0 2px 16px rgba(201,168,76,.35));
}

/* ─── 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); }
  }
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM 3D VISUAL UPGRADES — Phase 4 Enhancement Layer
   ═══════════════════════════════════════════════════════════════ */

/* ─── 3D Hero text depth shadow ───────────────────────────── */
.hh1, .sh, .story-ch-head {
  text-shadow:
    0 1px 0 rgba(0,0,0,.4),
    0 2px 0 rgba(0,0,0,.3),
    0 4px 12px rgba(0,0,0,.25);
}
.hh1 em, .sh em {
  text-shadow:
    0 0 40px rgba(201,168,76,.35),
    0 2px 8px rgba(0,0,0,.4);
}

/* ─── Volumetric card depth on hover ──────────────────────── */
.mc:hover {
  border-color: rgba(201,168,76,.28) !important;
  box-shadow:
    0 0 0 1px rgba(201,168,76,.12),
    0 8px 40px rgba(0,0,0,.6),
    0 0 60px rgba(201,168,76,.07),
    inset 0 0 30px rgba(201,168,76,.03);
}
.pc:hover {
  box-shadow:
    0 0 0 1px rgba(201,168,76,.22),
    0 20px 60px rgba(0,0,0,.7),
    0 0 80px rgba(201,168,76,.10) !important;
}
.sc2:hover {
  border-color: rgba(201,168,76,.35) !important;
  box-shadow:
    0 0 0 1px rgba(201,168,76,.12),
    0 12px 50px rgba(0,0,0,.65),
    0 0 50px rgba(201,168,76,.06);
}

/* ─── Gold text shimmer on section eyes ───────────────────── */
@keyframes gold-shimmer-text {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.ey {
  background: linear-gradient(
    90deg,
    rgba(201,168,76,.6) 0%,
    rgba(240,216,120,1) 30%,
    rgba(201,168,76,.8) 50%,
    rgba(158,123,48,1)  70%,
    rgba(201,168,76,.6) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gold-shimmer-text 4s linear infinite;
}

/* ─── 3D floating hero card enhancement ──────────────────── */
.hcard {
  transform-origin: center center;
}
@keyframes float-card {
  0%, 100% { transform: translateY(0px) rotateX(0deg);   }
  33%       { transform: translateY(-8px) rotateX(1.2deg); }
  66%       { transform: translateY(-4px) rotateX(-0.6deg); }
}
.hcard:not(:hover) {
  animation: float-card 7s ease-in-out infinite;
}

/* ─── Glowing border pulse on primary CTA ─────────────────── */
@keyframes cta-pulse-border {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,.0),  0 4px 20px rgba(0,0,0,.3); }
  50%       { box-shadow: 0 0 0 6px rgba(201,168,76,.18), 0 4px 20px rgba(0,0,0,.3); }
}
/* Periodic gold sweep on the button's shine pseudo-element */
@keyframes shimmer {
  0%, 80%, 100% { opacity: 0; left: -100%; }
  82%            { opacity: 0; }
  88%            { opacity: 1; left: 60%; }
  92%            { opacity: 0; left: 160%; }
}
.bp {
  animation: cta-pulse-border 3.5s ease-in-out infinite !important;
}
.bp::before {
  animation: shimmer 8s ease infinite;
}

/* ─── Story chapter: gold accent number 3D depth ─────────── */
.spn {
  text-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* ─── Hero canvas depth blur (far particles appear softer) ── */
#hcv { filter: blur(0px); }  /* baseline — JS adds blur to layers via CSS var */

/* ─── Magnetic button 3D press feel ───────────────────────── */
.bp:active, .nc:active {
  transform: translateY(2px) scale(.98);
  box-shadow: 0 2px 10px rgba(0,0,0,.4), 0 0 15px rgba(201,168,76,.2) !important;
  transition: transform .08s, box-shadow .08s !important;
}

/* ─── Noise texture enhanced ──────────────────────────────── */
.story-chapter, .msc, .csc, .subsc, .prf {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* ─── CSS containment for rendering isolation ─────────────── */
.pod-card, .sc2, .mc, .pc, .tool-card, .cg-card, .art-card {
  contain: layout style paint;
}

/* ─── Reduce motion overrides for new animations ──────────── */
@media (prefers-reduced-motion: reduce) {
  .hcard:not(:hover), .bp, .ey { animation: none !important; }
  .tilt-specular { display: none !important; }
}