#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Ensure it's behind other content */
}
body {
    background: url('images/background.png') no-repeat center center fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;

    animation: bg-pan 15s infinite alternate ease-in-out;
    color: #fff;
    text-align: center;
    gap: 30px; /* Space between the two main sections */
}

/* Background pan effect */
@keyframes bg-pan {
    0% { background-position: center center; }
    50% { background-position: 52% 48%; }
    100% { background-position: 48% 52%; }
}

/* === Button Layout === */
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;              /* spacing between buttons */
    flex-wrap: wrap;        /* ✅ stacks nicely on small screens */
}

/* === Shared Button Styling === */
.play-button,
.chat-button {
    display: inline-block;
    cursor: pointer;
    transition: transform 0.5s ease-in-out;
}

.play-button .button-image,
.chat-button .button-image {
    width: 200px;
    height: 200px;
    object-fit: contain;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* === Play Button Glow === */
.play-button {
    animation: float 4s ease-in-out infinite, pulseGlow 6s infinite;
}
.play-button .button-image {
    filter: drop-shadow(0 0 20px rgba(92, 2, 89, 0.8))
            drop-shadow(0 0 10px rgba(92, 2, 89, 0.5));
}
.play-button:hover .button-image {
    /* Adjusted glow size to prevent accidental heart clicks */
    filter: drop-shadow(0 0 28px rgba(98, 114, 249, 1))
            drop-shadow(0 0 12px rgba(98, 114, 249, 0.6));
}

/* === Chat/Arthur’s Button Glow === */
.chat-button {
    animation: float 5s ease-in-out infinite, pulseGlowAlt 7s infinite;
}
.chat-button .button-image {
    filter: drop-shadow(0 0 20px rgba(92, 2, 89, 0.8))
            drop-shadow(0 0 10px rgba(92, 2, 89, 0.5));
}
.chat-button:hover .button-image {
    filter: drop-shadow(0 0 35px rgba(249, 98, 232, 1))
            drop-shadow(0 0 15px rgba(249, 98, 232, 0.6));
}

/* === Shared Animations === */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

@keyframes pulseGlow {
    0%, 100% { filter: drop-shadow(0 0 25px rgba(92, 2, 89, 0.5)); }
    50% { filter: drop-shadow(0 0 60px rgba(98, 114, 249, 0.9)); }
}

@keyframes pulseGlowAlt {
    0%, 100% { filter: drop-shadow(0 0 25px rgba(92, 2, 89, 0.4)); }
    50% { filter: drop-shadow(0 0 55px rgba(249, 98, 232, 0.9)); }
}

/* Interactive Button Hover Effects */
.social-button,
.play-button .button-image,
.chat-button .button-image {
    position: relative;
    overflow: hidden;
    transform: translateZ(0); /* Force hardware acceleration */
}

.social-button::before,
.play-button .button-image::before,
.chat-button .button-image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2); /* Light ripple color */
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.4s ease-out;
    z-index: 1;
}

.social-button:hover::before,
.play-button:hover .button-image::before,
.chat-button:hover .button-image::before {
    width: 200%;
    height: 200%;
    opacity: 1;
}

.social-button:active,
.play-button:active .button-image,
.chat-button:active .button-image {
    transform: scale(0.95) translateZ(-5px); /* Subtle 3D press effect */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Adjust shadow on press */
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}

/* Ensure button content is above the ripple */
.social-button span,
.social-button i {
    position: relative;
    z-index: 2;
}

.social-buttons-container {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 40px 60px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 30px; /* Space between the two main sections */
}

.social-buttons-container h1 {
    font-size: 2.5em;
    margin-bottom: 40px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    color: #fff; /* Ensure heading color is white */
}

.social-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 1.2em;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
    min-width: 250px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.social-button i {
    margin-right: 15px;
    font-size: 1.5em;
}

.social-button.facebook {
    background: linear-gradient(to right, #3b5998, #6d84b4);
}

.social-button.instagram {
    background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
}

.social-button.tiktok {
    background: linear-gradient(to right, #000, #222);
}

.social-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.social-button.facebook:hover {
    background: linear-gradient(to right, #6d84b4, #3b5998);
}

.social-button.instagram:hover {
    background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
}

.social-button.tiktok:hover {
    background: linear-gradient(to right, #222, #000);
}

/* Styles for the floating heart icon - UPDATED */
.floating-heart {
    position: absolute;
    bottom: 20px; /* Initial position */
    right: 20px; /* Initial position */
    font-size: 2em; /* Size of the heart */
    color: #ff007f; /* Tinder-like pink/red */
    opacity: 0.5; /* 50% opaque */
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000; /* Ensured highest z-index for click priority */

    /* ADDED: Thin white outline for definition and better click area */
    text-shadow: 
        1px 1px 0 #fff, 
        -1px -1px 0 #fff, 
        1px -1px 0 #fff, 
        -1px 1px 0 #fff; 
}

.floating-heart:hover {
    opacity: 1; /* Fully visible on hover */
    transform: scale(1.2); /* More prominent scale on hover */
}

.original-buttons-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Space between labels and button containers */
    background-color: rgba(255, 255, 255, 0.1);
    padding: 40px 60px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.original-buttons-section .button-container {
    flex-direction: column; /* Stack original buttons vertically */
    gap: 20px; /* Space between original buttons */
}

.button-label {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}