/* STAGE & CURTAIN */
body, html {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    background-color: #4a0000;
    font-family: 'Arial Black', sans-serif;
    overflow: hidden;
}

.theater-stage {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, #400 0%, #800 10%, #a00 20%, #800 30%, #400 40%, #800 50%, #a00 60%, #800 70%, #400 80%, #800 90%, #400 100%);
    background-size: 250px 100%;
    animation: curtainMove 10s ease-in-out infinite;
}

@keyframes curtainMove {
    0%, 100% { background-position: 0px 0px; }
    50% { background-position: 50px 0px; }
}

/* SEESAWING TEXT */
.glow-text {
    color: #ffd700;
    font-size: 3rem;
    text-shadow: 3px 3px 10px #000;
    margin-bottom: 80px;
    z-index: 100;
    animation: seesaw 4s ease-in-out infinite;
}

@keyframes seesaw {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* 3D PIE SYSTEM */
.pie-container {
    position: relative;
    width: 250px;
    height: 100px;
    perspective: 1000px;
}

.pie-dish {
    position: relative;
    width: 250px;
    height: 250px;
    transform-style: preserve-3d;
    transform: rotateX(60deg);
    animation: spin 8s linear infinite;
}

/* THE PIE TIN (Silver/Tapered) */
.pie-tin {
    position: absolute;
    width: 90%; /* Smaller than top for tapering */
    height: 90%;
    top: 5%;
    left: 5%;
    background: linear-gradient(145deg, #999, #555); /* Metallic look */
    border-radius: 50%;
    transform: translateZ(-30px); /* Pushed deep down */
    border: 2px solid #444;
}

/* THE TOP CRUST */
.pie-crust-top {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #e3b066; /* Warmer pie color */
    border-radius: 50%;
    border: 14px solid #d2a679; /* Thick doughy rim */
    transform-style: preserve-3d;
    transform: translateZ(10px);
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
}

/* THE TAPERED SIDE (Connecting Crust to Tin) */
.pie-crust-top::before {
    content: '';
    position: absolute;
    top: -14px; left: -14px;
    width: 100%; height: 100%;
    background: #c28e4e;
    border-radius: 50%;
    border: 14px solid #a6733a;
    /* This fills the gap and creates the tapered cylinder wall */
    transform: translateZ(-25px) scale(0.92); 
}

/* REFINED LATTICE (No more waffle look) */
.lattice-pattern {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Thicker strips with softer edges */
    background: 
        repeating-linear-gradient(90deg, transparent 0 25px, #f5deb3 25px 40px),
        repeating-linear-gradient(0deg, transparent 0 25px, #f5deb3 25px 40px);
    opacity: 0.9;
}

@keyframes spin {
    from { transform: rotateX(60deg) rotateZ(0deg); }
    to { transform: rotateX(60deg) rotateZ(360deg); }
}

/* OPAQUE STEAM */
.steam-box {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 200;
}

.vapor {
    width: 30px;
    height: 70px;
    background: rgba(255, 255, 255, 0.4); /* Much more opaque */
    margin: 0 3px;
    border-radius: 50%;
    filter: blur(8px); /* Sharper, clearer steam */
    opacity: 0;
    animation: rise 3s infinite ease-out;
}

.v1 { animation-delay: 0s; }
.v2 { animation-delay: 0.5s; }
.v3 { animation-delay: 1s; }
.v4 { animation-delay: 1.5s; }
.v5 { animation-delay: 2s; }
.v6 { animation-delay: 2.5s; }
.v7 { animation-delay: 2.8s; }

@keyframes rise {
    0% { transform: translateY(120px) scale(0.4); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translateY(-180px) scale(3.5); opacity: 0; }
}