/* Swirling fog overlay (2 layers) */
body::before{
  content:"";
  position:fixed;
  inset:-15%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 700px at 30% 30%, rgba(185,166,255,.12), transparent 60%),
    radial-gradient(1000px 620px at 70% 60%, rgba(124,58,237,.18), transparent 62%),
    radial-gradient(900px 540px at 50% 85%, rgba(242,167,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%, rgba(255,255,255,0.03));
  filter:blur(14px);
  opacity:.95;
  mix-blend-mode:screen;
  transform-origin:50% 50%;
  animation:fog-swirl-main 48s linear infinite;
}
body::after{
  content:"";
  position:fixed;
  inset:-18%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1000px 600px at 65% 35%, rgba(167,139,250,.14), transparent 62%),
    radial-gradient(900px 520px at 35% 70%, rgba(243,184,255,.10), transparent 60%);
  filter:blur(18px);
  opacity:.6;
  mix-blend-mode:screen;
  transform-origin:50% 50%;
  animation:fog-swirl-secondary 72s linear infinite reverse;
}
@keyframes fog-swirl-main{
  0%{transform:rotate(0deg) scale(1.05) translate3d(-1%,-1%,0);}
  50%{transform:rotate(180deg) scale(1.08) translate3d(1.2%,0.8%,0);}
  100%{transform:rotate(360deg) scale(1.05) translate3d(-1%,1.2%,0);}
}
@keyframes fog-swirl-secondary{
  0%{transform:rotate(0deg) scale(1.12) translate3d(1.5%,-1%,0);}
  100%{transform:rotate(360deg) scale(1.18) translate3d(-1.5%,1.2%,0);}
}

/* =========================
   Subtle Mystic Particles (high-end, no kitsch)
   ========================= */
.rme-app{position:relative; z-index:1;}
.rme-app > *{position:relative; z-index:1;}

.rme-app::before{
  content:"";
  position: fixed;
  inset: -18%;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(8px 8px at 18% 24%, rgba(185,166,255,0.18), transparent 65%),
    radial-gradient(6px 6px at 42% 18%, rgba(242,167,255,0.14), transparent 62%),
    radial-gradient(10px 10px at 68% 28%, rgba(185,166,255,0.16), transparent 68%),
    radial-gradient(7px 7px at 82% 44%, rgba(242,167,255,0.12), transparent 66%),
    radial-gradient(9px 9px at 26% 62%, rgba(124,58,237,0.12), transparent 70%),
    radial-gradient(6px 6px at 58% 74%, rgba(185,166,255,0.13), transparent 64%),
    radial-gradient(11px 11px at 78% 82%, rgba(242,167,255,0.10), transparent 72%),
    radial-gradient(7px 7px at 12% 86%, rgba(185,166,255,0.12), transparent 66%);
  filter: blur(1.2px);
  opacity: 0.35;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  animation:
    particles-drift 92s ease-in-out infinite alternate,
    particles-breathe 18s ease-in-out infinite;
}
@keyframes particles-drift{
  0%   { transform: translate3d(-1.2%, -0.8%, 0) scale(1.04); }
  50%  { transform: translate3d( 1.0%,  0.6%, 0) scale(1.06); }
  100% { transform: translate3d(-0.6%,  1.2%, 0) scale(1.05); }
}
@keyframes particles-breathe{
  0%,100% { opacity: 0.30; }
  50%     { opacity: 0.40; }
}

/* =========================
   Ultra Micro Dust (barely visible, premium layer)
   ========================= */
.rme-app::after{
  content:"";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 42%, rgba(200,190,255,0.32), transparent 60%),
    radial-gradient(1.8px 1.8px at 44% 26%, rgba(255,255,255,0.30), transparent 60%),
    radial-gradient(1.3px 1.3px at 61% 54%, rgba(210,200,255,0.28), transparent 60%),
    radial-gradient(1.6px 1.6px at 73% 34%, rgba(255,255,255,0.26), transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 62%, rgba(200,190,255,0.25), transparent 60%),
    radial-gradient(1.7px 1.7px at 22% 76%, rgba(255,255,255,0.28), transparent 60%),
    radial-gradient(1.2px 1.2px at 56% 84%, rgba(210,200,255,0.24), transparent 60%);
  opacity: 0.18;
  filter: blur(0.4px);
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  animation:
    micro-dust-drift 140s linear infinite,
    micro-dust-fade 24s ease-in-out infinite;
}
@keyframes micro-dust-drift{
  from { transform: translate3d(0%, 0%, 0) scale(1.02); }
  to   { transform: translate3d(-1.5%, 1.2%, 0) scale(1.03); }
}
@keyframes micro-dust-fade{
  0%,100% { opacity: 0.14; }
  50%     { opacity: 0.22; }
}

/* =========================
   Arcane Hover Rune – Triquetra
   Usage: add class "arcane-rune" to buttons/cards/nav links
   ========================= */
.arcane-rune{
  position:relative;
  overflow:hidden;
}
.arcane-rune::after{
  content:"";
  position:absolute;
  inset:-35%;
  pointer-events:none;
  opacity:0;
  transform:scale(0.9) rotate(-18deg);
  transition:opacity .35s ease, transform .8s ease;

  background: radial-gradient(circle,
    rgba(185,166,255,0.55),
    rgba(124,58,237,0.25),
    transparent 65%
  );

  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 8 C30 8 18 26 18 40 c0 10 6 18 14 22 -8 4 -14 12 -14 22 0 14 12 32 32 32 20 0 32 -18 32 -32 0 -10 -6 -18 -14 -22 8 -4 14 -12 14 -22 0 -14 -12 -32 -32 -32z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 8 C30 8 18 26 18 40 c0 10 6 18 14 22 -8 4 -14 12 -14 22 0 14 12 32 32 32 20 0 32 -18 32 -32 0 -10 -6 -18 -14 -22 8 -4 14 -12 14 -22 0 -14 -12 -32 -32 -32z' fill='black'/></svg>");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:55%;
  mix-blend-mode:screen;
}
.arcane-rune:hover::after,
.arcane-rune:focus-visible::after{
  opacity:0.22;
  transform:scale(1.05) rotate(12deg);
}

@media (prefers-reduced-motion: reduce){
  body::before,body::after,
  .rme-app::before,.rme-app::after{
    animation:none !important;
  }
  .arcane-rune::after{
    transition:none;
    transform:none;
  }
}
/* =========================
   TECH HUD Grid (very subtle, no clutter)
   ========================= */
body{
  /* super subtle grid overlay via background blend */
  background-image:
    /* existing background stays above in your file; this adds a faint grid feel */
    linear-gradient(rgba(185,166,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,166,255,.03) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  background-position: 0 0, 0 0;
}

/* Hover “scanner line” for tech vibe on cards (optional but very nice) */
.card::after, .panel::after, .rme-card::after, .rme-panel::after{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  top:-30%;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(185,166,255,.45), transparent);
  opacity:0;
  transform: translateY(0);
  pointer-events:none;
}

.card:hover::after, .panel:hover::after, .rme-card:hover::after, .rme-panel:hover::after{
  opacity:1;
  animation: tech-scan 0.65s ease-out 1;
}

@keyframes tech-scan{
  from{ transform: translateY(0); opacity:0; }
  15% { opacity:0.9; }
  to  { transform: translateY(220px); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .card:hover::after, .panel:hover::after, .rme-card:hover::after, .rme-panel:hover::after{
    animation:none;
    opacity:0.2;
  }
}