/* =========================
   Butterfly Trigger
========================= */
.butterfly-trigger {
    /* Width and height set via JS for responsiveness */
    border-radius: 0 !important;
    /* Force no circle shape */
    border: none !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    cursor: none !important;
    /* Remove circle shadow */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    /* Remove padding from floating-circle */
    overflow: visible !important;
    transition: transform 0.3s ease;
    /* Smooth scale on hover */
    outline: none !important;
    border-width: 0 !important;
    border: none !important;
}

.butterfly-trigger.electroshock-effect {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* SOLID LILA BUTTERFLY (Replaces black with lila) */
.butterfly-visual {
    width: 100%;
    height: 100%;

    /* Modern Colorization using Mask */
    background-color: rgb(138, 43, 226);
    /* Lila */
    -webkit-mask-image: url('assets/flying_butterfly.png');
    mask-image: url('assets/flying_butterfly.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* Reset Hack */
    background-image: none;
    transform: none;
    filter: drop-shadow(0 0 12px rgba(138, 43, 226, 0.7));
    /* Stronger default glow */

    transition: background-color 0.3s ease, filter 0.3s ease;
}

/* Hover Effect on Trigger: Scale Parent */
.butterfly-trigger:hover {
    transform: scale(1.15);
    transition: transform 0.3s ease;
}

/* Hover Effect on Visual: Turn Solid Sapphire Blue & Glow */
.butterfly-trigger:hover .butterfly-visual {
    background-color: #0F52BA;
    /* Sapphire Blue */
    filter: drop-shadow(0 0 25px rgba(15, 82, 186, 1.0));
    /* Even stronger glow on hover */
    transform: none;
    /* No translate needed */
}

/* Electroshock Effect */
.butterfly-trigger.electroshock-effect .butterfly-visual {
    animation: butterfly-shock 0.3s linear;
}

@keyframes butterfly-shock {
    0% {
        background-color: rgb(138, 43, 226);
        filter: none;
    }

    50% {
        background-color: rgb(255, 255, 255);
        filter: drop-shadow(0 0 10px white);
    }

    100% {
        background-color: rgb(138, 43, 226);
        filter: none;
    }
}

/* =========================
   Internal Butterfly Page Animation
========================= */
.big-butterfly-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 95vh;
    /* Responsive size */
    height: 95vh;
    pointer-events: none;
    z-index: 5;
    /* Behind arrow (100), but visible */
}

.big-butterfly-visual {
    width: 100%;
    height: 100%;

    /* Masking Technique for Colorization */
    background-color: #0F52BA;
    /* Sapphire Blue */
    -webkit-mask-image: url('assets/flying_butterfly.png');
    mask-image: url('assets/flying_butterfly.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* Animation */
    /* No default animation - triggered by JS class addition */
    /* animation: big-flap 0.25s ease-in-out 8 forwards; */

    /* Sharpening Fixes */
    transform: translateZ(0);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.big-butterfly-visual.flap {
    animation: big-flap 0.25s ease-in-out 8 forwards;
}

@keyframes big-flap {
    0% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(0.1);
    }

    100% {
        transform: scaleX(1);
    }
}

/* =========================
   Butterfly Menu (Inside Wings)
========================= */
/* Menu Layer Removed */

/* =========================
   Generative Drawing UI
========================= */
/* Allow scrolling on from-page */
#from-page.active {
    overflow-y: auto;
}

/* No scrolling on butterfly page (Requirement 6) */
#butterfly-page.active {
    overflow: hidden;
}

/* =========================
   Animations
========================= */
@keyframes flap {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.flap {
    animation: flap 0.8s ease-in-out 3;
}

/* =========================
   Butterfly Page Specific
========================= */
#butterfly-page.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Center everything vertically */
    padding: 0;
    overflow: hidden;
    gap: 0;
}

.butterfly-description {
    position: absolute;
    top: 15%;
    /* Positioned strategically from top */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    text-align: left;
    color: #C8A2C8;
    font-size: 1.1rem;
    line-height: 1.5;
    z-index: 30;
    opacity: 0;
    transition: opacity 1s;
    pointer-events: none;
    margin: 0;
}

.big-butterfly-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    /* Offset slightly for visual balance */
    width: 80vw;
    height: 60vh;
    /* Contain within viewport height */
    max-width: 1000px;
    margin: 0;
    border: none;
    background: transparent;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-controls {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 30;
    opacity: 0;
    transition: opacity 1s;
    width: auto;
    margin: 0;
}

.submit-btn.butterfly-btn {
    background: #0F52BA;
    border: none;
    color: white;
    padding: 12px 30px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(15, 82, 186, 0.4);
}

.submit-btn.butterfly-btn:hover {
    background: #0a3d8f;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 82, 186, 0.6);
}