main {
  animation-play-state: paused !important;
}

main * {
  animation-play-state: paused !important;
}

main.animate-in,
main.animate-in * {
  animation-play-state: running !important;
}

/* -------------------------------------------------------------- HOME ------------------------------------------------------------ */

/*---------- TEXT && BUTTON ----------*/
#home .home-main-text-button-container .home-main-text {
  animation: slideExpandLeft 1s ease-out;
}

#home .home-main-text-button-container .home-main-btn {
  animation: burnReveal 1s ease-out 0.5s both;
}

/*---------- SOCIAL MEDIA ----------*/
/* -- YOUTUBE -- */
#home #youtube-float {
  animation: floatingUpDown 12s ease-in-out infinite, youtubeSlideIn 1.2s ease-out both;
}

/* -- TELEGRAM -- */
#home #telegram-float {
  animation: floatingUpDown 12s ease-in-out infinite, telegramSlideIn 1.6s ease-out 0.4s both;
}

/* -- FACEBOOK -- */
#home #facebook-float {
  animation: floatingUpDown 12s ease-in-out infinite, facebookSlideIn 2s ease-out 0.8s both;
}

/* -- INSTAGRAM -- */
#home #instagram-float {
  animation: floatingUpDown 12s ease-in-out infinite, instagramSlideIn 2.4s ease-out 1.2s both;
}

/*-- GOOGLE -- */
#home #google-float {
  animation: floatingUpDown 12s ease-in-out infinite, googleSlideIn 2.8s ease-out 1.6s both;
}

@keyframes youtubeSlideIn {
  0% {
    transform: translate(10vw, 2vh);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes telegramSlideIn {
  0% {
    transform: translate(10vw, 5vh);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes facebookSlideIn {
  0% {
    transform: translate(6.5vw, -15vh);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes instagramSlideIn {
  0% {
    transform: translate(-5vw, -5vh);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes googleSlideIn {
  0% {
    transform: translate(-10vw, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/*---------- FEATURE LABELS ----------*/
#home .feature-labels #feature1 {
  animation: bubblePopZoom 0.6s ease-out 0.5s both;
}

#home .feature-labels #feature2 {
  animation: bubblePopZoom 0.6s ease-out 0.8s both;
}

#home .feature-labels #feature3 {
  animation: bubblePopZoom 0.6s ease-out 1.1s both;
}

@keyframes bubblePopZoom {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9);
    opacity: 1;
  }
  85% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* -------------------------------------------------------------- ABOUT ----------------------------------------------------------- */

#about .about-container .about-title1 {
  animation: slideFromMidR 1s ease-out;
}

#about .about-container .about-content {
  animation: pixelEffect 1s ease-out;
}

#about .about-container .about-button {
  animation: slideFromMidL 1s ease-out;
}

#about .title-slider-container .about-title2 {
  animation: burnReveal 1s ease-out;
}

/*---------- FLOATING ICONS ----------*/
/* -- COMET --*/
#about #comet-float {
  animation: pendulumSwing 4s infinite linear;
}

/* -- PETAL 1 --*/
#about #petal1-float {
  animation: floatZigzag 4s infinite linear;
}

/* -- INSTAGRAM --*/
#about #instagram-float {
  animation: oceanWave 4s infinite linear;
}

/*-- GOOGLE --*/
#about #google-float {
  animation: zigzagBounce 4s infinite linear;
}

/* -- PETAL 2 --*/
#about #petal2-float {
  animation: waveDrift 4s infinite linear;
}

/*-- SATURN --*/
#about #saturn-float {
  animation: spiralSpin 6s infinite linear;
}

/* --------------- SLIDER --------------- */
#about .title-slider-container .slider-wrapper .slider1-track {
  animation: scroll1 30s linear infinite;
}

#about .title-slider-container .slider-wrapper .slider2-track {
  animation: scroll2 30s linear infinite;
}

/* Animations */
@keyframes scroll1 {
  0% {
    transform: translateX(-225%);
  }
  100% {
    transform: translateX(-160%);
  }
}

@keyframes scroll2 {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-150%);
  }
}

/* -------------------------------------------------------------- SERVICES ----------------------------------------------------------- */

/*---------- TITLE && CONTENT && BUTTON ----------*/
#services .services-container .services-title {
  animation: slideFromTop 1s ease-out;
}

#services .services-container .services-content {
  animation: zoomOut 1s ease-out;
}

#services .services-container .services-button {
  animation: slideFromBottom 1s ease-out;
}

/*---------- FLOATING ICONS ----------*/
/* -- DICE 1 --*/
#services #dice1-float {
  animation: oceanWave 4s infinite linear;
}

/* -- DICE 2 --*/
#services #dice2-float {
  animation: tornadoSpin 4s infinite linear;
}

/*-- FACEBOOK --*/
#services #facebook-float {
  animation: quantumFlicker 4s infinite linear;
}

/* -- CHIP 1 --*/
#services #chip1-float {
  animation: floatZigzag 4s infinite linear;
}

/*-- CHIP 2 --*/
#services #chip2-float {
  animation: magneticPull 4s infinite linear;
}

/* -- INSTAGRAM --*/
#services #instagram-float {
  animation: zigzagBounce 4s infinite linear;
}

/* -------------------------------------------------------------- FAQ ----------------------------------------------------------- */

/* FLOAT ICONS */
#faq .faq-container .float-icons #saturn-float {
  animation: orbitCircle 6s infinite linear;
}

#faq .faq-container .float-icons #star1-float {
  animation: bounceDiagonal 4s infinite linear;
}

#faq .faq-container .float-icons #star2-float {
  animation: zigzagBounce 5s infinite linear;
}

#faq .faq-container .float-icons #star3-float {
  animation: spiralSpin 6s infinite linear;
}

#faq .faq-container .float-icons #telegram-float {
  animation: elasticSqueeze 4s infinite linear;
}

#faq .faq-container .float-icons #youtube-float {
  animation: wobbleRotate 4s infinite linear;
}

/* TEXT CONTENT */
#faq .faq-container .faq-text .faq-title {
  animation: cascadeFromTop 0.8s ease-out;
}

#faq .faq-container .faq-text .faq-accordion .faq-item:nth-child(1) {
  animation: slideExpandLeft 0.7s ease-out 0.2s both;
}

#faq .faq-container .faq-text .faq-accordion .faq-item:nth-child(2) {
  animation: slideExpandLeft 0.7s ease-out 0.5s both;
}

#faq .faq-container .faq-text .faq-accordion .faq-item:nth-child(3) {
  animation: slideExpandLeft 0.7s ease-out 0.8s both;
}

#faq .faq-container .faq-text .faq-accordion .faq-item:nth-child(4) {
  animation: slideExpandLeft 0.7s ease-out 1.1s both;
}

#faq .faq-container .faq-text .faq-accordion .faq-item:nth-child(5) {
  animation: slideExpandLeft 0.7s ease-out 1.4s both;
}

/* -------------------------------------------------------------- CONTACT ------------------------------------------------------------ */
/*---------- TEXT && BUTTON ----------*/
#contact .home-main-text-button-container .home-main-text {
  animation: slideFromTop 1s ease-out;
}

#contact .home-main-text-button-container .home-main-btn {
  animation: slideFromBottom 1s ease-out;
}

/* ---- YOUTUBE ---- */
#contact #youtube-float {
  animation: pendulumSwing 4s infinite linear;
}

/* -- TELEGRAM --*/
#contact #telegram-float {
  animation: floatZigzag 4s infinite linear;
}

/* -- FACEBOOK --*/
#contact #facebook-float {
  animation: waveDrift 4s infinite linear;
}

/*---------- SLIDE ANIMATION ----------*/
@keyframes slideFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideFromMidL {
  from {
    transform: translateX(50%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideFromMidR {
  from {
    transform: translateX(-50%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes zoomOut {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pixelEffect {
  0% {
    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes cascadeFromTop {
  0% {
    transform: translateY(-10vh) scale(0.9);
    opacity: 0;
  }
  60% {
    transform: translateY(2vh) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes slideExpandLeft {
  0% {
    transform: translateX(-15vw) scaleX(0.8);
    opacity: 0;
  }
  70% {
    transform: translateX(1vw) scaleX(1.02);
    opacity: 1;
  }
  100% {
    transform: translateX(0) scaleX(1);
    opacity: 1;
  }
}

@keyframes burnReveal {
  0% {
    opacity: 0;
    filter: blur(6px) brightness(2);
    transform: scale(1.2);
  }
  50% {
    opacity: 0.5;
    filter: blur(3px) brightness(1.5);
  }
  100% {
    opacity: 1;
    filter: blur(0px) brightness(1);
    transform: scale(1);
  }
}

@keyframes unfoldLeft {
  0% {
    transform: perspective(100vw) rotateY(-90deg);
    transform-origin: left;
    opacity: 0;
  }
  100% {
    transform: perspective(100vw) rotateY(0deg);
    transform-origin: left;
    opacity: 1;
  }
}

@keyframes rollInLeft {
  0% {
    transform: translateX(-20vw) rotate(-180deg);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

/* ---------- FLOATING ICON ANIMATIONS ----------*/
@keyframes floatZigzag {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(10px, -5px);
  }

  40% {
    transform: translate(-10px, -10px);
  }

  60% {
    transform: translate(10px, -15px);
  }

  80% {
    transform: translate(-5px, -10px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes spiralSpin {
  0% {
    transform: rotate(0deg) scale(1) translateX(0);
  }
  25% {
    transform: rotate(90deg) scale(1.3) translateX(20px);
  }
  50% {
    transform: rotate(180deg) scale(1) translateX(0);
  }
  75% {
    transform: rotate(270deg) scale(0.7) translateX(-20px);
  }
  100% {
    transform: rotate(360deg) scale(1) translateX(0);
  }
}

@keyframes bounceDiagonal {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(30px, -30px);
  }
  50% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(-30px, 30px);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgba(255, 0, 255, 0));
  }
  50% {
    transform: scale(1.15);
    filter: brightness(1.5) drop-shadow(0 0 20px rgba(255, 0, 255, 0.8));
  }
}

@keyframes wobbleRotate {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  15% {
    transform: rotate(5deg) translateY(-10px);
  }
  30% {
    transform: rotate(-5deg) translateY(0);
  }
  45% {
    transform: rotate(8deg) translateY(-8px);
  }
  60% {
    transform: rotate(-8deg) translateY(0);
  }
  75% {
    transform: rotate(5deg) translateY(-5px);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

@keyframes infinityLoop {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(40px, -20px) rotate(90deg);
  }
  50% {
    transform: translate(0, 0) rotate(180deg);
  }
  75% {
    transform: translate(-40px, 20px) rotate(270deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

@keyframes waveDrift {
  0%,
  100% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(50px) translateY(-15px);
  }
  50% {
    transform: translateX(0) translateY(0);
  }
  75% {
    transform: translateX(-50px) translateY(15px);
  }
}

@keyframes zigzagBounce {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(30px, -25px);
  }
  40% {
    transform: translate(-20px, -10px);
  }
  60% {
    transform: translate(25px, 15px);
  }
  80% {
    transform: translate(-30px, 5px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes orbitCircle {
  0% {
    transform: rotate(0deg) translateX(30px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(30px) rotate(-360deg);
  }
}

@keyframes elasticSqueeze {
  0%,
  100% {
    transform: scaleX(1) scaleY(1);
  }
  25% {
    transform: scaleX(1.4) scaleY(0.6);
  }
  50% {
    transform: scaleX(0.6) scaleY(1.4);
  }
  75% {
    transform: scaleX(1.2) scaleY(0.8);
  }
}

@keyframes pendulumSwing {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
    transform-origin: top center;
  }
  25% {
    transform: rotate(15deg) translateY(10px);
    transform-origin: top center;
  }
  50% {
    transform: rotate(0deg) translateY(0);
    transform-origin: top center;
  }
  75% {
    transform: rotate(-15deg) translateY(10px);
    transform-origin: top center;
  }
}

@keyframes butterflyFlutter {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scaleX(1);
  }
  25% {
    transform: translateY(-15px) rotate(-5deg) scaleX(0.9);
  }
  50% {
    transform: translateY(-5px) rotate(0deg) scaleX(1.1);
  }
  75% {
    transform: translateY(-20px) rotate(5deg) scaleX(0.9);
  }
}

@keyframes tornadoSpin {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  33% {
    transform: translateY(-40px) rotate(180deg) scale(0.7);
  }
  66% {
    transform: translateY(-20px) rotate(360deg) scale(1.1);
  }
  100% {
    transform: translateY(0) rotate(540deg) scale(1);
  }
}

@keyframes heartbeatPulse {
  0%,
  100% {
    transform: scale(1);
  }
  5% {
    transform: scale(1.15);
  }
  10% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.2);
  }
  20% {
    transform: scale(1);
  }
}

@keyframes meteorStreak {
  0% {
    transform: translate(100px, -100px) rotate(45deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(-100px, 100px) rotate(45deg);
    opacity: 0;
  }
}

@keyframes jellyBounce {
  0%,
  100% {
    transform: scaleX(1) scaleY(1) translateY(0);
  }
  30% {
    transform: scaleX(1.25) scaleY(0.75) translateY(0);
  }
  40% {
    transform: scaleX(0.75) scaleY(1.25) translateY(-40px);
  }
  50% {
    transform: scaleX(1.15) scaleY(0.85) translateY(0);
  }
  65% {
    transform: scaleX(0.95) scaleY(1.05) translateY(-15px);
  }
  75% {
    transform: scaleX(1.05) scaleY(0.95) translateY(0);
  }
}

@keyframes magneticPull {
  0%,
  100% {
    transform: scale(1) translateX(0);
  }
  25% {
    transform: scale(0.8) translateX(-20px);
  }
  50% {
    transform: scale(1.2) translateX(0);
  }
  75% {
    transform: scale(0.9) translateX(20px);
  }
}

@keyframes quantumFlicker {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  10% {
    transform: translate(5px, -5px);
    opacity: 0.8;
  }
  20% {
    transform: translate(-3px, 3px);
    opacity: 1;
  }
  30% {
    transform: translate(7px, 2px);
    opacity: 0.7;
  }
  40% {
    transform: translate(-2px, -4px);
    opacity: 1;
  }
  50% {
    transform: translate(4px, 6px);
    opacity: 0.9;
  }
  60% {
    transform: translate(-6px, -2px);
    opacity: 1;
  }
  70% {
    transform: translate(3px, -3px);
    opacity: 0.8;
  }
  80% {
    transform: translate(-4px, 4px);
    opacity: 1;
  }
  90% {
    transform: translate(2px, -1px);
    opacity: 0.9;
  }
}

@keyframes oceanWave {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  25% {
    transform: translateY(-20px) translateX(30px) rotate(5deg);
  }
  50% {
    transform: translateY(0) translateX(60px) rotate(0deg);
  }
  75% {
    transform: translateY(20px) translateX(30px) rotate(-5deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}