/* ------------------------------------------------------------------
 *   Eye component styles (unchanged)
 * ------------------------------------------------------------------ */
.eye-wrapper{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:auto;
    align-self:center;
    margin-left: 28px;
    transform: translateY(20px);
}

.eye-container{
    position:relative;
    width:300px;                /* original size – will be scaled down */
    height:300px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 10px 20px rgba(0,0,0,.2);
    transform:scale(.3);       /* shrink to ~120×120 px (20% smaller) */
    transform-origin:top left;
}

.sclera{position:absolute;inset:0;border-radius:50%;background:#fff;z-index:1;}
.moving-eye{position:absolute;inset:0;animation:naturalEyeMovementA 8s ease-in-out infinite;z-index:2;}
.eye-inner{position:absolute;inset:0;width:100%;height:100%;transform-origin:center center;}

.iris{
    position:absolute;
    top:30px; left:22px;
    width:240px;height:240px;border-radius:50%;
    background:radial-gradient(circle at center,#165a8f 35%,#2a6bbc 45%,#009ec7 55%);
    transition: filter 0.4s ease;
}

.pupil{
    position:absolute;
    top:90px; left:70px;
    width:120px;height:120px;border-radius:50%;
    background:#0a1e4d;
    /* Normal, infinite jitter – will be overridden during look‑up/down */
    animation:pupilMoveA 8s ease-in-out infinite;
}

.cornea{
    position:absolute;
    top:30px; left:22px;
    width:240px;height:240px;border-radius:50%;
    background:radial-gradient(circle at center,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 10%);
}

.iris-texture{
    position:absolute;
    top:30px; left:22px;
    width:240px;height:240px;border-radius:50%;
    background-image:radial-gradient(circle at center,
                                     transparent 30%,rgba(255,255,255,.1) 31%,rgba(255,255,255,.1) 40%);
    animation:textureMoveA 8s ease-in-out infinite;
}

/* ---------- Eye rotation / looking animations ------------------- */
.eye-inner.eye-rotating{
    animation:rotateEye 1.5s cubic-bezier(.4,.0,.2,1) forwards
}

.eye-inner.eye-looking-down{
    animation:lookDown 1.3s ease-out forwards;
}

.eye-inner.eye-looking-up{
    animation:lookUp 1.3s ease-in forwards;
}

/* ------------------------------------------------------------------
 *   New pupil keyframes – “look‑up” / “look‑down”
 * ------------------------------------------------------------------ */
@keyframes pupilLookUp {
    /* Keep the original horizontal jitter, but add ~10–15 px higher */
      52% { transform:translate(4px,-13.5px); }   /* above the normal -2.5px */
      100% { transform:translate(0 0); }
}

@keyframes pupilLookDown {
    /* Keep the original horizontal jitter, but add ~10–15 px lower */
      65% { transform:translate(5.5px,16px); }    /* below the normal +2px */
      100% { transform:translate(0 0); }
}

/* ------------------------------------------------------------------
 *   Override the pupil’s animation only while the eye is looking
 * ------------------------------------------------------------------ */
.eye-inner.eye-looking-up .pupil{
    animation:pupilLookUp 1.3s ease-in forwards;
}

.eye-inner.eye-looking-down .pupil{
    animation:pupilLookDown 1.3s ease-out forwards;
}

/* ------------------------------------------------------------------
 *   key‑frames
 * ------------------------------------------------------------------ */
@keyframes naturalEyeMovementA{
    0%,20%,50%,80%,100%{transform:translateX(-5px)}
    30%{transform:translate(-8px,-6px) rotate(-4deg)}
    60%{transform:translate(-10px,4px) rotate(-5deg)}
}

@keyframes naturalEyeMovementB{
    0%,20%,50%,80%,100%{transform:translateX(-5px)}
    30%{transform:translate(-8px,-9px) rotate(-4deg)}
    60%{transform:translate(-10px,6px) rotate(-5deg)}
}

@keyframes pupilMoveA{
    0%,20%{transform:none}
    30%{transform:translate(-3px,-2.5px)}
    50%{transform:none}
    60%{transform:translate(-4px,2px)}
    80%,100%{transform:none}
}

@keyframes pupilMoveB{
    0%,20%{transform:none}
    30%{transform:translate(-3px,-2.5px)}
    50%{transform:none}
    60%{transform:translate(-4px,2px)}
    80%,100%{transform:none}
}

@keyframes textureMoveA{
    0%,100%{transform:none}
    25%{transform:translate(-1px,-1px) rotate(.3deg)}
    50%{transform:none}
    75%{transform:translate(1px,1px) rotate(-.3deg)}
}

@keyframes textureMoveB{
    0%,100%{transform:none}
    25%{transform:translate(-1px,-1px) rotate(.3deg)}
    50%{transform:none}
    75%{transform:translate(1px,1px) rotate(-.3deg)}
}

@keyframes rotateEye{
    from{transform:none}to{transform:rotate(360deg)}
}

@keyframes lookDown {
    0%   { transform: translateY(0); }
    20%  { transform: translateY(15px); }
    40%  { transform: translateY(22px); }
    60%  { transform: translateY(27px); }
    80%  { transform: translateY(10px); }
    95%  { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

@keyframes lookUp {
    0%   { transform: translateY(0); }
    20%  { transform: translateY(-15px); }
    40%  { transform: translateY(-22px); }
    60%  { transform: translateY(-28px); }
    80%  { transform: translateY(-10px); }
    95%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}