/* Floating Decoration Animations - iOS Safari Compatible */

/* CSS Custom Properties for dynamic intensity control */
:root {
  --wrsvp-sway-deg: 5deg;
  --wrsvp-float-px: 20px;
  --wrsvp-pulse-scale: 1.1;
  --wrsvp-zoom-scale: 1.2;
  --wrsvp-bounce-px: 15px;
  --wrsvp-swing-deg: 15deg;
}

/* =============================================================================
   iOS SAFARI WEBKIT KEYFRAMES - HARDCODED VALUES (No calc() support)
   ============================================================================= */

@-webkit-keyframes wrsvp-sway {

  0%,
  100% {
    -webkit-transform: rotate(-5deg) translateZ(0);
    transform: rotate(-5deg) translateZ(0);
  }

  50% {
    -webkit-transform: rotate(5deg) translateZ(0);
    transform: rotate(5deg) translateZ(0);
  }
}

@-webkit-keyframes wrsvp-float {

  0%,
  100% {
    -webkit-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
  }

  50% {
    -webkit-transform: translateY(-20px) translateZ(0);
    transform: translateY(-20px) translateZ(0);
  }
}

@-webkit-keyframes wrsvp-rotate {
  from {
    -webkit-transform: rotate(0deg) translateZ(0);
    transform: rotate(0deg) translateZ(0);
  }

  to {
    -webkit-transform: rotate(360deg) translateZ(0);
    transform: rotate(360deg) translateZ(0);
  }
}

@-webkit-keyframes wrsvp-pulse {

  0%,
  100% {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
  }

  50% {
    -webkit-transform: scale(1.1) translateZ(0);
    transform: scale(1.1) translateZ(0);
  }
}

@-webkit-keyframes wrsvp-bounce {

  0%,
  100% {
    -webkit-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
  }

  25% {
    -webkit-transform: translateY(-15px) translateZ(0);
    transform: translateY(-15px) translateZ(0);
  }

  50% {
    -webkit-transform: translateY(-7px) translateZ(0);
    transform: translateY(-7px) translateZ(0);
  }

  75% {
    -webkit-transform: translateY(-12px) translateZ(0);
    transform: translateY(-12px) translateZ(0);
  }
}

@-webkit-keyframes wrsvp-swing {

  0%,
  100% {
    -webkit-transform: rotate(0deg) translateZ(0);
    transform: rotate(0deg) translateZ(0);
  }

  20% {
    -webkit-transform: rotate(15deg) translateZ(0);
    transform: rotate(15deg) translateZ(0);
  }

  40% {
    -webkit-transform: rotate(-10deg) translateZ(0);
    transform: rotate(-10deg) translateZ(0);
  }

  60% {
    -webkit-transform: rotate(6deg) translateZ(0);
    transform: rotate(6deg) translateZ(0);
  }

  80% {
    -webkit-transform: rotate(-4deg) translateZ(0);
    transform: rotate(-4deg) translateZ(0);
  }
}

@-webkit-keyframes wrsvp-fade {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

@-webkit-keyframes wrsvp-zoom {

  0%,
  100% {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
  }

  50% {
    -webkit-transform: scale(1.2) translateZ(0);
    transform: scale(1.2) translateZ(0);
  }
}

/* =============================================================================
   STANDARD KEYFRAMES - For Modern Browsers (with CSS Variables)
   ============================================================================= */

@keyframes wrsvp-sway {

  0%,
  100% {
    transform: rotate(calc(var(--wrsvp-sway-deg) * -1)) translateZ(0);
  }

  50% {
    transform: rotate(var(--wrsvp-sway-deg)) translateZ(0);
  }
}

@keyframes wrsvp-float {

  0%,
  100% {
    transform: translateY(0px) translateZ(0);
  }

  50% {
    transform: translateY(calc(var(--wrsvp-float-px) * -1)) translateZ(0);
  }
}

@keyframes wrsvp-rotate {
  from {
    transform: rotate(0deg) translateZ(0);
  }

  to {
    transform: rotate(360deg) translateZ(0);
  }
}

@keyframes wrsvp-pulse {

  0%,
  100% {
    transform: scale(1) translateZ(0);
  }

  50% {
    transform: scale(var(--wrsvp-pulse-scale)) translateZ(0);
  }
}

@keyframes wrsvp-bounce {

  0%,
  100% {
    transform: translateY(0) translateZ(0);
  }

  25% {
    transform: translateY(calc(var(--wrsvp-bounce-px) * -1)) translateZ(0);
  }

  50% {
    transform: translateY(calc(var(--wrsvp-bounce-px) * -0.5)) translateZ(0);
  }

  75% {
    transform: translateY(calc(var(--wrsvp-bounce-px) * -0.8)) translateZ(0);
  }
}

@keyframes wrsvp-swing {

  0%,
  100% {
    transform: rotate(0deg) translateZ(0);
  }

  20% {
    transform: rotate(var(--wrsvp-swing-deg)) translateZ(0);
  }

  40% {
    transform: rotate(calc(var(--wrsvp-swing-deg) * -0.7)) translateZ(0);
  }

  60% {
    transform: rotate(calc(var(--wrsvp-swing-deg) * 0.4)) translateZ(0);
  }

  80% {
    transform: rotate(calc(var(--wrsvp-swing-deg) * -0.3)) translateZ(0);
  }
}

@keyframes wrsvp-fade {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

@keyframes wrsvp-zoom {

  0%,
  100% {
    transform: scale(1) translateZ(0);
  }

  50% {
    transform: scale(var(--wrsvp-zoom-scale)) translateZ(0);
  }
}

/* =============================================================================
   BASE CONTAINER CLASS - iOS Safari Optimized
   ============================================================================= */

.wrsvp-floating-img {
  /* Display & Box Model */
  display: inline-block;
  max-width: 100%;

  /* Animation Properties */
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;

  /* iOS Safari: GPU Acceleration via backface-visibility */
  /* REMOVED transform: translateZ(0) to prevent conflict with animation transforms */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  /* CRITICAL for iOS: Hint browser about transform changes */
  will-change: transform;
}

.wrsvp-floating-img img {
  display: block;
  max-width: 100%;
  height: auto;
  /* iOS Safari: Prevent image optimization issues */
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

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

.wrsvp-anim-sway {
  -webkit-animation-name: wrsvp-sway;
  animation-name: wrsvp-sway;
}

.wrsvp-anim-float {
  -webkit-animation-name: wrsvp-float;
  animation-name: wrsvp-float;
}

.wrsvp-anim-rotate {
  -webkit-animation-name: wrsvp-rotate;
  animation-name: wrsvp-rotate;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.wrsvp-anim-pulse {
  -webkit-animation-name: wrsvp-pulse;
  animation-name: wrsvp-pulse;
}

.wrsvp-anim-bounce {
  -webkit-animation-name: wrsvp-bounce;
  animation-name: wrsvp-bounce;
}

.wrsvp-anim-swing {
  -webkit-animation-name: wrsvp-swing;
  animation-name: wrsvp-swing;
}

.wrsvp-anim-fade {
  -webkit-animation-name: wrsvp-fade;
  animation-name: wrsvp-fade;
}

.wrsvp-anim-zoom {
  -webkit-animation-name: wrsvp-zoom;
  animation-name: wrsvp-zoom;
}

/* =============================================================================
   FLIP TRANSFORMS
   ============================================================================= */

.wrsvp-flip-horizontal img {
  -webkit-transform: scaleX(-1) translateZ(0);
  transform: scaleX(-1) translateZ(0);
}

.wrsvp-flip-vertical img {
  -webkit-transform: scaleY(-1) translateZ(0);
  transform: scaleY(-1) translateZ(0);
}

.wrsvp-flip-horizontal.wrsvp-flip-vertical img {
  -webkit-transform: scaleX(-1) scaleY(-1) translateZ(0);
  transform: scaleX(-1) scaleY(-1) translateZ(0);
}