:root {
--opacity: 0.09;
--blend-mode-mix: hard-light;

}
.light-mode {
--opacity: 0.2;
--blend-mode-mix: multiply;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1;
 }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0;
 }
}


@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideUpOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(50px);
    opacity: 0;
  }
}

@keyframes appear {
    from{
        opacity: 0;
        scale: 0.5;
    }

    to{
        opacity: 1;
        scale: 1;
    }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


.pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

.compilation {
    animation: animate-slide-up .5s ease-out forwards;
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0;
}


.appear {
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
}


.slideUp {
  animation: slideUp .5s ease-out forwards;
}

.fadeIn {
    animation: fadeIn 1s ease-out forwards; 
}

.fadeOut {
    animation: fadeOut 1s ease-out forwards; 
}


.animate-slide-up {
  opacity: 0;
  transition: none; /* prevent overlap */
}

.animate-slide-up.visible {
    animation: slideUp 1s ease-out forwards;
    
}


    /* Overlay for modal-like effect */
    .popup-overlay {
        position: absolute;
        top: 5%;
        left: 15%;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .popup-overlay.show {
        visibility: visible;
        opacity: 1;
    }

    /* Speech bubble styling */
    .speech-bubble {
        position: relative;
        background: #ff4646;
        border-radius: 50px;
        padding: 15px;
        max-width: 400px;
        font-size: clamp(.5rem, 0.8736rem + 0.5495vw, 1.5rem);
        z-index: 9999;
        color: white;
        animation: popIn 0.3s ease;
    }

    .speech-bubble::after {
        content: "";
        position: absolute;
        top: -15px; /* move it above the bubble */
        left: 50%;
        transform: translateX(-50%);
        border-width: 0 15px 15px 15px; /* top=0, left/right=15px, bottom=15px */
        border-style: solid;
        border-color: transparent transparent #ff4646 transparent; /* bottom border is white */
    }


    @keyframes popIn {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

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


@media (max-width: 600px) {
      .popup-overlay {
        position: absolute;
        top: 5%;
        left: 5%;
}

}