* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --footer-height: 4rem;
}
footer{
    height: var(--footer-height);
}
.bg-main {
    background-color: #801D28;
}

.boxview {
  width: 100%;
  height: 100%;
  /* border: solid red 3px; */
  background-color: rgba(0, 0, 0, 0.3);
}
.boxview::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}
.boxview__container {
  width: 100%;
  height: 100%;
}

#luckydraw{
    width: 100svw;
    height: calc(100svh - var(--footer-height));
}

.ani-floating {
    --floating-duration: 2s;
    --floating-delay: 0s;
    animation: floating var(--floating-duration) var(--floating-delay) ease-in-out infinite;
}
@keyframes floating {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}
.ani-rollback{
    --rollback-duration: 4.8s;
    --rollback-delay: 0s;
    animation: rollback var(--rollback-duration) var(--rollback-delay) ease-in-out infinite;
    transform-origin: center;
}
@keyframes rollback {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(-60deg);
    }
    100% {
        transform: rotate(0);
    }
}
.ani-spin{
    --spin-duration: 12s;
    --spin-delay: 0s;
    animation: delay-spin var(--spin-duration) var(--spin-delay) linear infinite;
}
@keyframes delay-spin {
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.ani-fit{
    --fit-duration: 2s;
    --fit-delay: 0s;
    animation: fit var(--fit-duration) var(--fit-delay) ease-in-out infinite;
}
@keyframes fit{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
}
.ani-pulse{
    --pulse-duration: 3s;
    --pulse-delay: 0s;
    animation: pulse var(--pulse-duration) var(--pulse-delay) cubic-bezier(.75,1.93,.8,.57) infinite;
}
@keyframes pulse{
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(1.05);
    }
    50%{
        transform: scale(1);
    }
    100%{
        transform: scale(1);
    }
}

.ani-shake {
    --shake-scale: 1px;
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;
  
    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
  }
  
  @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-2deg); }
    20% { transform: translate(-3px, 0px) rotate(2deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(2deg); }
    50% { transform: translate(-1px, 2px) rotate(-2deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-2deg); }
    80% { transform: translate(-1px, -1px) rotate(2deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-2deg); }
  }

.ani-shake-shake {
    --delay: 0s;
    animation: shake-shake 0.8s var(--delay) infinite;
  }
  
  @keyframes shake-shake {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    10% { transform: translate(-50px, -20px) rotate(-20deg); }
    20% { transform: translate(-30px, 0px) rotate(20deg); }
    30% { transform: translate(30px, 20px) rotate(0deg); }
    40% { transform: translate(50px, -50px) rotate(20deg); }
    50% { transform: translate(-50px, 20px) rotate(-20deg) scale(1.2); }
    60% { transform: translate(-30px, 50px) rotate(0deg); }
    70% { transform: translate(30px, 50px) rotate(-20deg); }
    80% { transform: translate(-50px, -50px) rotate(20deg); }
    90% { transform: translate(50px, 20px) rotate(0deg); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  }

.ani-up-down-shake {
    --delay: 0s;
    animation: move-shaking 1.76s var(--delay) ease-in-out infinite;
    /* transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px; */
}
  

@keyframes move-shaking {
    0% { transform: rotate(0deg) scale(1); }
   70% { transform: rotate(0deg); }
   80% { transform: rotate(10deg) scale(1); }
   75% { transform: rotate(-10deg); }
   90% { transform: rotate(10deg) scale(1.1); }
   85% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg) scale(1); }
}


.ani-up-down {
    /* --delay: 0s;
    animation: up-down 1s var(--delay) infinite; */
  }
  
  @keyframes up-down {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(0, -50px)scale(1); }
    100% { transform: translate(0, 0) scale(1); }
  }
/* ===================== */

@keyframes firework {
    0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
    50% { width: 0.5vmin; opacity: 1; }
    100% { width: var(--finalSize); opacity: 0; }
  }
  
  /* @keyframes fireworkPseudo {
    0% { transform: translate(-50%, -50%); width: var(--initialSize); opacity: 1; }
    50% { width: 0.5vmin; opacity: 1; }
    100% { width: var(--finalSize); opacity: 0; }
  }
   */
  .firework,
  .firework::before,
  .firework::after
  {
    --initialSize: 0.5vmin;
    --finalSize: 45vmin;
    --particleSize: 0.2vmin;
    --color1: yellow;
    --color2: khaki;
    --color3: white;
    --color4: lime;
    --color5: gold;
    --color6: mediumseagreen;
    --y: -30vmin;
    --x: -50%;
    --initialY: 60vmin;
    content: "";
    animation: firework 2s infinite;
    position: absolute;
    top: 90%;
    left: 10%;
    transform: translate(-50%, var(--y));
    width: var(--initialSize);
    aspect-ratio: 1;
    background: 
      /*
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%,
      */
      
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
      radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
      radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
      
      /* bottom right */
      radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
      radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
      radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
      
      /* bottom left */
      radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
      radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
      radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
      radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
      
      /* top left */
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
      radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
      radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
      radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
      
      /* top right */
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%
      ;
    background-size: var(--initialSize) var(--initialSize);
    background-repeat: no-repeat;
  }
  
  .firework::before {
    --x: -50%;
    --y: -50%;
    --initialY: -50%;
  /*   transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); */
    transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
  /*   animation: fireworkPseudo 2s infinite; */
  }
  
  .firework::after {
    --x: -50%;
    --y: -50%;
    --initialY: -50%;
  /*   transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); */
    transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
  /*   animation: fireworkPseudo 2s infinite; */
  }
  
  .firework:nth-child(2) {
    --x: 30vmin;
  }
  
  .firework:nth-child(2),
  .firework:nth-child(2)::before,
  .firework:nth-child(2)::after {
    --color1: pink;
    --color2: violet;
    --color3: fuchsia;
    --color4: orchid;
    --color5: plum;
    --color6: lavender;  
    --finalSize: 40vmin;
    left: 20%;
    top: 30%;
    animation-delay: -0.25s;
  }
  
  .firework:nth-child(3) {
    --x: -30vmin;
    --y: -50vmin;
  }
  
  .firework:nth-child(3),
  .firework:nth-child(3)::before,
  .firework:nth-child(3)::after {
    --color1: cyan;
    --color2: lightcyan;
    --color3: lightblue;
    --color4: PaleTurquoise;
    --color5: SkyBlue;
    --color6: lavender;
    --finalSize: 35vmin;
    left: 90%;
    top: 100%;
    animation-delay: -0.4s;
  }
  
/* ===================== */