/* Animations for Flunexo */

/* Logo Animation */
@keyframes morph {
  0% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
  25% {
    border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%;
  }
  50% {
    border-radius: 70% 30% 50% 50% / 40% 60% 40% 60%;
  }
  75% {
    border-radius: 40% 60% 70% 30% / 70% 30% 70% 30%;
  }
  100% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
}

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

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.logo-shape {
  animation: morph 8s infinite, rotate 12s infinite linear;
}

.shape1 {
  animation-delay: 0s;
}

.shape2 {
  animation-delay: -2s;
}

.shape3 {
  animation-delay: -4s;
}

/* Banner Shapes Animation */
.shape {
  animation: float 6s ease-in-out infinite;
}

.circle {
  animation-duration: 7s;
  animation-delay: 0s;
}

.triangle {
  animation-duration: 8s;
  animation-delay: -2s;
}

.square {
  animation-duration: 9s;
  animation-delay: -4s;
}

.rectangle {
  animation-duration: 10s;
  animation-delay: -6s;
}

/* Abstract Button Animation */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 42, 109, 0.6);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(255, 42, 109, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 42, 109, 0);
  }
}

.abstract-btn {
  animation: pulse 2s infinite;
}

/* Abstract Icons Animation */
@keyframes iconMorph {
  0% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
  50% {
    border-radius: 70% 30% 30% 70% / 70% 30% 70% 30%;
  }
  100% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
}

.abstract-icon {
  animation: iconMorph 5s infinite, float 5s ease-in-out infinite;
}

.icon1 {
  animation-delay: 0s;
}

.icon2 {
  animation-delay: -1.5s;
}

.icon3 {
  animation-delay: -3s;
}

/* Headline Animation */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.enigmatic-headline {
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
}

/* Game Card Hover Effects */
@keyframes borderGlow {
  0% {
    box-shadow: 0 0 5px var(--primary-pink);
  }
  33% {
    box-shadow: 0 0 15px var(--secondary-teal);
  }
  66% {
    box-shadow: 0 0 15px var(--accent-violet);
  }
  100% {
    box-shadow: 0 0 5px var(--primary-pink);
  }
}

.game-card:hover .game-frame {
  animation: borderGlow 3s infinite;
}

/* Form Animations */
@keyframes inputFocus {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.form-group input:focus ~ .form-line:after,
.form-group textarea:focus ~ .form-line:after {
  animation: inputFocus 0.3s forwards;
}

/* Page Transition */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

section, .game-container, .policy-container {
  animation: fadeIn 0.8s ease-out forwards;
}

/* Hamburger Menu Animation */
@keyframes hamburgerTop {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(8px) rotate(0);
  }
  100% {
    transform: translateY(8px) rotate(45deg);
  }
}

@keyframes hamburgerMiddle {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes hamburgerBottom {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(-8px) rotate(-45deg);
  }
}

.hamburger.active span:first-child {
  animation: hamburgerTop 0.5s forwards;
}

.hamburger.active span:nth-child(2) {
  animation: hamburgerMiddle 0.5s forwards;
}

.hamburger.active span:last-child {
  animation: hamburgerBottom 0.5s forwards;
}

/* Contact Icon Animation */
.abstract-contact-icon {
  animation: iconMorph 6s infinite, rotate 15s infinite linear;
}

/* Disclaimer Animation */
@keyframes attentionPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.disclaimer h3 {
  animation: attentionPulse 3s infinite;
}

/* Social Icon Hover Animation */
@keyframes socialIconHover {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.social-icon:hover {
  animation: socialIconHover 0.5s;
}

/* Button Hover Animation */
@keyframes buttonShine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.abstract-btn:hover, .play-btn:hover {
  background-size: 200% 200%;
  animation: buttonShine 1s linear forwards;
}

/* Scroll Indicator */
@keyframes scrollIndicator {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  75% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Art Piece Animation */
@keyframes artFilter {
  0% {
    filter: hue-rotate(0deg) brightness(1);
  }
  50% {
    filter: hue-rotate(180deg) brightness(1.2);
  }
  100% {
    filter: hue-rotate(360deg) brightness(1);
  }
}

.art-piece {
  animation: artFilter 20s infinite linear;
}