/* 
 * Enhanced Minecraft Hearts Animation Styles
 * For Sphynx Tequila Website - Apple Style Aesthetic
 * v2.2 - LARGER and MORE VISIBLE heart animations!
 */

/* Container for the hearts animation */
.love-story-hearts {
  position: absolute;
  top: -25px;
  right: -80px;
  width: 240px;  /* GIGANTIC container for maximum heart visibility */
  height: 180px;
  z-index: 10;
  pointer-events: none;
  overflow: visible;
}

.love-story-header {
  position: relative;
  display: inline-block;
}

/* Individual heart styling with Apple-inspired aesthetics */
.minecraft-heart {
  position: absolute;
  z-index: 100;
  pointer-events: none;
  transform-origin: center;
  filter: drop-shadow(0 2px 3px rgba(255, 0, 0, 0.3));  /* MORE VISIBLE shadow */
  image-rendering: auto; /* Smoother look for Apple aesthetic */
  border-radius: 4px; /* Subtle rounded corners */
  will-change: transform, opacity;
  backdrop-filter: blur(0); /* Performance optimization */
}

/* Modern Apple-style appearance */
.minecraft-heart .heart-svg {
  width: 100%;
  height: 100%;
  shape-rendering: auto; /* Smoother edges for modern look */
  transform: scale(1.2); /* LARGER hearts within container */
}

/* Heart color variations with modern palette */
.minecraft-heart {
  --heart-color: #ff2d55; /* Default Apple red */
}

/* Automatically applied by JS with style.setProperty */
/* 
Color palette:
  - #ff2d55 (Apple red)
  - #ff9500 (Apple orange)
  - #C6A57C (Sphynx gold)
  - #ff3b30 (Apple system red)
*/

/* Smaller hearts for SPHYNX FAMILY section - DRAMATICALLY MORE VISIBLE */
.small-hearts {
  top: -15px;
  right: -45px;
  width: 180px; /* Significantly larger for better visibility */
  height: 130px;
}

/* Hearts for "THE SPHYNX FAMILY" section - EXTREMELY VISIBLE NOW */
.sphynx-family-hearts {
  position: absolute;
  top: -25px;
  right: -70px;
  width: 220px; /* Significantly larger container */
  height: 160px;
  z-index: 10;
  pointer-events: none;
  overflow: visible;
}

/* Refined pulse effect for heart title */
.heart-title-pulse {
  animation: heartTitlePulse 1s 1 ease-in-out;
}

@keyframes heartTitlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Title with hearts wrapper */
.title-hearts-wrapper {
  position: relative;
  display: inline-block;
}

/* For confetti canvas */
#hearts-confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999999;
}

/* Refined Apple-style heart title animation */
.heart-title-appear {
  animation: heartTitleAppear 0.8s ease-out forwards;
}

@keyframes heartTitleAppear {
  0% { opacity: 0; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .love-story-hearts {
    top: -8px;
    right: -25px;
    width: 65px;
    height: 50px;
  }
  
  .sphynx-family-hearts {
    top: -6px;
    right: -20px;
    width: 50px; 
    height: 40px;
  }
  
  .small-hearts {
    top: -6px;
    right: -20px;
    width: 60px;
    height: 40px;
  }
}