/*
 * GNAG — Liquid Glass Depth Layer  v1.0
 * Adds: layered specular highlights, volumetric shadows,
 * chromatic edge fringing, refraction caustics.
 * ─────────────────────────────────────────────────────
 * Enqueue after style.css. Works via CSS custom properties
 * already defined by gnag_glass_inline_css().
 */

/* ============================================================
   DEPTH TOKENS
   Add to :root so JS & other rules can read them.
   ============================================================ */
:root {
  /* Glass slab thickness feel (0 = flat, 1 = chunky) */
  --glass-depth:        0.75;

  /* Specular top highlight strip height */
  --glass-spec-h:       38%;

  /* Chromatic fringe tint strengths */
  --glass-chr-r:        rgba(255,80,60,  0.045);
  --glass-chr-b:        rgba(60,120,255, 0.045);
  --glass-chr-g:        rgba(80,220,140, 0.025);

  /* Caustic shimmer color */
  --glass-caustic:      rgba(201,168,76, 0.07);

  /* Bottom-edge refraction tint */
  --glass-refract:      rgba(180,140,255, 0.05);

  /* Depth shadow stack */
  --glass-shadow-near:  0 2px  6px  rgba(0,0,0, 0.35);
  --glass-shadow-mid:   0 8px  28px rgba(0,0,0, 0.55);
  --glass-shadow-far:   0 24px 64px rgba(0,0,0, 0.65);
  --glass-shadow-xl:    0 40px 96px rgba(0,0,0, 0.70);
}


/* ============================================================
   UTILITY: .glass-depth-base
   Shared foundation applied to all enhanced glass surfaces.
   ============================================================ */
.glass-depth-base,
#gnag-header,
.gnag-avatar-dropdown,
.btn-glass,
.gnag-search-expand-inner,
.gnag-mobile-menu {
  /* GPU-composite the blur layer so ::before/::after sit above */
  transform: translateZ(0);
  will-change: transform;
  isolation: isolate;
  position: relative;          /* anchor pseudo-elements */
}


/* ============================================================
   HEADER — Layered glass slab
   ::before = iridescent specular sweep (already exists, enhanced)
   ::after  = bottom-edge refraction caustic
   ============================================================ */
#gnag-header::before {
  background: linear-gradient(
    108deg,
    rgba(201,168,76,  0.045) 0%,
    rgba(100,160,255, 0.055) 28%,
    rgba(255,100,140, 0.04)  55%,
    rgba(80, 220,140, 0.03)  75%,
    rgba(201,168,76,  0.03)  100%
  );
  animation: gnagHeaderSheen 9s ease-in-out infinite alternate;
}

@keyframes gnagHeaderSheen {
  0%   { opacity: 0.6; background-position: 0% 50%;   transform: skewX(0deg); }
  50%  { opacity: 1.0; background-position: 100% 50%; }
  100% { opacity: 0.7; background-position: 60% 50%;  transform: skewX(.4deg); }
}

/* Bottom-edge caustic leak — simulates light bending out the base */
#gnag-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 5%; right: 5%;
  height: 2px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--glass-caustic) 30%,
    rgba(201,168,76, 0.12) 50%,
    var(--glass-caustic) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
  filter: blur(1.5px);
  opacity: 0.9;
}


/* ============================================================
   BTN-GLASS — Multi-layer specular depth
   Layer 1 (::before): top specular strip — simulates convex glass
   Layer 2 (::after):  bottom refraction shadow + edge fringe
   ============================================================ */
.btn-glass {
  overflow: hidden;   /* clip the pseudo sheen to button shape */
}

/* Top specular strip — convex lens highlight */
.btn-glass::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--glass-spec-h);
  background: linear-gradient(
    180deg,
    rgba(255,255,255, 0.16) 0%,
    rgba(255,255,255, 0.06) 60%,
    transparent             100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Bottom refraction + chromatic fringe */
.btn-glass::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(
    0deg,
    var(--glass-chr-b) 0%,
    var(--glass-refract) 40%,
    transparent         100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

/* Deeper shadow stack on hover */
.btn-glass:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255, 0.22) !important,
    inset 0 -1px  0 rgba(0,0,0, 0.18),
    var(--glass-shadow-near),
    0 0 0 1px rgba(201,168,76, 0.09),
    0 12px 32px rgba(201,168,76, 0.08) !important;
  transform: translateY(-2px) scale(1.015);
}

/* Active — pressed-in feel, invert depth */
.btn-glass:active {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0, 0.28),
    inset 0 1px 0 rgba(255,255,255, 0.08) !important;
  transition: transform 80ms ease, box-shadow 80ms ease !important;
}


/* ============================================================
   SEARCH PILL — Edge glow depth
   ============================================================ */
.gnag-search-expand-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255, 0.10) 0%,
    transparent 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.gnag-search-expand-inner:focus-within {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255, 0.20),
    inset 0 -1px 0 rgba(0,0,0, 0.15),
    0 0 0 1px rgba(201,168,76, 0.22),
    0 4px 20px rgba(201,168,76, 0.10),
    0 8px 32px rgba(0,0,0, 0.40) !important;
}


/* ============================================================
   ACCOUNT DROPDOWN — Elevated glass panel
   ============================================================ */
.gnag-avatar-dropdown {
  /* Thicker glass: stronger blur + layered inner glow */
  backdrop-filter: blur(40px) saturate(200%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.06) !important;

  box-shadow:
    inset 0  1px 0 rgba(255,255,255, 0.13),
    inset 0 -1px 0 rgba(0,0,0, 0.22),
    inset 1px 0  0 rgba(255,255,255, 0.04),
    inset -1px 0 0 rgba(0,0,0, 0.10),
    0 8px  32px rgba(0,0,0, 0.60),
    0 24px 64px rgba(0,0,0, 0.50),
    0 0   0 1px rgba(255,255,255, 0.05) !important;

  /* Specular top-edge glow */
  border-top-color: rgba(255,255,255, 0.22) !important;
  border-bottom-color: rgba(0,0,0, 0.20) !important;
}

/* Inner caustic glow top-left */
.gnag-avatar-dropdown::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(
    145deg,
    rgba(201,168,76, 0.06) 0%,
    rgba(100,160,255,0.04) 40%,
    transparent 70%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

/* Bottom-edge exit caustic */
.gnag-avatar-dropdown::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201,168,76, 0.15) 40%,
    rgba(100,160,255, 0.12) 60%,
    transparent
  );
  border-radius: 0 0 50% 50%;
  pointer-events: none;
  filter: blur(1px);
}


/* ============================================================
   MOBILE MENU — Full depth glass panel
   ============================================================ */
.gnag-mobile-menu {
  backdrop-filter: blur(40px) saturate(220%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.05) !important;

  box-shadow:
    inset 1px 0 0 rgba(255,255,255, 0.08),
    8px 0 64px rgba(0,0,0, 0.60),
    24px 0 96px rgba(0,0,0, 0.45) !important;

  border-right: 1px solid rgba(255,255,255, 0.10) !important;
}

/* Left-edge specular strip on slide-out menu */
.gnag-mobile-menu::before {
  content: '';
  position: absolute;
  top: 10%; bottom: 10%;
  left: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(201,168,76, 0.20) 30%,
    rgba(100,160,255, 0.15) 60%,
    transparent
  );
  border-radius: 2px;
  pointer-events: none;
  filter: blur(1px);
}


/* ============================================================
   NAV LINKS — Glass hover pill with depth
   ============================================================ */
.gnag-nav-link {
  position: relative;
}

.gnag-nav-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: .5rem;
  background: rgba(255,255,255, 0);
  box-shadow: none;
  transition: background .25s ease, box-shadow .25s ease;
  z-index: -1;
}

.gnag-nav-link:hover::after,
.gnag-nav-link.active::after {
  background: rgba(255,255,255, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255, 0.12),
    inset 0 -1px 0 rgba(0,0,0, 0.10),
    0 4px 16px rgba(0,0,0, 0.25);
}


/* ============================================================
   SECTION PANELS — ambient glass depth
   (any .section with a visible bg-alt or card background)
   ============================================================ */
.gnag-glass-panel {
  position: relative;
  background: rgba(12, 4, 6, var(--glass-bg-opacity, 0.45));
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(var(--glass-sat, 200%));
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(var(--glass-sat, 200%));
  border: 1px solid rgba(255,255,255, var(--glass-border-opacity, 0.09));
  border-radius: var(--r);
  isolation: isolate;

  box-shadow:
    inset 0  1px 0   rgba(255,255,255, 0.12),
    inset 0 -1px 0   rgba(0,0,0, 0.18),
    inset 1px  0 0   rgba(255,255,255, 0.04),
    inset -1px 0 0   rgba(0,0,0, 0.12),
    var(--glass-shadow-mid),
    var(--glass-shadow-far);
}

/* Specular face highlight */
.gnag-glass-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(
    160deg,
    rgba(255,255,255, 0.09) 0%,
    rgba(255,255,255, 0.03) 50%,
    transparent 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

/* Bottom caustic exit */
.gnag-glass-panel::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 15%; right: 15%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201,168,76, 0.12) 35%,
    rgba(100,160,255, 0.10) 65%,
    transparent
  );
  filter: blur(1.5px);
  pointer-events: none;
}


/* ============================================================
   STATS BAR — frosted depth strip
   ============================================================ */
.stats-bar {
  position: relative;
  overflow: hidden;
}

.stats-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255, 0.12) 30%,
    rgba(201,168,76, 0.18) 50%,
    rgba(255,255,255, 0.12) 70%,
    transparent 100%
  );
}

.stats-bar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0, 0.30) 40%,
    rgba(0,0,0, 0.20) 60%,
    transparent 100%
  );
}


/* ============================================================
   PRODUCT CARD INNER — Glass info panel at bottom
   ============================================================ */
.product-card-body,
.pc-body {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--card) 0%,
    rgba(18, 6, 8, 0.98) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255,255,255, 0.05);
}


/* ============================================================
   HERO CTA BUTTONS — Extra depth on gold button
   ============================================================ */
.btn-gold {
  position: relative;
  overflow: hidden;
}

.btn-gold::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255, 0.22) 0%,
    transparent 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.btn-gold::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(
    0deg,
    rgba(0,0,0, 0.18) 0%,
    transparent 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.btn-gold:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255, 0.28),
    0 8px 28px rgba(201,168,76, 0.40),
    0 16px 48px rgba(201,168,76, 0.18),
    0 2px 6px rgba(0,0,0, 0.30) !important;
}


/* ============================================================
   SCROLLBAR — Glass depth styling
   ============================================================ */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track {
  background: rgba(12,4,6, 0.6);
  backdrop-filter: blur(8px);
}
::-webkit-scrollbar-thumb {
  background: rgba(201,168,76, 0.22);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255, 0.15);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(201,168,76, 0.38);
}


/* ============================================================
   FOCUS RINGS — Glass-aware focus
   ============================================================ */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(201,168,76, 0.50),
    0 0 12px rgba(201,168,76, 0.20) !important;
}