/* =========================================================
   Author: Arif Website Developer
   Date: 2026-04-27
   Purpose: Reusable pulse animation for small live/status
            dots built with a GenerateBlocks container.
            The dot's size, shape, and base color can be set
            in the GB editor. This CSS only handles the pulse.
   ========================================================= */


/* =========================================================
   Pulse Animation: gs-pulse
   ========================================================= */

/* ---------------------------------------------------------
   Base pulse class
   - Use gs-pulse CSS class on the dot element to get the pulsing effect
   - Use on a small round container
   - Best for live dots, status indicators, tiny markers
   --------------------------------------------------------- */
.gs-pulse {
  position: relative;
  display: inline-block;
  border-radius: 999px; /* keeps the dot circular */
  transform-origin: center;
  will-change: transform, box-shadow, opacity;

  /* Main pulse animation */
  animation: gs-pulse-dot 1.8s ease-out infinite;
}

/* ---------------------------------------------------------
   Pulse animation
   - Expands a soft outer ring
   - Keeps the center dot visible
   - Designed for KE green live dots
   --------------------------------------------------------- */
@keyframes gs-pulse-dot {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 166, 94, 0.32);
    opacity: 1;
  }

  70% {
    transform: scale(1.03);
    box-shadow: 0 0 0 10px rgba(0, 166, 94, 0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 166, 94, 0);
    opacity: 1;
  }
}

/* ---------------------------------------------------------
   Tablet
   - Slightly slower so the motion feels softer
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .gs-pulse {
    animation-duration: 1.9s;
  }
}

/* ---------------------------------------------------------
   Mobile
   - Slightly slower again for tighter layouts
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .gs-pulse {
    animation-duration: 2s;
  }
}

/* ---------------------------------------------------------
   Accessibility
   - Respect reduced motion preference
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gs-pulse {
    animation: none;
    box-shadow: none;
  }
}



/* =========================================================
   Fade-up Animation: gs-fade-up
   ========================================================= */
/* -------------
   Animations
   ------------- */

@keyframes gs-fade-up {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -------------
   Utility Class
   ------------- */
.gs-fade-up {
    animation: gs-fade-up 0.7s ease 0.45s both;
}

/* =========================================================
   Fade-up Animation: gs-fade-up
   ========================================================= */
/* -------------
   Animations
   ------------- */
@keyframes gs-scroll-line {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }

    48% {
        transform: scaleY(1);
        transform-origin: top;
    }

    52% {
        transform: scaleY(1);
        transform-origin: bottom;
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

/* -------------
   Utility Class
   ------------- */
.gs-scroll-line {
    animation: gs-scroll-line 2.2s ease-in-out infinite;
}

/* =========================================================
   System Panel In Animation: gs-animation-panel-in
   ========================================================= */
/* -------------
   Animations
   ------------- */
@keyframes keSystemPanelIn {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    
    100% {
        opacity: 1;
        transform: translateY(0);
    }    
}

/* -------------
   Utility Class
   ------------- */
.gs-animation-panel-in {
        animation: keSystemPanelIn 0.35s ease both;
}