/* ===================================
   ADETUTU HAIR - ANIMATIONS STYLESHEET
   All animation keyframes and animated elements
   =================================== */

/* Logo entrance animation */
.logo-entrance {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
}

.logo-entrance-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a0f0a;
    animation: flashAndFade 3.8s ease forwards;
    z-index: -1;
}

.logo-entrance img {
    width: 600px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: logoShrinkMove 3s ease forwards;
    filter: drop-shadow(0 0 80px rgba(212, 175, 55, 0.8));
    z-index: 10;
}

/* Main animation keyframes */
@keyframes flashAndFade {
    0%, 89% {
        opacity: 1;
        background: #1a0f0a;
    }
    90% {
        opacity: 1;
        background: radial-gradient(circle at 15% 5%, #f4e4bc, #d4af37 30%, #1a0f0a 70%);
        box-shadow: inset 0 0 300px rgba(212, 175, 55, 0.9);
    }
    86% {
        opacity: 0.9;
        background: #1a0f0a;
    }
    87% {
        opacity: 1;
        background: radial-gradient(circle at 15% 5%, rgba(244, 228, 188, 0.5), rgba(212, 175, 55, 0.3) 40%, transparent 70%);
    }
    88% {
        opacity: 0.8;
        background: #1a0f0a;
    }
    100% {
        opacity: 0;
        background: #1a0f0a;
    }
}

@keyframes logoShrinkMove {
    0% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
        filter: drop-shadow(0 0 100px rgba(212, 175, 55, 1));
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.095);
        filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6));
    }
}

/* Logo glow animation */
@keyframes logoGlow {
    0%, 100% { 
        filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6)); 
    }
    50% { 
        filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.9)); 
    }
}

/* Navigation fade in */
@keyframes fadeInNav {
    to {
        opacity: 1;
    }
}

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

/* Content animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes expandLine {
    to { 
        width: 200px; 
    }
}

/* Newsletter animations */
@keyframes successSlide {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    50% {
        opacity: 1;
        transform: translateY(-5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes crownBurst {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg) translate(0, 0);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.3) rotate(180deg) translate(calc(var(--end-x) * 0.5), calc(var(--end-y) * 0.5));
    }
    100% {
        opacity: 0;
        transform: scale(2) rotate(360deg) translate(var(--end-x), var(--end-y));
    }
}

@keyframes slideInRight {
    from { 
        transform: translateX(100%); 
        opacity: 0; 
    }
    to { 
        transform: translateX(0); 
        opacity: 1; 
    }
}

/* Floating crown elements */
.floating-logo {
    position: absolute;
    width: 60px;
    height: 60px;
    opacity: 0;
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6));
    pointer-events: none;
    z-index: 1;
}

.floating-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Multiple random floating animations */
@keyframes floatRandom1 {
    0% { 
        transform: translateY(0) rotate(0deg) scale(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-15px) rotate(-25deg) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translateY(-45px) translateX(60px) rotate(45deg) scale(1.3);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-120px) translateX(-30px) rotate(-30deg) scale(0.9);
        opacity: 0.5;
    }
    75% {
        transform: translateY(-180px) translateX(80px) rotate(60deg) scale(1.1);
        opacity: 0.3;
    }
    100% {
        transform: translateY(-280px) translateX(-50px) rotate(15deg) scale(0.4);
        opacity: 0;
    }
}

@keyframes floatRandom2 {
    0% { 
        transform: translateY(0) rotate(0deg) scale(0);
        opacity: 0;
    }
    15% {
        transform: translateY(-25px) rotate(35deg) scale(1.2);
        opacity: 0.9;
    }
    35% {
        transform: translateY(-80px) translateX(-70px) rotate(-20deg) scale(0.8);
        opacity: 0.6;
    }
    60% {
        transform: translateY(-140px) translateX(40px) rotate(50deg) scale(1.4);
        opacity: 0.4;
    }
    85% {
        transform: translateY(-220px) translateX(-60px) rotate(-40deg) scale(0.7);
        opacity: 0.2;
    }
    100% {
        transform: translateY(-300px) translateX(20px) rotate(10deg) scale(0.3);
        opacity: 0;
    }
}

@keyframes floatRandom3 {
    0% { 
        transform: translateY(0) rotate(0deg) scale(0);
        opacity: 0;
    }
    12% {
        transform: translateY(-30px) rotate(-40deg) scale(0.9);
        opacity: 0.7;
    }
    40% {
        transform: translateY(-90px) translateX(90px) rotate(25deg) scale(1.5);
        opacity: 0.8;
    }
    65% {
        transform: translateY(-160px) translateX(-20px) rotate(-55deg) scale(1.0);
        opacity: 0.4;
    }
    90% {
        transform: translateY(-240px) translateX(50px) rotate(35deg) scale(0.6);
        opacity: 0.1;
    }
    100% {
        transform: translateY(-320px) translateX(-80px) rotate(-10deg) scale(0.2);
        opacity: 0;
    }
}

@keyframes floatRandom4 {
    0% { 
        transform: translateY(0) rotate(0deg) scale(0);
        opacity: 0;
    }
    20% {
        transform: translateY(-20px) rotate(15deg) scale(1.1);
        opacity: 0.9;
    }
    45% {
        transform: translateY(-110px) translateX(-50px) rotate(-45deg) scale(1.2);
        opacity: 0.6;
    }
    70% {
        transform: translateY(-190px) translateX(70px) rotate(30deg) scale(0.8);
        opacity: 0.3;
    }
    95% {
        transform: translateY(-270px) translateX(-40px) rotate(-20deg) scale(0.5);
        opacity: 0.1;
    }
    100% {
        transform: translateY(-350px) translateX(10px) rotate(5deg) scale(0.1);
        opacity: 0;
    }
}

@keyframes floatRandom5 {
    0% { 
        transform: translateY(0) rotate(0deg) scale(0);
        opacity: 0;
    }
    8% {
        transform: translateY(-35px) rotate(-30deg) scale(1.4);
        opacity: 0.8;
    }
    30% {
        transform: translateY(-75px) translateX(100px) rotate(55deg) scale(0.9);
        opacity: 0.7;
    }
    55% {
        transform: translateY(-150px) translateX(-80px) rotate(-25deg) scale(1.3);
        opacity: 0.5;
    }
    80% {
        transform: translateY(-230px) translateX(30px) rotate(40deg) scale(0.7);
        opacity: 0.2;
    }
    100% {
        transform: translateY(-310px) translateX(-60px) rotate(-15deg) scale(0.3);
        opacity: 0;
    }
}

@keyframes floatRandom6 {
    0% { 
        transform: translateY(0) rotate(0deg) scale(0);
        opacity: 0;
    }
    18% {
        transform: translateY(-40px) rotate(65deg) scale(1.3);
        opacity: 0.85;
    }
    38% {
        transform: translateY(-95px) translateX(-110px) rotate(-35deg) scale(0.7);
        opacity: 0.65;
    }
    62% {
        transform: translateY(-165px) translateX(85px) rotate(75deg) scale(1.45);
        opacity: 0.45;
    }
    88% {
        transform: translateY(-245px) translateX(-25px) rotate(-50deg) scale(0.85);
        opacity: 0.15;
    }
    100% {
        transform: translateY(-325px) translateX(65px) rotate(20deg) scale(0.25);
        opacity: 0;
    }
}

@keyframes floatRandom7 {
    0% { 
        transform: translateY(0) rotate(0deg) scale(0);
        opacity: 0;
    }
    14% {
        transform: translateY(-22px) rotate(-55deg) scale(1.15);
        opacity: 0.92;
    }
    42% {
        transform: translateY(-105px) translateX(115px) rotate(40deg) scale(1.35);
        opacity: 0.72;
    }
    68% {
        transform: translateY(-175px) translateX(-45px) rotate(-65deg) scale(0.95);
        opacity: 0.38;
    }
    92% {
        transform: translateY(-255px) translateX(75px) rotate(55deg) scale(0.65);
        opacity: 0.12;
    }
    100% {
        transform: translateY(-335px) translateX(-85px) rotate(-25deg) scale(0.35);
        opacity: 0;
    }
}

@keyframes floatRandom8 {
    0% { 
        transform: translateY(0) rotate(0deg) scale(0);
        opacity: 0;
    }
    22% {
        transform: translateY(-48px) rotate(80deg) scale(1.25);
        opacity: 0.88;
    }
    44% {
        transform: translateY(-125px) translateX(-95px) rotate(-45deg) scale(0.85);
        opacity: 0.68;
    }
    66% {
        transform: translateY(-195px) translateX(105px) rotate(60deg) scale(1.55);
        opacity: 0.42;
    }
    86% {
        transform: translateY(-265px) translateX(-15px) rotate(-75deg) scale(0.75);
        opacity: 0.18;
    }
    100% {
        transform: translateY(-345px) translateX(95px) rotate(35deg) scale(0.15);
        opacity: 0;
    }
}

/* Newsletter background floating animation */
@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(10deg);
    }
}

/* Return visitor immediate animations */
.hero-content.immediate {
    animation: fadeInUp 0.8s ease forwards !important;
    opacity: 1 !important;
}

.hero .tagline.immediate {
    animation: fadeInUp 0.5s ease 0.3s forwards !important;
}

/* Sparkle animation */
@keyframes sparkle {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 1;
    }
    50% {
        transform: translate(0, -20px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(0, -30px) scale(0);
        opacity: 0;
    }
}

/* Shake animation for form errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Slide down for messages */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}