html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: black;
}

/* Background */
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("Vaibackground.png") no-repeat center center;
    background-size: cover;
}

/* Borders */
.background::before,
.background::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 35px;
    background: black;
    z-index: 10;
}

.background::before {
    top: 0;
    border-bottom: 7px solid white;
    transform: translateX(100%);
    animation: slideInRight 1s ease forwards;
}

.background::after {
    bottom: 0;
    border-top: 7px solid white;
    transform: translateX(-100%);
    animation: slideInLeft 1s ease forwards;
    animation-delay: 0.2s;
}

/* Scene Wrapper for scaling */
.scene {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70vw;
    max-width: 90vw;
    min-width: 50vw;
    max-height: 90vh;
    height: auto;
}

/* Vai Image - centered and stable */
.vai {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-70%, -50%); /* consistent baseline */
    width: 65%;
    opacity: 0;
    animation: fadeIn 1.5s ease forwards, hoverUpDown 4s ease-in-out infinite;
    animation-delay: 1.2s, 2.7s;
    z-index: 15;
}


/* Accessory */
.accessory {
    position: absolute;
    top: 24%;
    left: 0;
    transform: translate(-100%, -50%);
    animation: slideAccessory 1.2s ease forwards;
    animation-delay: 0.5s;
    max-width: 32%;
    z-index: 5;
}

/* Cyber Circle & Shadow aligned under Vai */
/* Cyber Circle & Shadow aligned and squished vertically */
.cyber-circle,
.cyber-shadow {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-90%) scale(1, 0.3); /* keep width, reduce height */
    opacity: 0;
    max-width: 55%;
}

.cyber-circle {
    animation: fadeCircle 1.5s ease forwards;
    animation-delay: 2.8s;
    z-index: 14;
}

.cyber-shadow {
    animation: fadeShadow 1.5s ease forwards;
    animation-delay: 2.9s;
    z-index: 13;
}

/* Text bubble */
.text-bubble {
    position: absolute;
    top: 5vh;
    right: 5vw;
    max-width: 100%;
    z-index: 15;
    animation: fadedText 1.5s ease forwards;
}

/* Cloud */
.cloud {
    position: absolute;
    top: 8vh;
    right: 4vw;
    max-width: 18%;
    opacity: 0;
    z-index: 16;
    animation: fadeCloud 0.8s ease forwards;
    animation-delay: 1.2s;
}

/* Diamond wave */
.diamond-wave {
    position: absolute;
    top: 11%;
    right: 22%;
    font-size: 2rem;
    color: white;
    z-index: 20;
    display: flex;
    gap: 0.4em;
}

.diamond-wave span {
    display: inline-block;
    animation: waveUpDown 2s ease-in-out infinite;
}

.diamond-wave span:nth-child(1) { animation-delay: 0s; }
.diamond-wave span:nth-child(2) { animation-delay: 0.2s; }
.diamond-wave span:nth-child(3) { animation-delay: 0.4s; }
.diamond-wave span:nth-child(4) { animation-delay: 0.6s; }
.diamond-wave span:nth-child(5) { animation-delay: 0.8s; }

/* Arrow buttons */
.arrow-buttons {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 15px;
    z-index: 30;
}

.arrow {
    width: 90px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.arrow:hover {
    transform: scale(1.2);
}

/* text */

.bubble-text {
    position: absolute;
    top: 29vh; /* adjust so it sits inside your bubble */
    right: 10vw; /* adjust as needed */
    max-width: 33vw; /* adjust for your bubble size */
    color: white; /* text color */
    font-family: 'Baskerville', serif;
    font-size: 1.25rem;
    opacity: 0;
    line-height: 1.5em;
    animation: fadeTextIn 2s ease forwards;
    animation-delay: 2s; /* sync with bubble appearance */
    z-index: 17;
}

.bubble-text p {
    margin: 0 0 1em 0;
}

@keyframes fadeTextIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



/* text slide */
.text-slide {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease;
    width: 100%;
}

.text-slide.active {
    opacity: 1;
    position: relative;
}


/* Animations */
@keyframes fadedText {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

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

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

@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes slideAccessory {
    from { transform: translate(-100%, -50%); }
    to { transform: translate(0, -50%); }
}

/* Vai fade in */
@keyframes fadeIn {
    0% { opacity: 0; transform: translate(-70%, -40%); } /* same X offset */
    100% { opacity: 1; transform: translate(-70%, -50%); }
}

@keyframes hoverUpDown {
    0%, 100% { transform: translate(-70%, -50%); }
    50% { transform: translate(-70%, calc(-50% - 15px)); }
}


@keyframes fadeCircle {
    0% { opacity: 0; transform: translateX(-95%) translateY(50%) scale(1, 0.2); }
    100% { opacity: 1; transform: translateX(-95%) translateY(0) scale(1, 0.3); }
}

@keyframes fadeShadow {
    0% { opacity: 0; transform: translateX(-95%) translateY(50%) scale(1, 0.2); }
    100% { opacity: 1; transform: translateX(-95%) translateY(7%) scale(1, 0.3); }
}

/* Diamond wave animation */
@keyframes waveUpDown {
    0%, 20% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    80%, 100% { transform: translateY(0); }
}

/* --- RESPONSIVE SCALING --- */

/* Smaller screens: shrink scene */
@media (max-width: 768px) {
    .scene {
        width: 90vw;
    }
    .vai {
        width: 75%;
        transform: translate(-55%, -50%);
    }
    .cyber-circle,
    .cyber-shadow {
        max-width: 65%;
    }
    .text-bubble {
        top: 3vh;
        right: 3vw;
        max-width: 70%;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .scene {
        width: 95vw;
    }
    .vai {
        width: 85%;
    }
    .cyber-circle,
    .cyber-shadow {
        max-width: 70%;
    }
    .diamond-wave {
        font-size: 1.4rem;
        right: 10%;
    }
}

/* Large screens: scale up scene */
@media (min-width: 1400px) {
    .scene {
        width: 60vw;
    }
    .vai {
        width: 60%;
    }
    .cyber-circle,
    .cyber-shadow {
        max-width: 50%;
    }
}