/* GERAKAN RAKYAT ANIMATIONS */
@keyframes floatText {
  0% { transform: translateY(80px) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 0.08; }
}

@keyframes swayText {
  0%, 100% { transform: rotate(-2deg) translateX(-8px); }
  50% { transform: rotate(2deg) translateX(8px); }
}

@keyframes floatParticle {
  0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0; }
  10% { opacity: 0.3; }
  90% { opacity: 0.3; }
  100% { transform: translateY(-100vh) rotate(720deg) scale(0); opacity: 0; }
}

@keyframes flagWave {
  0%, 100% { transform: rotate(0deg) scaleY(1); }
  25% { transform: rotate(3deg) scaleY(1.05); }
  75% { transform: rotate(-3deg) scaleY(0.95); }
}

.movement-text-merdeka {
  position: fixed;
  font-size: 12rem;
  font-weight: 900;
  color: #FF6B35;
  opacity: 0.08;
  animation: floatText 3s ease-out forwards, swayText 6s ease-in-out infinite;
  top: 20%;
  left: -3%;
  white-space: nowrap;
  letter-spacing: 25px;
  pointer-events: none;
  z-index: 1;
  text-shadow: 0 0 80px rgba(255, 107, 53, 0.2);
}

.movement-text-indonesia {
  position: fixed;
  font-size: 10rem;
  font-weight: 900;
  color: #FFD700;
  opacity: 0.07;
  animation: floatText 4s ease-out 0.5s forwards, swayText 8s ease-in-out infinite reverse;
  bottom: 15%;
  right: -3%;
  white-space: nowrap;
  letter-spacing: 20px;
  pointer-events: none;
  z-index: 1;
  text-shadow: 0 0 80px rgba(255, 215, 0, 0.2);
}

.movement-particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: floatParticle 12s linear infinite;
}

.movement-particle:nth-child(1) { left: 5%; animation-delay: 0s; width: 6px; height: 6px; background: radial-gradient(circle, #FF6B35, transparent); }
.movement-particle:nth-child(2) { left: 15%; animation-delay: 1.5s; width: 10px; height: 10px; background: radial-gradient(circle, #FFD700, transparent); }
.movement-particle:nth-child(3) { left: 25%; animation-delay: 3s; width: 4px; height: 4px; background: radial-gradient(circle, #FF4444, transparent); }
.movement-particle:nth-child(4) { left: 35%; animation-delay: 0.8s; width: 8px; height: 8px; background: radial-gradient(circle, #FF8C00, transparent); }
.movement-particle:nth-child(5) { left: 45%; animation-delay: 2.2s; width: 5px; height: 5px; background: radial-gradient(circle, #FFFFFF, transparent); }
.movement-particle:nth-child(6) { left: 55%; animation-delay: 4s; width: 7px; height: 7px; background: radial-gradient(circle, #FF6B35, transparent); }
.movement-particle:nth-child(7) { left: 65%; animation-delay: 1s; width: 9px; height: 9px; background: radial-gradient(circle, #FFD700, transparent); }
.movement-particle:nth-child(8) { left: 75%; animation-delay: 3.5s; width: 4px; height: 4px; background: radial-gradient(circle, #FF4444, transparent); }
.movement-particle:nth-child(9) { left: 85%; animation-delay: 2s; width: 6px; height: 6px; background: radial-gradient(circle, #FF8C00, transparent); }
.movement-particle:nth-child(10) { left: 95%; animation-delay: 4.5s; width: 8px; height: 8px; background: radial-gradient(circle, #FFFFFF, transparent); }

.movement-flag {
  position: fixed;
  bottom: 20px;
  width: 45px;
  height: 70px;
  background: linear-gradient(135deg, #FF6B35, #FFD700);
  transform-origin: bottom left;
  animation: flagWave 2.5s ease-in-out infinite;
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}

.movement-flag::after {
  content: '⚡';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  color: #FF6B35;
  opacity: 0.4;
}

.movement-flag-left {
  left: 3%;
  animation-delay: 0s;
}

.movement-flag-right {
  right: 3%;
  left: auto;
  animation-delay: 0.8s;
  transform-origin: bottom right;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 768px) {
  .movement-text-merdeka { font-size: 5rem; top: 25%; left: -8%; letter-spacing: 12px; }
  .movement-text-indonesia { font-size: 4rem; bottom: 20%; right: -8%; letter-spacing: 10px; }
  .movement-flag { width: 30px; height: 50px; }
}

.movement-particle:nth-child(1) { left: 5%; animation-delay: 0s; width: 6px; height: 6px; background: radial-gradient(circle, #FF6B35, transparent); }
.movement-particle:nth-child(2) { left: 15%; animation-delay: 1.5s; width: 10px; height: 10px; background: radial-gradient(circle, #FFD700, transparent); }
.movement-particle:nth-child(3) { left: 25%; animation-delay: 3s; width: 4px; height: 4px; background: radial-gradient(circle, #FF4444, transparent); }
.movement-particle:nth-child(4) { left: 35%; animation-delay: 0.8s; width: 8px; height: 8px; background: radial-gradient(circle, #FF8C00, transparent); }
.movement-particle:nth-child(5) { left: 45%; animation-delay: 2.2s; width: 5px; height: 5px; background: radial-gradient(circle, #FFFFFF, transparent); }
.movement-particle:nth-child(6) { left: 55%; animation-delay: 4s; width: 7px; height: 7px; background: radial-gradient(circle, #FF6B35, transparent); }
.movement-particle:nth-child(7) { left: 65%; animation-delay: 1s; width: 9px; height: 9px; background: radial-gradient(circle, #FFD700, transparent); }
.movement-particle:nth-child(8) { left: 75%; animation-delay: 3.5s; width: 4px; height: 4px; background: radial-gradient(circle, #FF4444, transparent); }
.movement-particle:nth-child(9) { left: 85%; animation-delay: 2s; width: 6px; height: 6px; background: radial-gradient(circle, #FF8C00, transparent); }
.movement-particle:nth-child(10) { left: 95%; animation-delay: 4.5s; width: 8px; height: 8px; background: radial-gradient(circle, #FFFFFF, transparent); }

.movement-flag {
  position: fixed;
  bottom: 20px;
  width: 45px;
  height: 70px;
  background: linear-gradient(135deg, #FF6B35, #FFD700);
  transform-origin: bottom left;
  animation: flagWave 2.5s ease-in-out infinite;
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}

.movement-flag::after {
  content: '⚡';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  color: #FF6B35;
  opacity: 0.4;
}

.movement-flag-left {
  left: 3%;
  animation-delay: 0s;
}

.movement-flag-right {
  right: 3%;
  left: auto;
  animation-delay: 0.8s;
  transform-origin: bottom right;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 768px) {
  .movement-text-merdeka { font-size: 5rem; top: 25%; left: -8%; letter-spacing: 12px; }
  .movement-text-indonesia { font-size: 4rem; bottom: 20%; right: -8%; letter-spacing: 10px; }
  .movement-flag { width: 30px; height: 50px; }
}