/* ks.css is the style sheet for the interactive mini Kugelschreiber */
/* artboard div will be the actual Art Board eventually it wil be adjustable via a click and drag function*/
.artboard {
    container-type: inline-size; /* Tells children to measure against this div's width */
    position: absolute;
    top: 15cqh;
    aspect-ratio: 1 / 1;
    width: 80cqw;
    max-height: 80cqw;
    min-width: 50px;
    background: radial-gradient(
        circle at 50% 30%,
        #f0f9ff 0%,
        #e0f2fe 70%
    );
    border-radius: 5%;
    box-shadow: 2vw 2vw 4vw  rgba(0, 0, 0, 0.5);
    overflow: hidden;
    border: 1px solid black;
    box-sizing: border-box;
/* 2. Dragging optimizations */
    cursor: pointer;
    user-select: none;      /* Prevents accidentally highlighting text while dragging */
    touch-action: none;     /* Prevents mobile browser scrolling conflict */
    margin: 0 auto;
    z-index: 20;
    }

.artboard-resizer {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 5%;
    height: 5%;
    min-width: 10px;
    min-height: 10px;
    cursor: se-resize;
    z-index: 100;
/* Subtle diagonal grip stripes */
    background: linear-gradient(
        -45deg,
        transparent 50%,
        #94a3b8 50%,
        #94a3b8 60%,
        transparent 60%,
        transparent 75%,
        #94a3b8 75%
    );
    }
/* Typography badge */
    .badge {
        font-family: "Modak", system-ui;
        font-weight: 300;
        font-style: normal;
        color:white;
        font-size: 7cqw;
        -webkit-text-stroke: 1px black;
        letter-spacing:0.05em;
        position:absolute;
        top: 2%;
        width: 100%;
        text-align: center;
        z-index: 1;
        opacity: 0;
    }
/* branch container is a div that contains the branch, the proportions in theis section will be constrained to this box */
    .branch-container {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40%;
        z-index: 0;
    }
        .branch {
            position: absolute;
            bottom: 40%;
            left: -5%;
            width: 95%;
            height: 17%;
            background: linear-gradient(180deg, #573318 0%, #3a200f 50%, #221207 100%);
            border-radius: 2vw;
            transform: rotate(-12deg);
            box-shadow: 0 1vw 1.5vw rgba(0,0,0,0.3);
            z-index: 10;
        }
        .branch2 {
            position: absolute;
            bottom: 47%;
            left: 67%;
            width: 20%;
            height: 14%;
            background: linear-gradient(180deg, #573318 0%, #3a200f 50%, #221207 100%);
            border-radius: 2vw;
            transform: rotate(20deg);
            box-shadow: 0 1vw 1.5vw rgba(0,0,0,0.3);
            z-index: 11;
        }
        .branch3 {
            position: absolute;
            bottom: 68%;
            left: 52%;
            width: 20%;
            height: 12.5%;
            background: linear-gradient(180deg, #573318 0%, #3a200f 50%, #221207 100%);
            border-radius: 2vw;
            transform: rotate(-45deg);
            box-shadow: 0 1vw 1.5vw rgba(0,0,0,0.3);
            z-index: 9;
        }
        .branch-texture {
            position: absolute;
            bottom: 40%;
            left: 30%;
            width: 30%;
            height: 10%;
            background: linear-gradient(90deg, transparent, rgba(0,0,0,0.3), transparent);
            transform: rotate(-12deg);
            z-index: 11;
            border-radius: 50%;
        }
        .moss {
            position: absolute;
            bottom: 39%;
            left: 10%;
            width: 19%;
            height: 10%;
            background: linear-gradient(45deg, #4ade80, #16a34a 50%, #4ade80 100%);
            border-radius: 50% 50% 20% 20%;
            transform: rotate(-11deg);
            z-index: 12;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
        }
        .moss2 {
            position: absolute;
            bottom: 66%;
            left: 62%;
            width: 7%;
            height: 7%;
            background: linear-gradient(90deg, #16a34a, #4ade80 50%, #16a34a 100%);
            border-radius: 50% 50% 20% 20%;
            transform: rotate(-10deg);
            z-index: 12;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
		}
/* bird container is the Bird for clicking birde sizing is constrained to this box */
    .bird-container {
        position: absolute;
        bottom: 21%;
        left: 10%;
        width: 70%;
        height: 70%;
        z-index: 20;
    }
/* the tail components are inside an tail div */
        .tail {
            position: absolute;
            bottom: 13%;
            left: 0;
            width: 40%;
            height: 14.3%;
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #1d4ed8 100%);
            clip-path: polygon(0 40%, 100% 0, 95% 70%, 100% 100%, 0 70%);
            transform-origin: right center;
            transform: rotate(-20deg);
            z-index: 5;
            box-shadow: 0 0.5vw 1vw rgba(0,0,0,0.2);
        }
            .tail-stripe-1 {
                position: absolute;
                bottom: 30%;
                left: 21.5%;
                width: 50%;
                height: 14%;
                border-radius: 8% / 55%;
                background: #ffffff;
                transform: rotate(deg);
                z-index: 7;
                opacity: 0.8;
            }
            .tail-stripe-2 {
                position: absolute;
                bottom: 48%;
                left: 32.5%;
                width: 43%;
                height: 16%;
                border-radius: 8% / 55%;
                background: #1e293b;
                transform: rotate(2deg);
                z-index: 6;
                opacity: 0.8;
            }
/* Feet are on their own, the can be manipulated separately */
        .foot-left {
            position: absolute;
            bottom: 0;
            left: 52%;
            width: 2%;
            height: 10%;
            background: #1c1917;
            transform: rotate(15deg);
            z-index: 15;
            border-radius: 0.3vw;
        }
        .foot-right {
            position: absolute;
            bottom: 3%;
            left: 58%;
            width: 2%;
            height: 9.5%;
            background: #1c1917;
            transform: rotate(-10deg);
            z-index: 3;
            border-radius: 0.3vw;
        }
/* Torso or body of the bird, not in a container div at this time */
        .body {
            position: absolute;
            bottom: 6%;
            left: 39%;
            width: 40%;
            height: 51.5%;
            background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 40%, #1d4ed8 80%);
            border-radius: 71.43% 64.29% 85.71% 14.29% / 55.56% 50% 66.67% 11.11%;
            transform: rotate(30deg); /*orig -10deg*/
            z-index: 4;
            box-shadow: inset -1.5vw -1vw 2vw rgba(0,0,0,0.25), inset 10px 10px 20px rgba(255,255,255,0.3);
        }
    /* White Chest & Underparts */
            .chest {
                position: absolute;
                bottom: 22%;
                left: 19%;
                width: 78.5%;
                height: 72%;
                background: linear-gradient(160deg, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%);
                border-radius: 50% 60% 80% 40%;
                transform: rotate(8deg); /*orig -8deg*/
                z-index: 6;
                box-shadow: inset -0.5vw -0.5vw 1.5vw rgba(0,0,0,0.1);
            }
/* Wings are containered in an wing div for wing manipulation */
        .wing {
            position: absolute;
            bottom: 1%;
            left: 56%;
            width: 31%;
            height: 48%;
            background: linear-gradient(35deg, #2563eb 0%, #1d4ed8 40%, #1e3a8a 100%);
            border-radius: 45.45% 54.55% 109.09% 9.09% / 29.41% 35.29% 70.59% 5.88%;
            transform-origin: top center;
            transform: rotate(48deg); /*orig -18deg*/
            z-index: 7;
            box-shadow: -0.3vw 0.5vw 1vw rgba(0,0,0,0.5);
        }
    /* Wing Pattern Details (Blue-White-Black bars characteristic of Blue Jay) */
            .wing-detail-1 {
                position: absolute;
                bottom: 26.5%;
                left: 2%;
                width: 68%;
                height: 6.5%;
                background: #93c5fd;
                transform: rotate(-52deg);/*orig -28deg*/
                z-index: 8;
                border-radius: 8% / 55%;
            }
            .wing-detail-2 {
                position: absolute;
                bottom: 31%;
                left: 22.5%;
                width: 63.5%;
                height: 7%;
                background: #ffffff;
                transform: rotate(-56deg); /*orig -25deg*/
                z-index: 9;
                border-radius: 8% / 55%;
                box-shadow: 0 0.1vw 0.2vw rgba(0,0,0,0.2);
            }
            .wing-detail-3 {
                position: absolute;
                bottom: 40%;
                left: 43%;
                width: 62%;
                height: 7%;
                background: #0f172a;
                transform: rotate(-62deg); /*orig -25deg*/
                z-index: 10;
                border-radius: 8% / 55%;
            }
/* Neck & Collar (Black necklace band) is a part of the head container div */
        .collar {
            position: absolute;
            bottom: 49%;
            left: 48%;
            width: 21.5%;
            height: 10%;
            background: #0f172a;
            border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
            transform: rotate(-30deg);
            z-index: 8;
            box-shadow: 0 0.2vw 0.4vw rgba(0,0,0,0.3);
        }
/* Head */
        .head {
            position: absolute;
            bottom: 46%;
            left: 52%;
            width: 27%;
            height: 27%;
            background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 60%, #1d4ed8 100%);
            border-radius: 50%;
            transform: rotate(0deg) ;
            z-index: 9;
            box-shadow: inset -0.5vw -0.5vw 1.2vw rgba(0,0,0,0.2), inset 0.5vw 0.5vw 1vw rgba(255,255,255,0.4);
        /* Pivot from where the neck joins the body (bottom-left area) */
            transform-origin: 35% 85%;
        /* Apply rotation controlled by CSS variable, defaulting to 0deg */
            transform: rotate(var(--head-rotation, 0deg));
        /* Optional: creates a smooth, organic feel rather than instant snapping */
            transition: transform 0.08s ease-out;
        }
    /* Face White Patch */
            .face-patch {
                position: absolute;
                bottom: 23%;        /* (18.4vw - 16.2vw) / 9.5vw */
                left: 45%;          /* (17.8vw - 13.5vw) / 9.5vw */
                width: 47%;         /* 4.5vw / 9.5vw */
                height: 58%;        /* 5.5vw / 9.5vw */
                background: #ffffff;
                border-radius: 50%;
                transform: rotate(15deg);
                z-index: 10;
            }                       
            /* Crest (The iconic Blue Jay Mohawk) */
            .crest-1 {
                position: absolute;
                bottom: 73%;        /* (23.5vw - 16.2vw) / 9.5vw */
                left: -3%;          /* (13vw - 13.5vw) / 9.5vw -> negative means slightly hanging off the left of the head div */
                width: 26%;         /* 2.5vw / 9.5vw */
                height: 47%;        /* 4.5vw / 9.5vw */
                background: linear-gradient(180deg, #2563eb 0%, #1e3a8a 100%);
                border-radius: 50% 50% 20% 50%;
                transform: rotate(-55deg);
                z-index: 0;
            }            
            .crest-2 {
                position: absolute;
                bottom: 81%;        /* (23.5vw - 16.2vw) / 9.5vw */
                left: 10%;          /* (14.5vw - 13.5vw) / 9.5vw */
                width: 26%;         /* 2.5vw / 9.5vw */
                height: 47%;        /* 4.5vw / 9.5vw */
                background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
                border-radius: 50% 50% 20% 50%;
                transform: rotate(-45deg);
                z-index: 1;
                box-shadow: -0.2vw -0.2vw 0.6vw rgba(0,0,0,0.2);
            }            
            .crest-3 {
                position: absolute;
                bottom: 85%;        /* (24.3vw - 16.2vw) / 9.5vw */
                left: 25%;          /* (16.5vw - 13.5vw) / 9.5vw */
                width: 26%;         /* 2.5vw / 9.5vw */
                height: 47%;        /* 4.5vw / 9.5vw */
                background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
                border-radius: 50% 50% 20% 50%;
                transform: rotate(-35deg);
                z-index: 2;
            }            
            /* Beak */
            .beak {
                position: absolute;
                bottom: 35%;        /* (19.5vw - 16.2vw) / 9.5vw */
                left: 95%;          /* (22.5vw - 13.5vw) / 9.5vw -> beak sits right on the edge */
                width: 47%;         /* 4.5vw / 9.5vw */
                height: 23%;        /* 2.2vw / 9.5vw */
                background: linear-gradient(180deg, #1c1917 0%, #292524 65%, #44403c 100%);
                clip-path: polygon(0 0, 100% 40%, 0 85%);
                transform: rotate(8deg);
                z-index: 12;
                border-radius: 4.4% 22.2% 22.2% 4.4%;
            }            
            .beak-lower {
                position: absolute;
                bottom: 32%;        /* (19.3vw - 16.2vw) / 9.5vw */
                left: 95%;          /* (22.5vw - 13.5vw) / 9.5vw */
                width: 47%;         /* 4.5vw / 9.5vw */
                height: 23%;        /* 2.2vw / 9.5vw */
                background: linear-gradient(180deg, #1c1917 0%, #292524 65%, #44403c 100%);
                clip-path: polygon(0 0, 100% 40%, 0 85%);
                transform: rotate(0deg);
                z-index: 12;
                border-radius: 4.4% 22.2% 22.2% 4.4%;
                transition: all 0.3s ease;
            }
            .beak-highlight {
                position: absolute;
                bottom: 49%;        /* (20.9vw - 16.2vw) / 9.5vw */
                left: 98%;          /* (22.8vw - 13.5vw) / 9.5vw */
                width: 26%;         /* 2.5vw / 9.5vw */
                height: 5%;         /* 0.5vw / 9.5vw */
                background: rgba(255,255,255,0.2);
                transform: rotate(8deg);
                z-index: 13;
                border-radius: 12%;
            }
        /* Eye - may contain elements to control eye movement */
            .eye {
                position: absolute;
                bottom: 52.5%;        /* (21.2vw - 16.2vw) / 9.5vw */
                left: 56%;          /* (18.8vw - 13.5vw) / 9.5vw */
                width: 18%;         /* 1.6vw / 9.5vw */
                height: 18%;        /* 1.6vw / 9.5vw */
                background: #09090b;
                border-radius: 50%;
                z-index: 11;
                box-shadow: inset 0 0 0.2vw rgba(255, 255, 255, 0.4); /* Cleaned up incomplete original rgba value */
            }
            .eye-shine {
                position: absolute;
                bottom: 61%;        /* (22vw - 16.2vw) / 9.5vw */
                left: 60%;             /* (19.2vw - 13.5vw) / 9.5vw */
                width: 5%;          /* 0.5vw / 9.5vw */
                height: 5%;         /* 0.5vw / 9.5vw */
                background: #ffffff;
                border-radius: 50%;
                z-index: 12;
            }
            /* Black mask line around eye */
            .eye-mask {
                position: absolute;
                bottom: 55.5%;        /* (21.4vw - 16.2vw) / 9.5vw */
                left: 70%;          /* (20.1vw - 13.5vw) / 9.5vw */
                width: 21%;         /* 2vw / 9.5vw */
                height: 8%;         /* 0.8vw / 9.5vw */
                background: #0f172a;
                transform: rotate(20deg);
                z-index: 10;
            }
/* **** ANIMATIONS *****
** Beak animation */
@keyframes beakMove {
    0%   { transform: rotate(0deg); }
    10%  { transform: translateY(50%) rotate(30deg); }
    20% { transform: rotate(0deg); }
    30%  { transform: translateY(35%) rotate(15deg); }
    40% { transform: rotate(4deg); }
    50% { transform: rotate(0deg); }
    75%  { transform: translateY(10%) rotate(7deg); }
    85% { transform: rotate(0deg); }
    97% { transform: translateY(25%) rotate(15deg); }
    100% { transform: rotate(0deg); }
}
/* Wing animation */
@keyframes wingMove {
    0%   { transform: rotate(58deg); }
    50%  { transform: rotate(46deg) rotateX(-20deg); }
    100% { transform: rotate(48deg); }
}
/* Tail animation */
@keyframes tailMove {
    0%   { transform: rotate(5deg); }
    33%  { transform: rotate(0deg);}
    66%  { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
/* Run the animation once then stop */
.animating-beak {
    animation: beakMove 2.4s ease-in;
}/* Run wing animation 6 times then stop */
.animating-wing {
    animation: wingMove 0.5s ease 6;
}/* Run tail animation 4 times then stop */
.animating-tail {
    animation: tailMove 0.8s ease 4;
}