/* DENTAL FREQUENCY DESIGN — ANIMATED BACKGROUND v28 */

:root{
  --dfd-bg0:#04090c;
  --dfd-bg1:#071118;
  --dfd-grid:rgba(82,209,255,.045);
  --dfd-pulse:rgba(0,167,255,.26);
  --dfd-pulse2:rgba(84,215,255,.18);
}

/* keep application content above the animated layers */
body{
  position:relative;
  min-height:100vh;
  background:
    radial-gradient(circle at 18% -10%,rgba(0,167,255,.10),transparent 34%),
    radial-gradient(circle at 100% 20%,rgba(84,215,255,.06),transparent 28%),
    linear-gradient(180deg,var(--dfd-bg0),var(--dfd-bg1) 55%,var(--dfd-bg0))!important;
  overflow-x:hidden;
}

body > *{
  position:relative;
  z-index:2;
}

/* slow moving technical grid */
body::before{
  content:"";
  position:fixed;
  inset:-80px;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--dfd-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--dfd-grid) 1px,transparent 1px);
  background-size:34px 34px;
  opacity:.48;
  transform:translate3d(0,0,0);
  animation:dfdGridDrift 55s ease-in-out infinite;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.25) 70%,transparent);
}

/* ECG / frequency trace */
body::after{
  content:"";
  position:fixed;
  left:-20vw;
  top:18vh;
  width:140vw;
  height:220px;
  z-index:1;
  pointer-events:none;
  opacity:.42;
  filter:drop-shadow(0 0 8px rgba(0,167,255,.18));
  background:
    linear-gradient(90deg,
      transparent 0%,
      transparent 6%,
      rgba(0,167,255,.18) 6.2%,
      rgba(0,167,255,.18) 6.5%,
      transparent 6.7%,
      transparent 13%,
      rgba(84,215,255,.34) 13.2%,
      rgba(84,215,255,.34) 13.5%,
      transparent 13.7%,
      transparent 17%,
      rgba(84,215,255,.46) 17.2%,
      rgba(84,215,255,.46) 17.4%,
      transparent 17.6%,
      transparent 23%,
      rgba(0,167,255,.20) 23.2%,
      rgba(0,167,255,.20) 23.5%,
      transparent 23.7%,
      transparent 31%,
      rgba(84,215,255,.50) 31.2%,
      rgba(84,215,255,.50) 31.45%,
      transparent 31.7%,
      transparent 42%,
      rgba(0,167,255,.18) 42.2%,
      rgba(0,167,255,.18) 42.5%,
      transparent 42.7%,
      transparent 54%,
      rgba(84,215,255,.34) 54.2%,
      rgba(84,215,255,.34) 54.5%,
      transparent 54.7%,
      transparent 68%,
      rgba(84,215,255,.52) 68.2%,
      rgba(84,215,255,.52) 68.5%,
      transparent 68.7%,
      transparent 80%,
      rgba(0,167,255,.22) 80.2%,
      rgba(0,167,255,.22) 80.5%,
      transparent 80.7%,
      transparent 100%
    );
  clip-path:polygon(
    0 50%,
    5% 50%,
    8% 50%,
    10% 45%,
    11% 55%,
    12% 50%,
    18% 50%,
    20% 50%,
    21% 42%,
    22% 58%,
    23% 50%,
    30% 50%,
    33% 50%,
    34% 10%,
    35% 88%,
    36% 36%,
    37% 50%,
    47% 50%,
    54% 50%,
    56% 43%,
    57% 57%,
    58% 50%,
    68% 50%,
    70% 50%,
    71% 28%,
    72% 75%,
    73% 45%,
    74% 50%,
    84% 50%,
    90% 50%,
    92% 46%,
    93% 54%,
    94% 50%,
    100% 50%
  );
  animation:dfdFrequencySweep 48s ease-in-out infinite, dfdPulseGlow 7s ease-in-out infinite;
}

/* secondary glow ribbon for depth */
.page::before{
  content:"";
  position:fixed;
  width:680px;
  height:680px;
  right:-260px;
  bottom:-320px;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  background:radial-gradient(circle,rgba(0,167,255,.10),rgba(0,167,255,.025) 38%,transparent 70%);
  animation:dfdGlowFloat 42s ease-in-out infinite;
}

@keyframes dfdGridDrift{
  0%{transform:translate3d(-18px,-12px,0) scale(1)}
  25%{transform:translate3d(28px,-26px,0) scale(1.015)}
  50%{transform:translate3d(44px,24px,0) scale(1.025)}
  75%{transform:translate3d(-22px,38px,0) scale(1.01)}
  100%{transform:translate3d(-18px,-12px,0) scale(1)}
}

@keyframes dfdFrequencySweep{
  0%{transform:translate3d(-10%,-18px,0) scale(1)}
  20%{transform:translate3d(-2%,28px,0) scale(1.015)}
  45%{transform:translate3d(8%,-8px,0) scale(1.03)}
  70%{transform:translate3d(3%,42px,0) scale(1.01)}
  100%{transform:translate3d(-10%,-18px,0) scale(1)}
}

@keyframes dfdPulseGlow{
  0%,100%{opacity:.24;filter:drop-shadow(0 0 5px rgba(0,167,255,.12))}
  50%{opacity:.52;filter:drop-shadow(0 0 14px rgba(84,215,255,.30))}
}

@keyframes dfdGlowFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-50px,-35px,0) scale(1.06)}
}

/* keep panels solid enough to read over the moving background */
.card,
.section,
.sidebar,
.metric,
.quickcase-modal,
.login-card{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* mobile: lighter animation and less GPU work */
@media(max-width:760px){
  body::before{
    opacity:.28;
    animation-duration:42s;
  }

  body::after{
    top:24vh;
    height:150px;
    opacity:.26;
    animation-duration:28s,7s;
  }

  .page::before{
    width:420px;
    height:420px;
    right:-220px;
    bottom:-180px;
    opacity:.65;
  }
}

/* honor reduced motion preferences */
@media(prefers-reduced-motion:reduce){
  body::before,
  body::after,
  .page::before{
    animation:none!important;
  }
}