/* MetaOS — Shared Animation + Glow Layer
   Full coverage. Placed after per-page inline styles via </head> link.
   Every surface that has a face gets treated. */

/* ══ KEYFRAMES ══════════════════════════════════════════════ */

@keyframes cardBreathBlue {
  0%, 100% { box-shadow: 0 0 22px rgba(59,164,255,0.09), 0 0 0 1px rgba(59,164,255,0.05); }
  50%       { box-shadow: 0 0 44px rgba(59,164,255,0.20), 0 0 0 1px rgba(59,164,255,0.13); }
}

@keyframes labelPulseBlue {
  0%, 100% { text-shadow: 0 0 12px rgba(59,164,255,0.55); opacity: 0.88; }
  50%       { text-shadow: 0 0 28px rgba(59,164,255,0.98), 0 0 52px rgba(59,164,255,0.32); opacity: 1; }
}

@keyframes dividerShimmerBlue {
  0%   { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

/* ══ BODY ATMOSPHERE — distributed bloom + orbital geometry (replaces grid) ══ */
body {
  background: var(--bg, #020407) !important;
  position: relative;
}

/* Body atmosphere removed — sections stay clean black / off-black, glow only on cards / dividers / hero / em / labels. */

/* ══ MANDALA HERO — universal mask + spin so every page hero blends and rotates consistently ══ */
@keyframes mandalaRotateShared {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes heroGlowShared {
  0%   { opacity: 0.32; filter: brightness(0.95); }
  100% { opacity: 0.50; filter: brightness(1.10); }
}
.hero::before {
  -webkit-mask-image: radial-gradient(circle, #000 38%, rgba(0,0,0,0.55) 58%, transparent 78%) !important;
  mask-image: radial-gradient(circle, #000 38%, rgba(0,0,0,0.55) 58%, transparent 78%) !important;
  animation: heroGlowShared 8s ease-in-out infinite alternate, mandalaRotateShared 140s linear infinite !important;
}

/* ══ NAV — permanent glow ════════════════════════════════════ */
.nav {
  border-bottom: 1px solid rgba(59,164,255,0.25) !important;
  box-shadow: 0 2px 48px rgba(59,164,255,0.10) !important;
}
.btn-nav {
  box-shadow: 0 0 20px rgba(59,164,255,0.25);
}
.btn-nav:hover {
  box-shadow: 0 0 40px rgba(59,164,255,0.50);
}

/* ══ SECTION LABEL — pulse ═══════════════════════════════════ */
.section-label,
.page-hero-label,
.intel-eyebrow {
  color: var(--accent) !important;
  opacity: 0.9 !important;
  text-shadow: 0 0 14px rgba(59,164,255,0.60) !important;
  animation: labelPulseBlue 4s ease-in-out infinite;
}

/* ══ SECTION DIVIDER — full-width hairline with bright middle + shimmer ═══
   Using background-image (not the shorthand) so the !important + shorthand
   reset edge case can't kill background-size on some browsers. */
section + section::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: transparent !important;
  background-image: linear-gradient(90deg, rgba(59,164,255,0.06), rgba(59,164,255,0.14) 20%, rgba(59,164,255,0.70) 50%, rgba(59,164,255,0.14) 80%, rgba(59,164,255,0.06)) !important;
  background-size: 200% 1px !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 0;
  left: 0;
  transform: none !important;
  pointer-events: none;
  animation: dividerShimmerBlue 5s ease-in-out infinite alternate !important;
}

/* ══ BUTTONS — permanent glow ════════════════════════════════ */
.btn-primary,
.btn {
  box-shadow: 0 0 28px rgba(59,164,255,0.32);
  transition: background 0.2s, box-shadow 0.2s !important;
}
.btn-primary:hover,
.btn:hover {
  box-shadow: 0 0 55px rgba(59,164,255,0.60), 0 0 90px rgba(59,164,255,0.22);
}

/* ══ PATH CARDS ═══════════════════════════════════════════════ */
.path-card {
  background: var(--bg-section, #091220);
  border: 1px solid rgba(59,164,255,0.12);
  border-top: 2px solid var(--accent);
  box-shadow: 0 0 22px rgba(59,164,255,0.09), 0 0 0 1px rgba(59,164,255,0.05);
  animation: cardBreathBlue 6s ease-in-out infinite;
  transition: box-shadow 0.35s, border-color 0.35s;
}
.path-card:not(.featured) {
  box-shadow: 0 0 22px rgba(59,164,255,0.09), 0 0 0 1px rgba(59,164,255,0.05);
}
.path-card:hover,
.path-card:not(.featured):hover {
  border-color: rgba(59,164,255,0.32);
  box-shadow: 0 0 55px rgba(59,164,255,0.26), 0 0 0 1px rgba(59,164,255,0.16), inset 0 0 50px rgba(59,164,255,0.05);
  animation-play-state: paused;
}
.path-card.featured {
  border-top: 2px solid var(--accent);
  border-color: rgba(59,164,255,0.25);
  box-shadow: 0 0 36px rgba(59,164,255,0.16), 0 0 0 1px rgba(59,164,255,0.12);
}

/* ══ PROBLEM CELLS ════════════════════════════════════════════ */
.problem-cell {
  border-top: 2px solid rgba(59,164,255,0.50) !important;
  border-left: none !important;
  box-shadow: 0 0 22px rgba(59,164,255,0.08), 0 0 0 1px rgba(59,164,255,0.04);
  animation: cardBreathBlue 5s ease-in-out infinite;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.problem-cell:hover {
  border-top-color: var(--accent) !important;
  box-shadow: 0 0 45px rgba(59,164,255,0.22), inset 0 0 50px rgba(59,164,255,0.06);
  animation-play-state: paused;
}

/* ══ PILLAR CARDS ═════════════════════════════════════════════ */
.pillar-card {
  background: var(--bg-section, #091220);
  border: 1px solid rgba(59,164,255,0.10) !important;
  border-top: 2px solid var(--accent) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 22px rgba(59,164,255,0.09), 0 0 0 1px rgba(59,164,255,0.05);
  animation: cardBreathBlue 6s ease-in-out infinite;
  transition: box-shadow 0.35s, border-color 0.35s !important;
}
.pillar-card:hover {
  border-color: rgba(59,164,255,0.30) !important;
  box-shadow: 0 0 55px rgba(59,164,255,0.24), 0 0 0 1px rgba(59,164,255,0.14), inset 0 0 50px rgba(59,164,255,0.05);
  animation-play-state: paused;
}
.sec-alt .pillar-card { background: var(--bg, #020407); }

/* ══ LAYER CARDS ══════════════════════════════════════════════ */
.layer-card {
  background: var(--bg, #020407);
  border-top: 2px solid rgba(59,164,255,0.45);
  box-shadow: 0 0 20px rgba(59,164,255,0.08), 0 0 0 1px rgba(59,164,255,0.04);
  animation: cardBreathBlue 5s ease-in-out infinite;
  transition: box-shadow 0.35s, border-color 0.35s;
}
.layer-card:hover {
  border-top-color: var(--accent);
  box-shadow: 0 0 45px rgba(59,164,255,0.22), inset 0 0 50px rgba(59,164,255,0.05);
  animation-play-state: paused;
}
.sec-alt .layer-card { background: var(--bg-section, #091220); }

/* ══ JOIN BLOCK ═══════════════════════════════════════════════ */
.join-block {
  border: 1px solid rgba(59,164,255,0.18) !important;
  border-top: 2px solid var(--accent) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 32px rgba(59,164,255,0.12), 0 0 0 1px rgba(59,164,255,0.07);
  animation: cardBreathBlue 7s ease-in-out infinite;
  transition: box-shadow 0.35s !important;
}
.join-block:hover {
  box-shadow: 0 0 55px rgba(59,164,255,0.22), 0 0 0 1px rgba(59,164,255,0.14);
  animation-play-state: paused;
}

/* ══ FOR LIST ═════════════════════════════════════════════════ */
.for-list li {
  border-left: 2px solid rgba(59,164,255,0.35) !important;
  box-shadow: inset 5px 0 20px rgba(59,164,255,0.08);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.for-list li:hover {
  border-left-color: var(--accent) !important;
  background: rgba(59,164,255,0.05) !important;
  box-shadow: inset 5px 0 32px rgba(59,164,255,0.15), inset 0 0 50px rgba(59,164,255,0.04);
}

/* ══ WHAT LIST ════════════════════════════════════════════════ */
.what-list li {
  border-left: 2px solid rgba(59,164,255,0.20);
  box-shadow: inset 4px 0 16px rgba(59,164,255,0.06);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.what-list li:hover {
  border-left-color: rgba(59,164,255,0.50);
  box-shadow: inset 4px 0 28px rgba(59,164,255,0.13);
}

/* ══ TESTIMONIAL CARDS ════════════════════════════════════════ */
.testimonial-card {
  border-top: 1px solid rgba(59,164,255,0.25) !important;
  box-shadow: 0 0 20px rgba(59,164,255,0.08), 0 0 0 1px rgba(59,164,255,0.04);
  animation: cardBreathBlue 6s ease-in-out infinite;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.testimonial-card:hover {
  border-top-color: rgba(59,164,255,0.55) !important;
  box-shadow: 0 0 42px rgba(59,164,255,0.20), 0 0 0 1px rgba(59,164,255,0.12);
  animation-play-state: paused;
}

/* ══ POST CARDS (intel hub) ═══════════════════════════════════ */
.post-card {
  border: 1px solid rgba(59,164,255,0.12) !important;
  border-top: 2px solid rgba(59,164,255,0.45) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 18px rgba(59,164,255,0.07);
  transition: border-color 0.25s, box-shadow 0.25s !important;
}
.post-card:hover {
  border-color: rgba(59,164,255,0.28) !important;
  border-top-color: var(--accent) !important;
  box-shadow: 0 0 40px rgba(59,164,255,0.18);
}

/* ══ GRID CELL (various pages) ════════════════════════════════ */
.grid-cell {
  background: var(--bg-section, #091220);
  border: 1px solid rgba(59,164,255,0.10);
  border-top: 2px solid var(--accent);
  box-shadow: 0 0 20px rgba(59,164,255,0.08), 0 0 0 1px rgba(59,164,255,0.05);
  animation: cardBreathBlue 5s ease-in-out infinite;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.grid-cell:hover {
  border-color: rgba(59,164,255,0.28);
  box-shadow: 0 0 45px rgba(59,164,255,0.22), 0 0 0 1px rgba(59,164,255,0.14);
  animation-play-state: paused;
}
.sec-alt .grid-cell { background: var(--bg, #020407); }

/* ══ HERO SECTION — richer atmosphere ════════════════════════ */
.hero::before {
  opacity: 0.72 !important;
}

/* ══════════════════════════════════════════════════════════════
   ALL-IN VISUAL LAYER — 2026-05-13 part 9 (sibling pass with Metaplexus)
   CTA box pattern, depth atmosphere, card highlights, footer edge
   ══════════════════════════════════════════════════════════════ */

/* ══ CTA BOX — dark inset on sec-alt, accent border-top, breathing glow ══ */
.cta-section { position: relative; }
.cta-box {
  position: relative;
  background: var(--bg, #020407);
  border: 1px solid rgba(59,164,255,0.20) !important;
  border-top: 2px solid var(--accent) !important;
  padding: 64px 56px 60px;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
  box-shadow: 0 0 38px rgba(59,164,255,0.18), 0 0 0 1px rgba(59,164,255,0.08);
  animation: cardBreathBlue 7s ease-in-out infinite;
  transition: box-shadow 0.35s, border-color 0.35s !important;
}
.cta-box:hover {
  box-shadow: 0 0 70px rgba(59,164,255,0.30), 0 0 0 1px rgba(59,164,255,0.20);
  animation-play-state: paused;
}
.cta-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  pointer-events: none;
}
.cta-box .cta-eyebrow { margin-bottom: 18px; }
.cta-box .cta-headline { margin-bottom: 14px; }
.cta-box .cta-body { margin: 0 auto 32px; max-width: 520px; }
.sec-alt .cta-box { background: var(--bg, #020407); }

/* ══ DEPTH: card top inner highlight (raised feel) ══════════════════════ */
.path-card,
.grid-cell,
.testimonial-card,
.pillar-card,
.layer-card,
.problem-cell,
.post-card {
  position: relative;
}
.path-card::after,
.grid-cell::after,
.testimonial-card::after,
.pillar-card::after,
.layer-card::after,
.problem-cell::after,
.post-card::after {
  content: '';
  position: absolute;
  top: 2px; left: 1px; right: 1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ══ sec-alt: clean container, no top atmosphere overlay ══════════════ */
.sec-alt { position: relative; }
.sec-alt .container { position: relative; z-index: 1; }

/* ══ Footer: neutral border, no glow line ══════════════════════════════ */
footer {
  position: relative;
}

/* ══ DEPTH: closing-CTA headline em-bloom (push to ARIS levels) ═════════ */
.cta-headline em,
.page-hero-headline em {
  text-shadow: 0 0 18px rgba(59,164,255,0.7), 0 0 48px rgba(59,164,255,0.2) !important;
}

/* ══ Z-INDEX: nav stays above body atmosphere ══ */
.nav { z-index: 100; }

/* ══════════════════════════════════════════════════════════════
   MOBILE BREATHING ROOM — bump section padding on small viewports
   Cascades AFTER per-page inline styles, so the section rule wins.
   .cta-section / .final-cta keep their own padding (higher specificity).
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  section { padding: 76px 0; }
}
@media (max-width: 480px) {
  section { padding: 64px 0; }
}

/* ══════════════════════════════════════════════════════════════
   HERO FIT-TO-SCREEN ABOVE STICKY CTA (home pages)
   With the sticky CTA fixed at bottom, the hero bottom was hiding
   behind it. Snap the bottom to the top of the sticky bar.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.has-sticky-cta .hero { min-height: calc(100dvh - 100px) !important; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE STICKY CTA — pill-style with glow (overrides inline per-page)
   ══════════════════════════════════════════════════════════════ */
.mobile-sticky-cta { padding: 10px 16px max(22px, env(safe-area-inset-bottom)) !important; }
.mobile-sticky-cta-btn {
  padding: 12px 18px !important;
  border-radius: 6px !important;
  box-shadow: 0 0 24px rgba(59,164,255,0.50), 0 0 48px rgba(59,164,255,0.18) !important;
}
.mobile-sticky-cta-btn.secondary {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid rgba(59,164,255,0.35) !important;
  box-shadow: 0 0 18px rgba(59,164,255,0.20) !important;
}
.mobile-sticky-cta-btn.secondary:hover,
.mobile-sticky-cta-btn.secondary:active {
  background: rgba(59,164,255,0.06) !important;
  border-color: rgba(59,164,255,0.55) !important;
  box-shadow: 0 0 28px rgba(59,164,255,0.35) !important;
  color: var(--accent) !important;
}
@media (max-width: 768px) {
  .mobile-sticky-cta { display: flex !important; gap: 14px !important; }
  body.has-sticky-cta { padding-bottom: 100px !important; }
}

/* ══════════════════════════════════════════════════════════════
   DESIGN FURNITURE — compass / blueprint layer (MetaOS)
   Straight ticks, coordinate marks, measurement scale. Static.
   Sibling rule: same slots as Metaplexus, varied shape (ticks vs curves).
   ══════════════════════════════════════════════════════════════ */

/* Hero corner anchors — perpendicular L-ticks + faint blueprint hash */
.hero,
.page-hero {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M0 18 L0 0 L18 0' fill='none' stroke='%233BA4FF' stroke-width='1.5' opacity='0.55'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M62 0 L80 0 L80 18' fill='none' stroke='%233BA4FF' stroke-width='1.5' opacity='0.55'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M0 62 L0 80 L18 80' fill='none' stroke='%233BA4FF' stroke-width='1.5' opacity='0.55'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M62 80 L80 80 L80 62' fill='none' stroke='%233BA4FF' stroke-width='1.5' opacity='0.55'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='200' viewBox='0 0 600 200'><g fill='none' stroke='%233BA4FF' stroke-width='0.9' opacity='0.22'><line x1='0' y1='100' x2='600' y2='100'/><line x1='60' y1='94' x2='60' y2='106'/><line x1='120' y1='94' x2='120' y2='106'/><line x1='180' y1='94' x2='180' y2='106'/><line x1='240' y1='94' x2='240' y2='106'/><line x1='300' y1='90' x2='300' y2='110'/><line x1='360' y1='94' x2='360' y2='106'/><line x1='420' y1='94' x2='420' y2='106'/><line x1='480' y1='94' x2='480' y2='106'/><line x1='540' y1='94' x2='540' y2='106'/></g></svg>") !important;
  background-position:
    12px 80px,
    calc(100% - 12px) 80px,
    12px calc(100% - 20px),
    calc(100% - 12px) calc(100% - 20px),
    center 80% !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-size: 44px 44px, 44px 44px, 44px 44px, 44px 44px, min(600px, 90%) 200px !important;
}

/* Eyebrow horizontal bar removed — Adam flagged it as reading like an em dash before labels */

/* Section divider augment — three vertical ticks above shimmer */
section + section::after {
  content: '';
  display: block;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 10px;
  background-color: var(--accent);
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'><line x1='6' y1='4' x2='6' y2='10' stroke='black' stroke-width='1'/><line x1='16' y1='2' x2='16' y2='10' stroke='black' stroke-width='1'/><line x1='26' y1='4' x2='26' y2='10' stroke='black' stroke-width='1'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'><line x1='6' y1='4' x2='6' y2='10' stroke='black' stroke-width='1'/><line x1='16' y1='2' x2='16' y2='10' stroke='black' stroke-width='1'/><line x1='26' y1='4' x2='26' y2='10' stroke='black' stroke-width='1'/></svg>") no-repeat center / contain;
  pointer-events: none;
}

/* Card edge ticks — short marks at midpoints of top/bottom/left/right */
.path-card::before,
.grid-cell::before,
.testimonial-card::before,
.pillar-card::before,
.layer-card::before,
.problem-cell::before,
.post-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='4' viewBox='0 0 10 4'><line x1='5' y1='0' x2='5' y2='4' stroke='%233BA4FF' stroke-width='1.3' opacity='0.55'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='4' viewBox='0 0 10 4'><line x1='5' y1='0' x2='5' y2='4' stroke='%233BA4FF' stroke-width='1.3' opacity='0.55'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='10' viewBox='0 0 4 10'><line x1='0' y1='5' x2='4' y2='5' stroke='%233BA4FF' stroke-width='1.3' opacity='0.55'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='10' viewBox='0 0 4 10'><line x1='0' y1='5' x2='4' y2='5' stroke='%233BA4FF' stroke-width='1.3' opacity='0.55'/></svg>");
  background-position: 50% 0, 50% 100%, 0 50%, 100% 50%;
  background-repeat: no-repeat;
  background-size: 10px 4px, 10px 4px, 4px 10px, 4px 10px;
}

/* ══ REDUCED MOTION ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .path-card,
  .problem-cell,
  .pillar-card,
  .layer-card,
  .join-block,
  .testimonial-card,
  .grid-cell,
  .cta-box,
  .section-label,
  .page-hero-label,
  .intel-eyebrow {
    animation: none;
  }
  section + section::before { animation: none; }
}