/* ============================================================
   shared.css — v2.5 premium primitives
   ============================================================
   E1 .premium-glass (liquid-glass XOR-mask border)
   E2 .bg-grid-lines (vertical 25/50/75 overlays)
   E3 .bg-center-glow (atmospheric ellipse)
   E6 .section-divider (classified-document intercept)
   ============================================================ */

/* ---------- E1: Liquid-glass XOR-mask border ---------- */
.premium-glass {
  position: relative;
  background-color: rgba(255,255,255,0.012);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08);
}
.premium-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.4px;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.28) 0%,
    rgba(255,255,255,0.06) 45%,
    rgba(255,255,255,0.015) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
/* Let premium-glass children float above the border layer */
.premium-glass > * { position: relative; z-index: 2; }

/* ---------- E2: Vertical grid lines at 25/50/75% ---------- */
.bg-grid-lines {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px);
  background-size: 25% 100%;
  background-position: 25% 0;
}
@media (max-width: 768px) { .bg-grid-lines { display: none; } }

/* ---------- E3: Atmospheric center-top glow ---------- */
.bg-center-glow {
  position: absolute;
  left: 50%; top: 15%;
  width: 900px; height: 280px;
  transform: translate3d(-50%, 0, 0);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,255,136,0.14) 0%, rgba(0,255,136,0) 70%);
  filter: blur(60px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
/* Parallax hook — written by rAF scroll listener as --scroll (px) */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .bg-center-glow {
    transform: translate3d(-50%, calc(var(--scroll, 0px) * -0.3), 0);
  }
}
@media (max-width: 768px) {
  .bg-center-glow { width: 600px; height: 180px; filter: blur(40px); }
}

/* ---------- E6: Classified-document section dividers ---------- */
.section-divider {
  position: relative;
  max-width: 1320px;
  margin: 80px auto 0;
  padding: 0 24px;
  height: 22px;
  z-index: 1;
}
.section-divider__line {
  position: absolute;
  left: 10%; right: 10%;
  top: 50%;
  height: 1px;
  background: rgba(0,255,255,0.25);
}
.section-divider__tag {
  position: absolute;
  left: 15%;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 12px;
  background: rgba(10,10,15,0.95);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: var(--text-glow-cyan);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .section-divider__line { left: 5%; right: 5%; }
  .section-divider__tag  { left: 8%; font-size: 10px; letter-spacing: 0.12em; }
}