/* ======== OP Loading  ======== */

#ImageOP {  cursor: pointer; transition: 0.3s;}
#ImageOP:hover {box-shadow: 0 0px 7px 0 rgba(0, 0, 0, 0.9), 0 0px 7px 0 rgba(0, 0, 0, 0.9);}



        #cover-containerOP {
            position: fixed; 
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 1);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999; 
            transition: opacity 1s ease; 
            opacity: 1;    }

        #animation-containerOP {
            text-align: center;
            position: relative;
            width: 100%;
        }

        .imageOP {
            width: 45%;
            top: 20%;
            left: 26%;
            right: 74%;
            position: fixed;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.5s, transform 0.5s;
        }

        @media (max-width: 600px) {
            .imageOP {
                width: 100%;
                            left: 0%;
            }
        }

        #promptOP {
            font-size:20px;
            font-family: Aldrich;
            margin-top: 300px;
            opacity: 0;
            transition: opacity 0.6s;
            color: #ffffff;
            text-shadow: 0 0 5px #00a8ff, 0 0 10px #00a8ff, 0 0 15px #00a8ff, 0 0 20px #00a8ff, 0 0 25px #00a8ff, 0 0 30px #00a8ff, 0 0 35px #00a8ff;
        }

        .visibleOP {
            opacity: 1;
            transform: scale(1);
        }

         .fade-outOP {
            opacity: 0;
        }

        .fadeOut {
            opacity: 0 !important;
        }


/* ======== 🖥️  ======== */
.OP-rgb-border-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.OP-rgb-border-overlay::before,
.OP-rgb-border-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(from 45deg, transparent 0deg, cyan 20deg, transparent 40deg);
  animation: OP-rgb-rotate 4s linear infinite;
  border-radius: 8px;
  opacity: 0.4;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.3), 0 0 24px rgba(0, 128, 255, 0.15);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 12px;
  box-sizing: border-box;
}
.OP-rgb-border-overlay::after {
  animation-delay: 2.2s;
  transform: rotate(90deg);
}

.OP-ring-layer.extra1,
.OP-ring-layer.extra2,
.OP-ring-layer.extra3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 12px;
  box-sizing: border-box;
  pointer-events: none;
}

.OP-ring-layer.extra1 {
  background: conic-gradient(from 45deg, transparent 0deg, rgba(0, 255, 255, 0.1) 15deg, rgba(0, 255, 255, 0.5) 30deg, transparent 60deg);
  animation: OP-rgb-rotate2 8s linear infinite;
  opacity: 0.3;
}
.OP-ring-layer.extra2 {
  background: conic-gradient(from 120deg, transparent 0deg, rgba(0, 255, 255, 0.08) 10deg, rgba(0, 255, 255, 0.4) 20deg, transparent 45deg);
  animation: OP-rgb-rotate3 12s linear infinite;
  opacity: 0.25;
}
.OP-ring-layer.extra3 {
  background: conic-gradient(from 200deg, transparent 0deg, rgba(0, 255, 255, 0.12) 10deg, rgba(0, 255, 255, 0.45) 20deg, transparent 50deg);
  animation: OP-rgb-rotate4 20s linear infinite;
  opacity: 0.18;
}

/* keyframes */
@keyframes OP-rgb-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes OP-rgb-rotate2 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes OP-rgb-rotate3 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes OP-rgb-rotate4 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* ======== 📱 768px ======== */
@media (max-width: 768px) {
  .OP-rgb-border-overlay::before,
  .OP-rgb-border-overlay::after,
  .OP-ring-layer.extra1,
  .OP-ring-layer.extra2,
  .OP-ring-layer.extra3 {
    padding: 5px;
  }

  .OP-rgb-border-overlay::before,
  .OP-rgb-border-overlay::after {
    background: conic-gradient(from 0deg, transparent 0deg, cyan 20deg, transparent 40deg);
  }

  .OP-ring-layer.extra1 {
    background: conic-gradient(from 45deg, transparent 0deg, rgba(0, 255, 255, 0.1) 15deg, rgba(0, 255, 255, 0.5) 30deg, transparent 60deg);
  }

  .OP-ring-layer.extra2 {
    background: conic-gradient(from 120deg, transparent 0deg, rgba(0, 255, 255, 0.08) 10deg, rgba(0, 255, 255, 0.4) 20deg, transparent 45deg);
    animation: OP-rgb-rotate3 12s linear reverse infinite;
  }

  .OP-ring-layer.extra3 {
    background: conic-gradient(from 180deg, transparent 0deg, rgba(0, 255, 255, 0.12) 10deg, rgba(0, 255, 255, 0.45) 20deg, transparent 50deg);
    animation: OP-rgb-rotate4 20s linear infinite;
  }
}