/* ========================================
   MEGA ANIMATIONS LIBRARY - 50+ Effects
   Global Creative Effects for Pulau Banyak
   ======================================== */

/* ========================================
   GEOMETRIC ANIMATIONS
   ======================================== */

/* Rotating square animation */
@keyframes rotateSquare {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* Spinning circle */
@keyframes spinCircle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Pulse beat */
@keyframes pulseBeat {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

/* Wobble effect */
@keyframes wobble {
  0%,
  100% {
    transform: translateX(0px);
  }
  15% {
    transform: translateX(-5px) rotate(-5deg);
  }
  30% {
    transform: translateX(5px) rotate(3deg);
  }
  45% {
    transform: translateX(-5px) rotate(-3deg);
  }
  60% {
    transform: translateX(3px) rotate(2deg);
  }
  75% {
    transform: translateX(-1px) rotate(-1deg);
  }
}

/* Swing animation */
@keyframes swing {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Wiggle animation */
@keyframes wiggle {
  0%,
  100% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(-10deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  30% {
    transform: rotateZ(-10deg);
  }
  40% {
    transform: rotateZ(10deg);
  }
  50% {
    transform: rotateZ(-5deg);
  }
  60% {
    transform: rotateZ(5deg);
  }
  70% {
    transform: rotateZ(-5deg);
  }
  80% {
    transform: rotateZ(5deg);
  }
  90% {
    transform: rotateZ(-2deg);
  }
}

/* Rubber band effect */
@keyframes rubberBand {
  0% {
    transform: scaleX(1);
  }
  30% {
    transform: scaleX(1.25) scaleY(0.75);
  }
  40% {
    transform: scaleX(0.75) scaleY(1.25);
  }
  60% {
    transform: scaleX(1.15) scaleY(0.85);
  }
  100% {
    transform: scaleX(1) scaleY(1);
  }
}

/* Jello effect */
@keyframes jello {
  0%,
  11.1%,
  100% {
    transform: skewX(0deg) skewY(0deg);
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-6.25deg) skewY(-6.25deg);
  }
  55.5% {
    transform: skewX(3.125deg) skewY(3.125deg);
  }
  66.6% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  77.7% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  88.8% {
    transform: skewX(-1.5625deg) skewY(-1.5625deg);
  }
}

/* ========================================
   ENTRANCE ANIMATIONS
   ======================================== */

/* Zoom in entrance */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Zoom out entrance */
@keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

/* Bounce entrance */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
    transform: scale3d(1.05, 1.05, 1.05);
  }
  70% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

/* Elastic entrance */
@keyframes elasticIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  55% {
    opacity: 1;
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Back entrance */
@keyframes backInDown {
  0% {
    opacity: 0;
    transform: translateY(-1200px) scale(0.7);
  }
  80% {
    opacity: 1;
    transform: translateY(0px) scale(0.993);
  }
  100% {
    transform: scale(1);
  }
}

/* Roll entrance */
@keyframes rollIn {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Slide down entrance */
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Flip entrance */
@keyframes flipInX {
  0% {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
  40% {
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
  }
}

/* ========================================
   ATTENTION SEEKERS
   ======================================== */

/* Flash attention */
@keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

/* Shake effect */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(2px);
  }
}

/* Tada effect */
@keyframes tada {
  0% {
    transform: scale3d(1, 1, 1) rotate(0deg);
  }
  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  100% {
    transform: scale3d(1, 1, 1) rotate(0deg);
  }
}

/* Pulse animation */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 180, 216, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(0, 180, 216, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 180, 216, 0);
  }
}

/* Rainbow animation */
@keyframes rainbow {
  0% {
    background-position: 0% 82%;
  }
  50% {
    background-position: 100% 19%;
  }
  100% {
    background-position: 0% 82%;
  }
}

/* ========================================
   MOTION EFFECTS
   ======================================== */

/* Scroll peek animation */
@keyframes scrollPeek {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Slide in from left */
@keyframes slideFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in from right */
@keyframes slideFromRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in from top */
@keyframes slideFromTop {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide in from bottom */
@keyframes slideFromBottom {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Diagonal slide */
@keyframes diagonalSlide {
  from {
    opacity: 0;
    transform: translate(-50px, -50px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* ========================================
   NATURE-INSPIRED ANIMATIONS
   ======================================== */

/* Leaf float animation */
@keyframes leafFloat {
  0%,
  100% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: translateX(20px) translateY(-10px) rotate(10deg);
  }
  50% {
    transform: translateX(-10px) translateY(0px) rotate(-10deg);
  }
  75% {
    transform: translateX(10px) translateY(10px) rotate(5deg);
  }
}

/* Feather fall animation */
@keyframes featherFall {
  0% {
    transform: translateY(-100vh) rotateZ(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotateZ(360deg);
    opacity: 0;
  }
}

/* Wind blow animation */
@keyframes windBlow {
  0%,
  100% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(20px);
  }
  75% {
    transform: translateX(-20px);
  }
}

/* Sea sway animation */
@keyframes seaSway {
  0%,
  100% {
    transform: translateY(0px) rotateZ(0deg);
  }
  25% {
    transform: translateY(-20px) rotateZ(2deg);
  }
  50% {
    transform: translateY(0px) rotateZ(0deg);
  }
  75% {
    transform: translateY(-15px) rotateZ(-2deg);
  }
}

/* ========================================
   GRADIENT & COLOR ANIMATIONS
   ======================================== */

/* Rainbow gradient shift */
@keyframes rainbowGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Color pulse */
@keyframes colorPulse {
  0%,
  100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(360deg);
  }
}

/* Glow animation */
@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(0, 180, 216, 0.5);
    text-shadow: 0 0 5px rgba(0, 180, 216, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 180, 216, 1);
    text-shadow: 0 0 10px rgba(0, 180, 216, 1);
  }
}

/* ========================================
   TEXT ANIMATIONS
   ======================================== */

/* Typewriter effect */
@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Blinking cursor */
@keyframes blink {
  0%,
  49%,
  100% {
    opacity: 1;
  }
  50%,
  99% {
    opacity: 0;
  }
}

/* Wave text */
@keyframes waveText {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Letter spacing animation */
@keyframes letterSpacing {
  0% {
    letter-spacing: 0px;
  }
  50% {
    letter-spacing: 5px;
  }
  100% {
    letter-spacing: 0px;
  }
}

/* ========================================
   BORDER & OUTLINE ANIMATIONS
   ======================================== */

/* Neon glow */
@keyframes neonGlow {
  0%,
  100% {
    text-shadow:
      0 0 10px #00b4d8,
      0 0 20px #00b4d8;
    box-shadow: 0 0 10px #00b4d8;
  }
  50% {
    text-shadow:
      0 0 20px #00b4d8,
      0 0 30px #06ffa5;
    box-shadow: 0 0 20px #00b4d8;
  }
}

/* Border animation */
@keyframes borderAnimation {
  0% {
    border-width: 0px;
  }
  50% {
    border-width: 3px;
  }
  100% {
    border-width: 0px;
  }
}

/* Outline animation */
@keyframes outlineAnimation {
  0% {
    outline-width: 0px;
    outline-offset: 0px;
  }
  50% {
    outline-width: 2px;
    outline-offset: 5px;
  }
  100% {
    outline-width: 0px;
    outline-offset: 0px;
  }
}

/* ========================================
   UTILITY ANIMATION CLASSES
   ======================================== */

.animate-rotate-square {
  animation: rotateSquare 3s infinite;
}
.animate-spin-circle {
  animation: spinCircle 2s linear infinite;
}
.animate-pulse-beat {
  animation: pulseBeat 1.5s infinite;
}
.animate-wobble {
  animation: wobble 1s infinite;
}
.animate-swing {
  animation: swing 2s infinite;
}
.animate-wiggle {
  animation: wiggle 2s infinite;
}
.animate-rubber-band {
  animation: rubberBand 1s infinite;
}
.animate-jello {
  animation: jello 1.5s infinite;
}

.animate-zoom-in {
  animation: zoomIn 0.6s ease-out;
}
.animate-zoom-out {
  animation: zoomOut 0.6s ease-out;
}
.animate-bounce-in {
  animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.animate-elastic-in {
  animation: elasticIn 0.8s ease-out;
}
.animate-back-in {
  animation: backInDown 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.animate-roll-in {
  animation: rollIn 0.8s ease-out;
}
.animate-slide-down {
  animation: slideDown 0.6s ease-out;
}
.animate-flip-in {
  animation: flipInX 0.8s ease-out;
}

.animate-flash {
  animation: flash 1.5s infinite;
}
.animate-shake {
  animation: shake 0.8s infinite;
}
.animate-tada {
  animation: tada 1.5s infinite;
}
.animate-pulse {
  animation: pulse 2s infinite;
}
.animate-rainbow {
  animation: rainbow 5s ease infinite;
}

.animate-scroll-peek {
  animation: scrollPeek 2s ease-in-out infinite;
}
.animate-slide-from-left {
  animation: slideFromLeft 0.6s ease-out;
}
.animate-slide-from-right {
  animation: slideFromRight 0.6s ease-out;
}
.animate-slide-from-top {
  animation: slideFromTop 0.6s ease-out;
}
.animate-slide-from-bottom {
  animation: slideFromBottom 0.6s ease-out;
}
.animate-diagonal-slide {
  animation: diagonalSlide 0.6s ease-out;
}

.animate-leaf-float {
  animation: leafFloat 4s infinite;
}
.animate-feather-fall {
  animation: featherFall 6s ease-in infinite;
}
.animate-wind-blow {
  animation: windBlow 3s ease-in-out infinite;
}
.animate-sea-sway {
  animation: seaSway 4s ease-in-out infinite;
}

.animate-rainbow-grad {
  animation: rainbowGradient 8s ease infinite;
}
.animate-color-pulse {
  animation: colorPulse 6s infinite;
}
.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

.animate-typewriter {
  animation: typewriter 3s steps(40, end);
}
.animate-blink-cursor {
  animation: blink 1s step-start infinite;
}
.animate-wave-text {
  animation: waveText 1s ease-in-out infinite;
}
.animate-letter-spacing {
  animation: letterSpacing 2s infinite;
}

.animate-neon-glow {
  animation: neonGlow 2s ease-in-out infinite;
}
.animate-border {
  animation: borderAnimation 2s infinite;
}
.animate-outline {
  animation: outlineAnimation 2s infinite;
}

/* ========================================
   STAGGER ANIMATIONS
   ======================================== */

.stagger-1 {
  animation-delay: 0.1s;
}
.stagger-2 {
  animation-delay: 0.2s;
}
.stagger-3 {
  animation-delay: 0.3s;
}
.stagger-4 {
  animation-delay: 0.4s;
}
.stagger-5 {
  animation-delay: 0.5s;
}
.stagger-6 {
  animation-delay: 0.6s;
}
.stagger-7 {
  animation-delay: 0.7s;
}
.stagger-8 {
  animation-delay: 0.8s;
}
.stagger-9 {
  animation-delay: 0.9s;
}
.stagger-10 {
  animation-delay: 1s;
}

/* ========================================
   RESPONSIVE & PERFORMANCE
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}