/* Animations CSS */

/* Keyframe Definitions */

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes scrollDot {
    0%, 20% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0.75rem);
    }
}

@keyframes balloonFloat {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0) rotate(var(--tilt));
    }
    25% {
        transform: translate(-50%, -50%) translateY(-8px) rotate(calc(var(--tilt) + 2deg));
    }
    50% {
        transform: translate(-50%, -50%) translateY(-15px) rotate(var(--tilt));
    }
    75% {
        transform: translate(-50%, -50%) translateY(-8px) rotate(calc(var(--tilt) - 2deg));
    }
}

@keyframes stringWave {
    0%, 100% {
        transform: translateX(-50%) rotate(0deg);
    }
    25% {
        transform: translateX(-50%) rotate(2deg);
    }
    75% {
        transform: translateX(-50%) rotate(-2deg);
    }
}

@keyframes balloonFadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(20px);
    }
    100% {
        opacity: 0.9;
        transform: translate(-50%, -50%) translateY(0);
    }
}

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

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

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes gridItemFadeIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes gridItemFadeIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/* Balloon Containers */
.balloons-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.balloons-desktop {
    display: block;
}

.balloons-mobile {
    display: none;
}

@media (max-width: 768px) {
    .balloons-desktop {
        display: none;
    }
    
    .balloons-mobile {
        display: block;
    }
}

/* Balloon Styles */
.balloon {
    position: absolute;
    pointer-events: none;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: calc(var(--size) * 1.15);
    transform: translate(-50%, -50%);
    
    /* Initial state */
    opacity: 0;
    
    /* Create realistic balloon shape using CSS */
    background: var(--color);
    border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 
        inset -8px -8px 16px rgba(0, 0, 0, 0.1),
        inset 8px 8px 16px rgba(255, 255, 255, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.15);
    
    /* Add random tilt to each balloon */
    --tilt: calc(var(--delay) * 30deg - 15deg);
    
    /* Animation */
    animation: 
        balloonFadeIn 0.8s ease-out var(--delay) forwards,
        balloonFloat var(--duration) ease-in-out calc(var(--delay) + 0.8s) infinite;
}

/* Add individual tilts for natural look */
.balloon:nth-child(odd) {
    --tilt: 8deg;
}

.balloon:nth-child(even) {
    --tilt: -5deg;
}

.balloon:nth-child(3n) {
    --tilt: 12deg;
}

.balloon:nth-child(4n) {
    --tilt: -8deg;
}

.balloon:nth-child(5n) {
    --tilt: 15deg;
}

/* Balloon highlight - more realistic positioning */
.balloon::before {
    content: '';
    position: absolute;
    top: 35%;
    left: 20%;
    width: 35%;
    height: 40%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    border-radius: 50%;
    opacity: 0.7;
    filter: blur(1px);
    transform: rotate(-15deg);
}

/* Enhanced Curved Balloon String using SVG */
.balloon::after {
    content: '';
    position: absolute;
    bottom: -25%;
    left: 50%;
    width: 2px;
    height: 25%;
    transform: translateX(-50%);
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 100" preserveAspectRatio="none"><path d="M5 0 Q2 15 8 25 Q3 35 7 50 Q2 65 6 80 Q4 90 5 100" stroke="%23666" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>') no-repeat center;
    background-size: 100% 100%;
    opacity: 0.8;
    animation: stringWave calc(var(--duration) * 1.5) ease-in-out calc(var(--delay) + 0.8s) infinite;
}

/* Alternative curved strings for variety */
.balloon:nth-child(2n)::after {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 100" preserveAspectRatio="none"><path d="M5 0 Q7 12 3 28 Q8 42 4 58 Q7 72 3 88 Q6 95 5 100" stroke="%23666" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>') no-repeat center;
    background-size: 100% 100%;
}

.balloon:nth-child(3n)::after {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 100" preserveAspectRatio="none"><path d="M5 0 Q1 20 9 35 Q2 50 8 70 Q1 85 5 100" stroke="%23666" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>') no-repeat center;
    background-size: 100% 100%;
}

.balloon:nth-child(4n)::after {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 100" preserveAspectRatio="none"><path d="M5 0 Q8 18 2 32 Q9 48 1 65 Q8 78 4 95 Q6 98 5 100" stroke="%23666" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>') no-repeat center;
    background-size: 100% 100%;
}

.balloon:nth-child(5n)::after {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 100" preserveAspectRatio="none"><path d="M5 0 Q3 25 7 40 Q1 55 9 75 Q3 90 5 100" stroke="%23666" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>') no-repeat center;
    background-size: 100% 100%;
}

/* Scroll Reveal Animation */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered reveal animations */
.reveal-on-scroll[data-delay="0"].revealed {
    transition-delay: 0ms;
}

.reveal-on-scroll[data-delay="100"].revealed {
    transition-delay: 100ms;
}

.reveal-on-scroll[data-delay="200"].revealed {
    transition-delay: 200ms;
}

.reveal-on-scroll[data-delay="300"].revealed {
    transition-delay: 300ms;
}

.reveal-on-scroll[data-delay="400"].revealed {
    transition-delay: 400ms;
}

.reveal-on-scroll[data-delay="500"].revealed {
    transition-delay: 500ms;
}

/* Hover Animations */
.gallery-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover {
    transform: translateY(-4px) scale(1.02);
}

.instagram-button {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.instagram-button:hover {
    transform: translateY(-2px) scale(1.05);
}

.instagram-button:active {
    transform: translateY(0) scale(1.02);
}

/* Loading Animation for Images */
.gallery-item img {
    transition: opacity 0.3s ease-out, transform 0.5s ease-out;
}

.gallery-item img[loading="lazy"] {
    opacity: 0;
}

.gallery-item img.loaded {
    opacity: 1;
}

/* Smooth Transitions */
* {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .balloon {
        animation: balloonFadeIn 0.8s ease-out var(--delay) forwards !important;
    }
    
    .scroll-dot {
        animation: none !important;
    }
    
    .reveal-on-scroll {
        transition: opacity 0.3s ease-out !important;
        transform: none !important;
    }
    
    .gallery-item:hover {
        transform: none !important;
    }
    
    .instagram-button:hover {
        transform: none !important;
    }
}