/* css/animations.css */

/* Floating Elements (similar to Framer Motion float) */
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float-slow {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(-2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.floating {
  animation: float 6s ease-in-out infinite;
}

.floating-slow {
  animation: float-slow 8s ease-in-out infinite;
}

/* Glow Effect on Hover */
.glow-hover {
  position: relative;
}

.glow-hover::after {
  content: '';
  position: absolute;
  top: -5px; bottom: -5px; left: -5px; right: -5px;
  background: inherit;
  filter: blur(20px);
  opacity: 0;
  border-radius: inherit;
  z-index: -1;
  transition: opacity 0.4s ease;
}

.glow-hover:hover::after {
  opacity: 0.6;
}

.glow-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(231, 76, 107, 0.4); /* Cherry glow */
}

/* Text Reveal Animation */
.text-reveal-container {
  overflow: hidden;
}

.text-reveal {
  opacity: 0;
  transform: translateY(40px);
  animation: textReveal 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: var(--item-delay, 0s);
}

@keyframes textReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered Load Fade Animation */
.load-fade {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: var(--fade-delay, 0s);
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Experimental CSS Scroll Reveal (If supported) */
/* This works on modern Chrome/Edge to trigger on scroll instead of load */
@supports (animation-timeline: view()) {
    .load-fade {
        /* Reset load fade if scroll timeline is supported */
        animation: none;
        opacity: 0;
        transform: translateY(50px);
    }
    
    .locations-grid, .about-character, .footer {
        view-timeline-name: --fade-in-timeline;
        view-timeline-axis: block;
    }

    .load-fade {
        animation: fadeUpScroll 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        animation-timeline: view();
        animation-range: entry 10% cover 30%;
    }
    @keyframes fadeUpScroll {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Image Hover Effect */
.image-hover-effect {
  overflow: hidden;
}

.image-hover-effect img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
}

.image-hover-effect:hover img {
  transform: scale(1.08);
  filter: saturate(1.2) brightness(1.05); /* Slight color enhancement */
}

/* Floating Emojis Background */
.floating-emoji {
  position: fixed;
  font-size: 1.5rem; /* Small size */
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* Different starting positions and animation properties */
.emoji-1 { top: 15%; left: 8%; animation: float-emoji-1 25s linear infinite; }
.emoji-2 { top: 35%; right: 12%; animation: float-emoji-2 30s linear infinite; }
.emoji-3 { bottom: 25%; left: 18%; animation: float-emoji-3 28s linear infinite; }
.emoji-4 { bottom: 45%; right: 8%; animation: float-emoji-4 35s linear infinite; }
.emoji-5 { top: 60%; left: 55%; animation: float-emoji-5 32s linear infinite; }

/* Gentle and wide sweeping circular/oval movements */
@keyframes float-emoji-1 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(60px, -80px) rotate(15deg) scale(1.1); }
  66% { transform: translate(-30px, 40px) rotate(-10deg) scale(0.9); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes float-emoji-2 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.9); }
  33% { transform: translate(-50px, 60px) rotate(-15deg) scale(1); }
  66% { transform: translate(40px, -30px) rotate(10deg) scale(1.1); }
  100% { transform: translate(0, 0) rotate(0deg) scale(0.9); }
}

@keyframes float-emoji-3 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1.1); }
  33% { transform: translate(40px, 70px) rotate(10deg) scale(0.9); }
  66% { transform: translate(-60px, -50px) rotate(-15deg) scale(1); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1.1); }
}

@keyframes float-emoji-4 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(-70px, -40px) rotate(-10deg) scale(1.1); }
  66% { transform: translate(50px, 60px) rotate(15deg) scale(0.9); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes float-emoji-5 {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.9); }
  33% { transform: translate(0px, -90px) rotate(20deg) scale(1.1); }
  66% { transform: translate(-80px, 10px) rotate(-10deg) scale(1); }
  100% { transform: translate(0, 0) rotate(0deg) scale(0.9); }
}