/* ==========================================================================
   PSYKEY HEART LLC - LANDING PAGE MAGIC
   ========================================================================== */

.landing-body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevents scrolling on the gateway */
    background-color: var(--bg-main);
    width: 100vw;
    height: 100vh;
}

.landing-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1.5s ease, filter 2s ease;
}

/* --- LAYER 1: THE GATEWAY --- */
#gateway-layer {
    z-index: 30;
    background: radial-gradient(circle at center, #291C3A 0%, #120B1A 100%);
}

.keyhole-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-tiffany);
    text-shadow: var(--glow-tiffany);
    transition: transform 0.4s ease, filter 0.4s ease;
    z-index: 35;
}

.keyhole-btn:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}

.keyhole-icon {
    font-size: 5rem;
    margin-bottom: 10px;
}

.btn-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    letter-spacing: 2px;
}

/* Gateway Butterflies */
.gateway-bfly {
    position: absolute;
    font-size: 2.5rem;
    opacity: 0.8;
    filter: hue-rotate(0deg); /* Normal Pastel Colors */
    transition: all 1.5s ease; /* Smooth transition for the color shift */
    animation: flutterAndDrift 4s infinite ease-in-out;
}

#gb-1 { top: 30%; left: 30%; animation-delay: 0s; }
#gb-2 { top: 60%; right: 25%; animation-delay: 1s; }
#gb-3 { bottom: 20%; left: 40%; animation-delay: 2s; font-size: 3.5rem; }
#gb-4 { top: 20%; right: 40%; animation-delay: 0.5s; }

/* The Grunge Shift Class (Triggered by JS on click) */
.grunge-shift {
    /* Shifts the bright pastel blue/pink to the darker, grungier tones of the artwork */
    filter: hue-rotate(180deg) sepia(50%) brightness(0.6) !important;
    transform: scale(3) rotate(45deg); /* They fly toward the camera */
    opacity: 0;
}


/* --- LAYER 2: THE METAMORPHOSIS ARTWORK --- */
#artwork-layer {
    z-index: 20;
    background-image: url('metamorphosis_art.png');
    background-size: cover;
    background-position: center;
    cursor: pointer; /* Lets the user know to click it */
}

/* Slow pulsing effect for the artwork */
@keyframes intensePulse {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.02); filter: brightness(1.1); }
    100% { transform: scale(1); filter: brightness(1); }
}

.artwork-active {
    animation: intensePulse 6s infinite ease-in-out;
}

.artwork-instruction {
    position: absolute;
    bottom: 10%;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    letter-spacing: 4px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}


/* --- LAYER 3: THE PASTEL SWARM (The Return to Oz) --- */
#swarm-layer {
    z-index: 40;
    background: transparent;
    pointer-events: none; /* Let clicks pass through if needed */
}

.swarm-bfly {
    position: absolute;
    font-size: 3rem;
    opacity: 0;
    /* Pastel coloring */
    filter: drop-shadow(0 0 10px var(--color-lavender));
}

/* The animation that covers the screen */
@keyframes swarmIn {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(5) rotate(20deg); opacity: 1; }
}

.swarm-active {
    animation: swarmIn 1.5s forwards ease-in-out;
}

/* Utility to hide layers */
.hidden {
    opacity: 0 !important;
    pointer-events: none;
}