/* ============================================================
   ANIMATIONS - Tolulope & Olawale Wedding
   ============================================================ */

/* ---- Keyframes ---- */

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}

@keyframes cakeRise {
  0%   { opacity: 0; transform: translateY(28px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cakeTopperPop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  70%  { opacity: 1; transform: scale(1.18) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes cakeCandlePop {
  0%   { opacity: 0; transform: translateY(10px) scale(0.6); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cakeFlicker {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  35%      { transform: translateY(-1px) scale(1.05, 0.95); opacity: 0.92; }
  70%      { transform: translateY(0) scale(0.95, 1.05); opacity: 1; }
}

@keyframes cakePetalFloat {
  0%   { opacity: 0; transform: translateY(0) translateX(0) scale(0.6); }
  20%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-60px) translateX(var(--drift, 8px)) scale(1.1); }
}

@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% { transform: rotate(45deg) translateY(0); }
  40% { transform: rotate(45deg) translateY(8px); }
  60% { transform: rotate(45deg) translateY(4px); }
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ringFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(5deg); }
}

@keyframes trailFade {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.2); }
}

@keyframes petalFall {
  0% {
    transform: translateY(-10%) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(110vh) translateX(var(--drift, 100px)) rotate(var(--rotate, 720deg));
    opacity: 0;
  }
}

@keyframes sparkle {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }
}

@keyframes heartFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translateY(-20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-200px) scale(0.3) rotate(var(--heart-rotate, 15deg));
  }
}

@keyframes confettiFall {
  0% {
    transform: translateY(-100%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(var(--confetti-rotate, 720deg));
    opacity: 0;
  }
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes gentleSway {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

/* ---- WebKit/Safari Patched Keyframes ---- */
@keyframes numberFlip {
  0% { 
    -webkit-transform: rotateX(0) translateZ(0); 
    transform: rotateX(0) translateZ(0); 
  }
  50% { 
    -webkit-transform: rotateX(-90deg) translateZ(1px); 
    transform: rotateX(-90deg) translateZ(1px); 
    opacity: 0.5; 
  }
  100% { 
    -webkit-transform: rotateX(0) translateZ(0); 
    transform: rotateX(0) translateZ(0); 
    opacity: 1; 
  }
}

@keyframes polaroidIn {
  0% {
    opacity: 0;
    -webkit-transform: rotate(var(--rot, 0deg)) scale(0.6) translateY(30px) translateZ(0);
    transform: rotate(var(--rot, 0deg)) scale(0.6) translateY(30px) translateZ(0);
  }
  60% {
    -webkit-transform: rotate(var(--rot, 0deg)) scale(1.05) translateY(-4px) translateZ(1px);
    transform: rotate(var(--rot, 0deg)) scale(1.05) translateY(-4px) translateZ(1px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(var(--rot, 0deg)) scale(1) translateY(0) translateZ(0);
    transform: rotate(var(--rot, 0deg)) scale(1) translateY(0) translateZ(0);
  }
}

/* ---- Petal Styles ---- */
.petal {
  position: absolute;
  top: -5%;
  pointer-events: none;
  z-index: 1;
  animation: petalFall var(--fall-duration, 8s) var(--fall-delay, 0s) linear infinite;
  opacity: 0;
}

.petal-shape {
  width: var(--petal-size, 20px);
  height: var(--petal-size, 20px);
  position: relative;
}

.petal-shape::before,
.petal-shape::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50% 0 50% 50%;
}

.petal-shape::before {
  background: var(--petal-color, rgba(245, 183, 197, 0.7));
  transform: rotate(-15deg);
}

.petal-shape::after {
  background: var(--petal-color, rgba(245, 183, 197, 0.5));
  transform: rotate(15deg);
  top: -30%;
  left: 20%;
}

/* ---- Sparkle Dots ---- */
.sparkle-dot {
  position: absolute;
  width: var(--sparkle-size, 4px);
  height: var(--sparkle-size, 4px);
  background: var(--gold);
  border-radius: 50%;
  animation: sparkle var(--sparkle-duration, 2s) var(--sparkle-delay, 0s) ease-in-out infinite;
  pointer-events: none;
}

/* ---- Floating Hearts ---- */
.floating-heart {
  position: absolute;
  bottom: 0;
  pointer-events: none;
  animation: heartFloat var(--heart-duration, 4s) var(--heart-delay, 0s) ease-out forwards;
  font-size: var(--heart-size, 16px);
  color: var(--pink);
  opacity: 0;
}

/* ---- Loading Ring Animation ---- */
.ring {
  position: absolute;
  border: 2px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
}

.ring-1 {
  width: 120px;
  height: 120px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ringPulse 2s 0.2s ease-out infinite;
}

.ring-2 {
  width: 160px;
  height: 160px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ringPulse 2s 0.5s ease-out infinite;
}

@keyframes ringPulse {
  0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

/* ---- Parallax helper ---- */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ---- Number flip animation ---- */
.countdown-number.flip {
  animation: numberFlip 0.4s ease;
}

/* ---- Wish card entrance ---- */
.wish-card.new {
  animation: fadeInUp 0.6s ease forwards, wishGlow 1s 0.6s ease forwards;
}

@keyframes wishGlow {
  0% { box-shadow: 0 0 20px rgba(212, 165, 32, 0.4); }
  100% { box-shadow: 0 4px 30px rgba(45, 106, 46, 0.08); }
}

/* ---- Smooth section reveals ---- */
.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Photo hover bloom ---- */
.gallery-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(245, 183, 197, 0.2), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  pointer-events: none;
}

.gallery-item:hover::before {
  opacity: 1;
}

/* ---- Toast champagne bubble animation ---- */
.toast-champagne svg circle {
  animation: champagneBubble 3s ease-in-out infinite;
}

.toast-champagne svg circle:nth-child(4) {
  animation-delay: 0.5s;
}

.toast-champagne svg circle:nth-child(5) {
  animation-delay: 1s;
}

@keyframes champagneBubble {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* ---- Notification toast (for copy/success messages) ---- */
.toast-notification {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--green);
  color: var(--white);
  padding: 12px 28px;
  border-radius: 30px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 8px 30px rgba(45, 106, 46, 0.3);
  z-index: 9999;
  opacity: 0;
  animation: toastIn 0.4s ease forwards;
}

.toast-notification.out {
  animation: toastOut 0.4s ease forwards;
}

@keyframes toastIn {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* ---- Safari Hardware Layer Isolation Fixes ---- */
/* ============================================================
   SAFARI / iOS FLIP CARD COMPATIBILITY FIXES
   ============================================================ */

/*
   Keep 3D rendering only where it is actually needed.
   Aggressive translateZ() hacks break image rendering on iOS Safari.
*/

.card-container,
.card-inner,
.flip-card,
.flip-inner {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}


/* ------------------------------------------------------------
   Flip card faces
   ------------------------------------------------------------ */

.card-front,
.card-back,
.flip-front,
.flip-back {

  position: absolute;
  inset: 0;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  overflow: hidden;
}


/* Front face */

.card-front,
.flip-front {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}


/* Back face */

.card-back,
.flip-back {

  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);

}


/* ------------------------------------------------------------
   Flip animation layer
   ------------------------------------------------------------ */

.card-inner,
.flip-inner {

  transition:
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);

  -webkit-transition:
    -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);

  transform-origin: center;
  -webkit-transform-origin: center;

  will-change: transform;

}


/* Active flipped state */

.card-inner.flipped,
.flip-inner.flipped {

  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);

}


/* ------------------------------------------------------------
   Images inside cards
   ------------------------------------------------------------ */

.card-front img,
.card-back img,
.flip-front img,
.flip-back img {

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

}


/* ------------------------------------------------------------
   Gallery cards
   ------------------------------------------------------------ */

.gallery-grid .gallery-item,
.polaroid-item {

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;

}


/* Remove Safari overflow clipping issues */

.gallery-grid .gallery-item,
.polaroid-item {

  overflow: visible;

}


/* ------------------------------------------------------------
   iOS Safari rendering stabilizer
   ------------------------------------------------------------ */

@supports (-webkit-touch-callout: none) {

  .card-inner,
  .flip-inner {

    -webkit-perspective: 1000px;
    perspective: 1000px;

  }


  .card-front,
  .card-back,
  .flip-front,
  .flip-back {

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

  }

}