/* Center content and create a clean dark background */
body {
    display: flex; justify-content: center; align-items: center; gap: 20px;
    min-height: 100vh; background: #1a1a1a; margin: 0; flex-wrap: wrap;
}

/* Base button styling with rounded edges and drop shadow */
.magic-btn {
    padding: 15px 30px; font-size: 18px; border: none; border-radius: 50px;
    color: white; font-weight: bold; box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    cursor: pointer; position: relative; overflow: hidden;
    transition: all 0.6s cubic-bezier(0.2,0.8,0.2,1); /* Smooth animation curve */
}

/* Creates extended hover area to prevent animation jitter */
.magic-btn::after {
    content: ""; position: absolute; inset: -10px; z-index: -1;
}

/* 3D transform effect on hover with glow */
.magic-btn:hover {
    transform: perspective(800px) rotateX(5deg) rotateY(-8deg) scale(1.05);
    text-shadow: 0 0 5px rgba(255,255,255,0.8);
}

/* Shine animation setup - initial position */
.magic-btn::before {
    content: ""; position: absolute; top: 0; left: -150%;
    width: 100%; height: 100%; transition: 0.8s;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

/* Shine animation movement on hover */
.magic-btn:hover::before {
    left: 150%; transition: 0.8s ease-in-out;
}

/* Footer bar fixed at bottom */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #181818;
    border: none;
}

/* Logo positioning and grayscale effect */
.footerLogo {
    position: absolute;
    right: 25px;
    bottom: 25px;
    height: 50px;
    filter: grayscale(1);
    transition: all ease-in-out .5s;
}

/* Color reveal on hover/focus */
.footerLogo:is(:hover, :focus, :active) {
    filter: grayscale(0);
}