JS/Dr. Strange's portal animation cannot be positioned on the outer frame of the circle behind the cards if only the cards are turned behind them

The part containing the card rotation and portal code:

</script>

<script>
//sound effect
$(document).ready(function() {
  var flipSound = document.getElementById("flipSound");

  $(".card").click(function() {
    var card = $(this);

    // Check if the card is not already flipping to avoid multiple flips
    if (!card.hasClass('flipping')) {
      card.addClass('flipping');

      // Check if the front side is facing the viewer
      if (!card.hasClass("flipped")) {
        flipSound.currentTime = 0; // Reset the audio to the start
        flipSound.play();
        startAnimation(); 
        console.log("started")
        card.addClass("flipped");
        } else {
            
            stopAnimation(); 
            console.log("stopped")
            card.removeClass("flipped");
        }
        

      setTimeout(function() {
        card.removeClass('flipping');
      }, 1000); // Adjust the timeout to match your animation duration
    }
  });

  // Prevent sound on back side click
  $(".card__back").click(function(e) {
 
    e.stopPropagation();

  });
});


</script>


<script>
    // Body hoover effect
    document.getElementById("gameCardLink").addEventListener("mouseover", function() {
        document.body.classList.add("hoverEffect");
    });

    document.getElementById("gameCardLink").addEventListener("mouseout", function() {
        document.body.classList.remove("hoverEffect");
    });
</script>


<script>
// portal effect
var p5Instance;
function startAnimation() {

   

    const sketch = (p) => {

        const createParticleSystem = (location) => {
            const origin = location.copy();
            const particles = [];
            const addParticle = velocity => {
                const rand = p.random(0, 1);
                if (rand <= .3) {
                    particles.push(createSparkParticle(origin, velocity.copy()));
                } else {
                    particles.push(createParticle(origin, velocity.copy()));
                }
            };
            const applyForce = force => {
                particles.forEach(particle => {
                    particle.applyForce(force);
                });
            };
            const run = () => {
                particles.forEach((particle, index) => {
                    particle.move();
                    particle.draw();

                    if (particle.isDead()) {
                        particles.splice(index, 1);
                    }
                });
            };
            return {
                origin,
                addParticle,
                run,
                applyForce
            };
        };

        const createSparkParticle = (locationP, velocity) => {
            const particle = createParticle(locationP, velocity);
            let fade = 255;
            const draw = () => {
                p.colorMode(p.HSB);
                p.stroke(16, 62, 100, fade);
                const arrow = velocity.copy().normalize().mult(p.random(2, 4));
                const direction = p5.Vector.add(particle.location, arrow);
                p.line(particle.location.x, particle.location.y, direction.x, direction.y);
            };
            const move = () => {
                particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4)));
                particle.velocity.add(particle.acc);
                particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4)));
                particle.acc.mult(0);
                fade -= 5;
            };
            return {
                ...particle,
                draw,
                move
            }
        }

        const createParticle = (locationP, velocity) => {
            const acc = p.createVector(0, 0);
            const location = locationP.copy();
            let fade = 255;
            const fadeMinus = p.randomGaussian(15, 2);
            let ligther = 100;
            let situate = 62;
            const draw = () => {
                p.colorMode(p.HSB)
                p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade);
                const arrow = velocity.copy().mult(2);
                const direction = p5.Vector.add(location, arrow);
                p.line(location.x, location.y, direction.x, direction.y);
            };
            const move = () => {
                velocity.add(acc);
                location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1)));
                acc.mult(0);
                fade -= fadeMinus;
                ligther -= 8;
                situate += 8;
            };
            const applyForce = force => {
                acc.add(force);
            };
            const isDead = () => {
                if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) {
                    return true;
                } else {
                    return false;
                }
            };
            return {
                draw,
                move,
                applyForce,
                isDead,
                velocity,
                location,
                acc
            };
        };

        const createMover = () => {
            const location = p.createVector(p.width / 2, p.height / 2);
            const velocity = p.createVector(0, 0);
            const acc = p.createVector(0, 0);
            const mass = 10;
            let angle = 0;
            let angleVelocity = 0;
            let angleAcc = 0;
            let len = 100;
            const particleSystems = [
                createParticleSystem(location),
                createParticleSystem(location),
                createParticleSystem(location),
                createParticleSystem(location),
                createParticleSystem(location),
                createParticleSystem(location),
                createParticleSystem(location),
                createParticleSystem(location),
                createParticleSystem(location)
            ];
            const getGotoVector = angle => {
                const radius = p.map(angleVelocity, 0, 0.3, 0, 55);
                const goToVector = p.createVector(
                    location.x + radius * p.cos(angle),
                    location.y + radius * p.sin(angle)
                );
                return goToVector;
            };
            const draw = () => {
                const goToVector = getGotoVector(angle);
                particleSystems.forEach(particleSystem => {
                    particleSystem.run();
                });
            };
            const renderParticleSystem = () => {
                particleSystems.forEach(particleSystem => {
                    const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI));
                    const prepencular = p.createVector(
                     (goToVector.y - location.y)*-1,
                    (goToVector.x - location.x)
                    );
                    prepencular.normalize();
                    prepencular.mult(angleVelocity * 70);
                    particleSystem.origin.set(goToVector);
                    particleSystem.addParticle(prepencular);
                    const gravity = p.createVector(0, 0.3);
                    particleSystem.applyForce(gravity);
                });
            };
            const move = () => {
              
                angleAcc = 0.005;
                angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32);
                angle += angleVelocity;
                angleAcc = 0;
                renderParticleSystem();
            };
            return {
                draw,
                move
            };
        };

        let mover;

        p.setup = function() {
            p.createCanvas(240, 320);
            p.clear(); 
            mover = createMover();
        }

        p.draw = function() {
            p.clear();
            mover.move();
            mover.draw();
        }
    };

    p5Instance = new p5(sketch);
}

// stop animation

function stopAnimation() {
    if (p5Instance) {
        p5Instance.remove();
        p5Instance = null;
    }
}

</script>

Hello friends, I have 6 cards that can turn around. When one of the cards turns around, I want the Portal animation to appear in the outermost frame of the colored circles on the back of the cards. How can I achieve this in my code?

What to do for each of the 6 cards

• main file (including portal animation):

https://drive.google.com/file/d/1famaPF_Rz-CIjbiBCOlIFZH-LWKjlpv_/view?usp=sharing

• aplication's demo link with portal (not working properly):

https://tm-game-cards-portal.netlify.app/

• aplication's demo link without portal:

https://tm-game-cards-v02.netlify.app/

• main file (not including portal animation): https://drive.google.com/file/d/1fKABYycS1cfBZ7GWYHueSXkH_XnLZZpa/view

In summary, a portal was not created in an area other than the cards and the page was loaded completely. A flag was added to prevent the animation from starting over and over again.

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <link rel="stylesheet" 
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 
  <title>Game Cards App</title>
  <link rel="icon" type="image/png" href="https://cdn1.iconfinder.com/data/icons/entertainment-events-hobbies/24/card-game-cards-hold-512.png">
</head>


<audio id="flipSound" preload="auto">
  <source src="C:\Users\LENOVO\Desktop\card\flip-sound.wav" type="audio/wav">
</audio>

<body>
  <div class="tm-container">
    <div class="tm-letter" id="t-letter">T</div>
    <div class="tm-letter" id="m-letter">M</div>
  </div>
</body>




<main>

  
   <div id="gameCardLink">Game Cards</div>
  <p><a href="https://github.com/murattasci06"><i class="fab fa-github"></i></a></p>
</main>


<ul>
  <li class="card" >
    <div class="card__flipper">
      <div class="card__front">
        <img src="https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg" alt="Spiderman">
        <p class="card__name"><span>Marvel</span><br>Spiderman</p>
        <p class="card__num">1</p>
      </div>
  
      
      <iframe class="frame" 
      width="225"
      height="340"
      src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
      ></iframe>

      
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#514d9b" stroke-width="35"  />
        </svg>
        <span>1.89 Bil. $</span>
      </div>
    </div>
  </li>
 
 
 
  
  <li class="card">
    <div class="card__flipper">
       <div class="card__front">
         <img src="https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg" alt="Batman">
         <p class="card__name"><span>DC</span><br>Batman</p>
        <p class="card__num">2</p>
      </div>
      
        <iframe class="frame" 
        width="225"
        height="340"
        src="https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
        ></iframe>

      
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#35a541" stroke-width="35"/>
        </svg>
        <span>771 Mil. $</span>
      </div>
    </div>
  </li>
  
  <li class="card">
    <div class="card__flipper">
       <div class="card__front">
        <img src="https://static.wikia.nocookie.net/marvelcinematicuniverse/images/1/18/Guardians_of_the_Galaxy_Vol._3_soundtrack_album.jpg/revision/latest?cb=20230510223849" alt="Guardians_of_the_Galaxy_Vol_3">
        <p class="card__name"><span>Marvel</span><br>Guardians_of_the_Galaxy_Vol_3</p>
        <p class="card__num">3</p>
        </div>
        <iframe class="frame" 
        width="225"
        height="340"
        src="https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
        ></iframe>
        
     
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#bdb235" stroke-width="35"/>
        </svg>
        <span>845.4 Mil. $</span>
      </div>
    </div>
  </li>
  
  
  <li class="card">
    <div class="card__flipper">
       <div class="card__front">
       <img src="https://wallpaperaccess.com/full/8940499.jpg" alt="Shazam">
        <p class="card__name"><span>DC</span><br>Shazam2</p>
        <p class="card__num">4</p>
        </div>
        <iframe class="frame" 
        width="225"
        height="340"
        src="https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
        ></iframe>
        
        
     
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#db6623" stroke-width="35"/>
        </svg>
        <span>462.5 Mil. $</span>
      </div>
    </div>
  </li>

  <li class="card">
    <div class="card__flipper">
       <div class="card__front">
        <img src="https://images2.alphacoders.com/131/1316679.jpeg" alt="Flash">
        <p class="card__name"><span>DC</span><br>Flash</p>
        <p class="card__num">5</p>
        </div>
        <iframe class="frame" 
        width="225"
        height="340"
        src="https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
        ></iframe>
        
        
     
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#3e5eb3" stroke-width="35"/>
        </svg>
        <span>560.2 Mil. $</span>
      </div>
    </div>
  </li>
 
  <li class="card">
    <div class="card__flipper">
       <div class="card__front">
        <img src=" https://images3.alphacoders.com/121/1213553.jpg" alt="Dr_Strange_2">
        <p class="card__name"><span>Marvel</span><br>Dr_Strange_2</p>
        <p class="card__num">6</p>
         </div>
        <iframe class="frame" 
        width="225"
        height="340"
        src="https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
        ></iframe>
        
      
      <div class="card__back">
        <svg height="180" width="180">
          <circle cx="90" cy="90" r="65" stroke="#aa9e5c" stroke-width="35"/>
        </svg>
        <span>955.8 Mil. $</span>
      </div>
    </div>
  </li>
</ul>

<div id="loading-animation">
  <div class="loader"></div>
</div>




<style>
* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column wrap;
  background: radial-gradient(circle, rgba(48, 48, 48, 1), rgba(0, 0, 0, 1));
  animation: shine 2s linear infinite;
  color: white;
  font-family: "Lato";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 15px;
  text-align: center;
  overflow-x: hidden;
}

.card {
  float: left;
  position: relative;
  width: calc(33.33% - 30px + 9.999px);
  height: 340px;
  margin: 0 30px 30px 0;
  perspective: 1000;
 
}
.card:first-child .card__front {
  background:#5271C2;
}

.card__front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.card:first-child .card__num {
  text-shadow: 1px 1px rgba(52, 78, 147, 0.8)
}
.card:nth-child(2) .card__front {
  background:#35a541;
}
.card:nth-child(2) .card__num {
  text-shadow: 1px 1px rgba(34, 107, 42, 0.8);
}
.card:nth-child(3) {
  margin-right: 0;
}
.card:nth-child(3) .card__front {
  background: #bdb235;
}
.card:nth-child(3) .card__num {
  text-shadow: 1px 1px rgba(129, 122, 36, 0.8);
}
.card:nth-child(4) .card__front {
  background: #db6623;
}
.card:nth-child(4) .card__num {
  text-shadow: 1px 1px rgba(153, 71, 24, 0.8);
}
.card:nth-child(5) .card__front {
  background: #3e5eb3;
}
.card:nth-child(5) .card__num {
  text-shadow: 1px 1px rgba(42, 64, 122, 0.8);
}
.card:nth-child(6) .card__front {
  background: #aa9e5c;
}
.card:nth-child(6) .card__num {
  text-shadow: 1px 1px rgba(122, 113, 64, 0.8);
}
.card:last-child {
  margin-right: 0;
}
.card__flipper {
  cursor: pointer;
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.card__front, .card__back {
  position: absolute;
  backface-visibility: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 340px;
}
.card__front {
  transform: rotateY(0);
  z-index: 2;
  overflow: hidden;
}
.card__back {
  transform: rotateY(180deg) scale(1.1);
  background: #141414;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.card__back span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.card__name {
  font-size: 32px;
  line-height: 0.9;
  font-weight: 700;
}
.card__name span {
  font-size: 14px;
}
.card__num {
  font-size: 100px;
  margin: 0 8px 0 0;
  font-weight: 700;
}
@media (max-width: 700px) {
  .card__num {
    font-size: 70px;
  }
}
@media (max-width: 700px) {
  .card {
    width: 100%;
    height: 290px;
    margin-right: 0;
    float: none;
  }
  .card .card__front,
  .card .card__back {
    height: 290px;
  }
}

/* Demo */
main {
  text-align: center;
}
main h1, main p {
  margin: 0 0 12px 0;
}
main h1 {
  margin-top: 12px;
  font-weight: 300;
}

.fa-github {
  color: white; 
  font-size: 50px;
}

.tm-letter {
  position: relative;
  display:inline-block;
  font-size:30px;
  margin: 0 5px;
  margin-top: 10px;
  margin-bottom: 5px;
  opacity: 0;
  transform: translateY(0);
  animation: letter-animation 6s ease-in-out infinite;
}

@keyframes letter-animation {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  10%, 40%, 60%, 90% {
    opacity: 1;
    transform: translateY(-10px);
  }
  20%, 80% {
    opacity: 1;
    transform: translateY(0);
  }
}

#m-letter {
  animation-delay: 1.5s;
}

a {
    position: relative;
    display: inline-block;
    padding: 5px;
}

a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     background: radial-gradient(circle at center, transparent 46%, rgba(230, 230, 230, 0.9) 54%, transparent 57%); /* Gümüş-beyaz tonu */
   
    filter: blur(4px) brightness(1.5); /* Parlaklık filtresi eklendi */
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: scale(0.9); /* Başlangıçta efekti biraz küçülttük */
    z-index: -1;
}

a:hover::before {
    opacity: 1;
    transform: scale(1.3); /* Hover durumunda efektin boyutunu artırıyoruz */
}


body.hoverEffect {
      background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a);
}

#gameCard { 
    width: 300px;
    height: 450px;
    margin: 50px auto;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 
    0 0 50px 10px #FFD700,  /* Altın sarısı glow */
    0 0 100px 20px #0000FF, /* Mavi glow */
    0 0 150px 30px #000033; /* Koyu mavi shadow */
    background: rgba(0,0,0,0.7);  /* Slightly transparent black to make the ambilight effect visible behind the card */
    color: #FFD700;  /* Altın sarısı text */
    text-align: center;
    border: 3px solid #FFD700; /* Altın sarısı border */
}




#loading-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



</style>


<script>
var Flipper = (function() {
  var card = $('.card');
  var flipper = card.find('.card__flipper');
  var win = $(window);
  
  var flip = function() {
    var thisCard = $(this);
    var thisFlipper = thisCard.find('.card__flipper');
    var offset = thisCard.offset();
    var xc = win.width() / 2;
    var yc = win.height() / 2;
    var docScroll = $(document).scrollTop();
    var cardW = thisCard.outerWidth() / 2;
    var cardH = thisCard.height() / 2;

    var transX = xc - offset.left - cardW;
    var transY = docScroll + yc - offset.top - cardH;
//     if (offset.top > card.height()) transY = docScroll - offset.top + cardH;
    if (win.width() <= 700) transY = 0;
    
    if (card.hasClass('active')) unflip();
        
    thisCard.css({'z-index': '3'}).addClass('active');
    
    thisFlipper.css({
      'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)',
      '-webkit-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)',
      '-ms-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)'
    }).addClass('active');
    
    
    
    
    return false;
  };
  
  var unflip = function(e) {
    card.css({'z-index': '1'}).removeClass('active');
    flipper.css({
      'transform': 'none',
      '-webkit-transform': 'none',
      '-ms-transform': 'none'
    }).removeClass('active');
  };
  
  var bindActions = function() {
    card.on('click', flip);
    win.on('click', unflip);
  }
  
  var init = function() {
    bindActions();
  };
  
  return {
    init: init
  };
  
}());
Flipper.init();
  
</script>



<script>
<!-- HOOVER FOR TRAILER -->

let hoverTimeout;

$('.card').hover(function() {
    const currentCard = $(this); // Store the current card element in a variable

    hoverTimeout = setTimeout(() => {
        currentCard.find('.card__front').hide();
        currentCard.find('.iframe').show();
        var src = currentCard.find('.iframe').attr("src");
        currentCard.find('.iframe').attr("src", src);

        // Add fullscreen functionality
        currentCard.find('.iframe').on('click', function() {
            $(this).requestFullscreen();
        });

    }, 5000); // 5000 milliseconds (5 seconds)

}, function() {
    clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds

    $(this).find('.card__front').show();
    $(this).find('.iframe').hide();
    var src = $(this).find('.iframe').attr("src");
    $(this).find('.iframe').attr("src", src.replace('?autoplay=1', ''));
});



</script>

<script>
var cardFlags = {}; // An object to store card flags (NEW)

$(document).ready(function() {
  var flipSound = document.getElementById("flipSound");

  $(".card").click(function() {
    var card = $(this);
    var cardId = card.find(".card__num").text();
    console.log(cardId);

    // Check if the card is not already flipping to avoid multiple flips
    if (!card.hasClass('flipping')) {
      card.addClass('flipping');

      // Check if the front side is facing the viewer
      if (!card.hasClass("flipped")) {
        flipSound.currentTime = 0; // Reset the audio to the start
        flipSound.play();
        console.log("is card flag true or false", cardId);

        if (!cardFlags[cardId]) {
          startAnimation(div); 
          console.log("started");
          cardFlags[cardId] = true; // Kart bayrağını "true" olarak işaretle
          card.addClass("flipped");
        }
        
        // adding canvas to back-side (NEW)
        var div = document.querySelector('.flipped .card__flipper.active .card__back');
        var canvas = document.getElementsByClassName('p5Canvas')[0];
        if (div && canvas) {
          div.appendChild(canvas);
          canvas.style.position = 'absolute';
        }
      } else {
       
        console.log("stopped");
        card.removeClass("flipped");
      }

      setTimeout(function() {
        card.removeClass('flipping');
      }, 1000); // Adjust the timeout to match your animation duration
    }
  });

  // Prevent sound on back side click
  $(".card__back").click(function(e) {
    e.stopPropagation();
  });
});







</script>


<script>
    // Body hoover effect
    document.getElementById("gameCardLink").addEventListener("mouseover", function() {
        document.body.classList.add("hoverEffect");
    });

    document.getElementById("gameCardLink").addEventListener("mouseout", function() {
        document.body.classList.remove("hoverEffect");
    });
</script>


<script>

// portal effect
var p5Instance;
function startAnimation(div) {
    // adding canvas to back-side (NEW)
    var canvas = document.getElementsByClassName('p5Canvas')[0];
    if (div && canvas) {
        div.appendChild(canvas);
        canvas.style.position = 'absolute';
    }

    const sketch = (p) => {

        const createParticleSystem = (location) => {
            const origin = location.copy();
            const particles = [];
            const addParticle = velocity => {
                const rand = p.random(0, 1);
                if (rand <= .3) {
                    particles.push(createSparkParticle(origin, velocity.copy()));
                } else {
                    particles.push(createParticle(origin, velocity.copy()));
                }
            };
            const applyForce = force => {
                particles.forEach(particle => {
                    particle.applyForce(force);
                });
            };
            const run = () => {
                particles.forEach((particle, index) => {
                    particle.move();
                    particle.draw();

                    if (particle.isDead()) {
                        particles.splice(index, 1);
                    }
                });
            };
            return {
                origin,
                addParticle,
                run,
                applyForce
            };
        };

        const createSparkParticle = (locationP, velocity) => {
            const particle = createParticle(locationP, velocity);
            let fade = 255;
            const draw = () => {
                p.colorMode(p.HSB);
                p.stroke(16, 62, 100, fade);
                const arrow = velocity.copy().normalize().mult(p.random(2, 4));
                const direction = p5.Vector.add(particle.location, arrow);
                p.line(particle.location.x, particle.location.y, direction.x, direction.y);
            };
            const move = () => {
                particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4)));
                particle.velocity.add(particle.acc);
                particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4)));
                particle.acc.mult(0);
                fade -= 5;
            };
            return {
                ...particle,
                draw,
                move
            }
        }

        const createParticle = (locationP, velocity) => {
            const acc = p.createVector(0, 0);
            const location = locationP.copy();
            let fade = 255;
            const fadeMinus = p.randomGaussian(15, 2);
            let ligther = 100;
            let situate = 62;
            const draw = () => {
                p.colorMode(p.HSB)
                p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade);
                const arrow = velocity.copy().mult(2);
                const direction = p5.Vector.add(location, arrow);
                p.line(location.x, location.y, direction.x, direction.y);
            };
            const move = () => {
                velocity.add(acc);
                location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1)));
                acc.mult(0);
                fade -= fadeMinus;
                ligther -= 8;
                situate += 8;
            };
            const applyForce = force => {
                acc.add(force);
            };
            const isDead = () => {
                if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) {
                    return true;
                } else {
                    return false;
                }
            };
            return {
                draw,
                move,
                applyForce,
                isDead,
                velocity,
                location,
                acc
            };
        };

        const createMover = () => {
            const location = p.createVector(p.width / 2, p.height / 2);
            const velocity = p.createVector(0, 0);
            const acc = p.createVector(0, 0);
            const mass = 10;
            let angle = 0;
            let angleVelocity = 0;
            let angleAcc = 0;
            let len = 100;
            const particleSystems = [
                createParticleSystem(location),
                createParticleSystem(location),
                createParticleSystem(location),
                createParticleSystem(location),
                createParticleSystem(location),
                createParticleSystem(location),
                createParticleSystem(location),
                createParticleSystem(location),
                createParticleSystem(location)
            ];
            const getGotoVector = angle => {
                const radius = p.map(angleVelocity, 0, 0.3, 0, 80);
                const goToVector = p.createVector(
                    location.x + radius * p.cos(angle),
                    location.y + radius * p.sin(angle)
                );
                return goToVector;
            };
            const draw = () => {
                const goToVector = getGotoVector(angle);
                particleSystems.forEach(particleSystem => {
                    particleSystem.run();
                });
            };
            const renderParticleSystem = () => {
                particleSystems.forEach(particleSystem => {
                    const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI));
                    const prepencular = p.createVector(
                     (goToVector.y - location.y)*-1,
                    (goToVector.x - location.x)
                    );
                    prepencular.normalize();
                    prepencular.mult(angleVelocity * 70);
                    particleSystem.origin.set(goToVector);
                    particleSystem.addParticle(prepencular);
                    const gravity = p.createVector(0, 0.3);
                    particleSystem.applyForce(gravity);
                });
            };
            const move = () => {
              
                angleAcc = 0.005;
                angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32);
                angle += angleVelocity;
                angleAcc = 0;
                renderParticleSystem();
            };
            return {
                draw,
                move
            };
        };

        let mover;

        p.setup = function() {
            p.createCanvas(240, 320);
            p.clear(); 
            mover = createMover();
        }

        p.draw = function() {
            p.clear();
            mover.move();
            mover.draw();
        }
    };

    p5Instance = new p5(sketch);
}

// stop animation>>THERE'S NO NEED




</script>


<script>
// To hide the boot animation
function hideLoadingAnimation() {
  var loadingAnimation = document.getElementById("loading-animation");
  loadingAnimation.style.display = "none";
}


// Call hideLoadingAnimation() function when the page is fully loaded (NEW)
window.addEventListener("load", hideLoadingAnimation);

</script>  


</html>