/* 
   BISTRO BOARDS WEBSITE - ANIMATIONS
   Reveal effects and keyframes
*/

/* Page Load Fade In */
body {
    opacity: 0;
    animation: fadeInPage 0.8s ease-in forwards;
}

@keyframes fadeInPage {
    to {
        opacity: 1;
    }
}

/* Scroll Reveal Base */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Specific Animations */
.fade-bottom {
    transform: translateY(50px);
}

.fade-bottom.active {
    transform: translateY(0);
}

.fade-left {
    transform: translateX(-50px);
}

.fade-left.active {
    transform: translateX(0);
}

.fade-right {
    transform: translateX(50px);
}

.fade-right.active {
    transform: translateX(0);
}

/* Stagger Children */
.stagger-container .reveal:nth-child(2) {
    transition-delay: 0.2s;
}

.stagger-container .reveal:nth-child(3) {
    transition-delay: 0.4s;
}

.stagger-container .reveal:nth-child(4) {
    transition-delay: 0.6s;
}

/* Parallax Class */
.parallax {
    background-attachment: fixed;
}

/* =========================================
   NEW HERO ANIMATIONS
   ========================================= */

/* 1. Hero Zoom Effect */
@keyframes heroZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

.hero-zoom-bg {
    animation: heroZoom 20s infinite alternate ease-in-out;
}

/* 2. Letter Reveal (Staggered) */
@keyframes letterReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) rotateX(90deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

.animate-title-stagger span {
    display: inline-block;
    opacity: 0;
    animation: letterReveal 1s ease forwards;
    animation-delay: calc(0.1s * var(--i));
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 3. Subtitle Reveal */
@keyframes subtitleSlideUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
        letter-spacing: 0px;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: 2px;
    }
}

.subtitle-reveal {
    opacity: 0;
    animation: subtitleSlideUp 1s ease forwards 1s;
    /* 1s delay */
}

/* 4. CTA Glow Pulse */
@keyframes glow {
    0% {
        box-shadow: 0 0 5px rgba(210, 105, 30, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(210, 105, 30, 0.8), 0 0 10px rgba(210, 105, 30, 0.6);
    }

    100% {
        box-shadow: 0 0 5px rgba(210, 105, 30, 0.5);
    }
}

.btn-glow {
    animation: glow 2s infinite;
}

/* 5. Floating Particles */
@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.4;
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.8;
    }

    100% {
        transform: translateY(0) rotate(360deg);
        opacity: 0.4;
    }
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: float 6s infinite ease-in-out;
    z-index: 1;
}

/* Randomize particle positions */
.p1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.p2 {
    top: 60%;
    left: 80%;
    animation-delay: 2s;
    width: 8px;
    height: 8px;
}

.p3 {
    top: 40%;
    left: 40%;
    animation-delay: 4s;
}

.p4 {
    top: 80%;
    left: 20%;
    animation-delay: 1s;
    width: 4px;
    height: 4px;
}

.p5 {
    top: 15%;
    left: 70%;
    animation-delay: 3s;
}

/* Hamburger Animation */
.burger.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.burger.toggle .line2 {
    opacity: 0;
}

.burger.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Pulse Animation for Icons */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}