@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /* Minimalist off-white background */
    background-color: #F7F7F4;
    overflow: hidden;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Main Content Styles */
#main-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 2.5s ease-out, transform 2.5s ease-out;
    z-index: 1;
    color: #4A4A4A;
}

#main-content h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 5.5rem;
    font-weight: 600;
    letter-spacing: 8px;
    margin-bottom: 10px;
    color: #111111;
    text-align: center;
}

@media (max-width: 768px) {
    #main-content h1 {
        font-size: 3.5rem;
        letter-spacing: 4px;
    }
    #main-content p {
        font-size: 1rem;
    }
    .start-hint {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    #main-content h1 {
        font-size: 2.8rem;
        letter-spacing: 2px;
    }
    #main-content p {
        font-size: 0.9rem;
    }
}

.start-hint {
    margin-top: 50px;
    font-size: 1.1rem;
    color: #8C8C8A;
    letter-spacing: 4px;
    animation: breathe 3s ease-in-out infinite;
    cursor: pointer;
}

#learning-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.5s ease-out;
    z-index: 30;
    color: #111;
}

body.learning #main-content {
    opacity: 0 !important;
    pointer-events: none;
    z-index: -1 !important;
}

body.learning #learning-content {
    opacity: 1;
    pointer-events: auto;
}

#main-content p {
    font-size: 1.2rem;
    font-weight: 300;
    color: #8C8C8A;
    letter-spacing: 1px;
}

/* Curtain Container Styles */
#curtain-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    /* Authentic Disney Mickey Mouse open glove - Scaled down and fully visible */
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 120 120"><g stroke="%23000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" transform="translate(10, 10)"><path d="M22 80c-6-10-14-15-14-30 0-11 8-20 18-20 8 0 13 5 16 12 2-6 8-12 15-12 9 0 16 7 16 16 0 2 0 5-1 7 4-4 10-6 16-6 10 0 17 9 17 19 0 15-10 25-25 25H30z" fill="%23fff"/><path d="M25 80c0 10 10 15 25 15s25-5 25-15c0-8-10-12-25-12s-25 4-25 12z" fill="%23000"/><path d="M30 80c0 8 8 12 20 12s20-4 20-12c0-6-8-9-20-9s-20 3-20 9z" fill="%23fff"/><path d="M42 45c0 8-3 15-3 15" fill="none"/><path d="M57 45c0 8-3 15-3 15" fill="none"/><path d="M72 50c0 8-3 15-3 15" fill="none"/></g></svg>') 20 20, auto;
    transition: opacity 1.5s ease;
}

#curtain-container:active {
    /* Authentic Disney Mickey Mouse grabbed glove - Scaled down and fully visible */
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 120 120"><g stroke="%23000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" transform="translate(10, 10)"><path d="M15 65c0-11 8-20 18-20 8 0 13 5 16 12 2-6 8-12 15-12 9 0 16 7 16 16 0 2 0 5-1 7 4-4 10-6 16-6 10 0 17 9 17 19 0 15-10 20-25 20H30C18 81 15 75 15 65z" fill="%23fff"/><path d="M25 80c0 10 10 15 25 15s25-5 25-15c0-8-10-12-25-12s-25 4-25 12z" fill="%23000"/><path d="M30 80c0 8 8 12 20 12s20-4 20-12c0-6-8-9-20-9s-20 3-20 9z" fill="%23fff"/><path d="M42 55c0 8-3 15-3 15" fill="none"/><path d="M57 55c0 8-3 15-3 15" fill="none"/><path d="M72 60c0 8-3 15-3 15" fill="none"/></g></svg>') 20 20, grabbing;
}

#curtain-canvas {
    display: block;
}

#instruction {
    position: absolute;
    bottom: 8%;
    width: 100%;
    text-align: center;
    color: #9A9A96;
    font-size: 14px;
    letter-spacing: 3px;
    pointer-events: none;
    animation: breathe 3s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.icon {
    font-size: 24px;
}

@keyframes breathe {
    0% { opacity: 0.4; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-5px); }
    100% { opacity: 0.4; transform: translateY(0); }
}

/* State when completely opened */
body.opened #curtain-container {
    pointer-events: none;
    opacity: 0;
}

body.opened #main-content {
    opacity: 1;
    transform: scale(1);
    z-index: 20;
}