/* ============================================
   HOLOGRAPHIC DASHBOARD
============================================ */

.holo-dashboard {
  width: 100%;
  max-width: 620px;

  overflow: visible;

  filter:
    drop-shadow(0 0 12px rgba(35, 231, 166, .10))
    drop-shadow(0 0 30px rgba(35, 217, 231, .08));

  animation:
    holoFloat 7s ease-in-out infinite;
}


/* ============================================
   MAIN FLOAT
============================================ */

@keyframes holoFloat {

  0% {
    transform:
      translateY(0px)
      rotate(-1deg);
  }

  50% {
    transform:
      translateY(-14px)
      rotate(1deg);
  }

  100% {
    transform:
      translateY(0px)
      rotate(-1deg);
  }

}


/* ============================================
   PANEL GLOW BREATHING
============================================ */

.holo-dashboard rect,
.holo-dashboard path,
.holo-dashboard circle {
  transition: all .4s ease;

  animation:
    holoPulse 4s ease-in-out infinite;
}

@keyframes holoPulse {

  0% {
    opacity: .75;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: .75;
  }

}


/* ============================================
   GRAPH LINE
============================================ */

.holo-dashboard path {
  stroke-dasharray: 12;

  animation:
    graphFlow 8s linear infinite,
    holoPulse 4s ease-in-out infinite;
}

@keyframes graphFlow {

  from {
    stroke-dashoffset: 120;
  }

  to {
    stroke-dashoffset: 0;
  }

}


/* ============================================
   FLOATING CARDS
============================================ */

.holo-dashboard rect:nth-of-type(8) {
  animation:
    cardFloat1 5s ease-in-out infinite;
}

.holo-dashboard rect:nth-of-type(9) {
  animation:
    cardFloat2 6s ease-in-out infinite;
}

@keyframes cardFloat1 {

  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0px);
  }

}

@keyframes cardFloat2 {

  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(8px);
  }

  100% {
    transform: translateY(0px);
  }

}


/* ============================================
   GLOW DOTS
============================================ */

.holo-dashboard circle {
  filter:
    drop-shadow(0 0 8px currentColor)
    drop-shadow(0 0 18px currentColor);
}


/* ============================================
   HOVER EFFECT
============================================ */

.holo-dashboard:hover {
  filter:
    drop-shadow(0 0 22px rgba(35, 231, 166, .18))
    drop-shadow(0 0 50px rgba(35, 217, 231, .14));

  transform:
    scale(1.02);
}


/* ============================================
   REDUCED MOTION
============================================ */

@media (prefers-reduced-motion: reduce) {

  .holo-dashboard,
  .holo-dashboard rect,
  .holo-dashboard path,
  .holo-dashboard circle {
    animation: none !important;
  }

}

/* ============================================
   MENU LINES ANIMATION
============================================ */

.menu-line {
  transform-origin: left center;

  filter:
    drop-shadow(0 0 6px currentColor);

  animation:
    linePulse 4s ease-in-out infinite;
}


/* VARIAÇÕES */

.line-1 {
  animation-delay: 0s;
}

.line-2 {
  animation-delay: .8s;
}

.line-3 {
  animation-delay: 1.6s;
}

.line-4 {
  animation-delay: 2.4s;
}


/* ============================================
   PULSE
============================================ */

@keyframes linePulse {

  0% {
    transform: scaleX(1);
    opacity: .55;
  }

  50% {
    transform: scaleX(1.18);
    opacity: 1;
  }

  100% {
    transform: scaleX(1);
    opacity: .55;
  }

}