/* ==========================================================================
   LESESOMMER 2026
   ANIMATIONS.CSS
   ========================================================================== */

/* Base transitions */

.scene-object{
    transition:
        transform var(--duration-base) var(--ease-soft),
        filter var(--duration-base) var(--ease-standard);
}

.scene-object:hover{
    transform:translateY(-4px) scale(1.02);
}

.scene-object.is-clicked{
    pointer-events:none;
}

/* Popup */

#popup-overlay{
    animation:popupOverlayFadeIn var(--duration-base) var(--ease-standard) both;
}

#popup{
    animation:popupEnter var(--duration-reveal) var(--ease-bounce) both;
}

@keyframes popupOverlayFadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes popupEnter{
    from{
        opacity:0;
        transform:translateY(24px) scale(.94);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* Object reveal animations */

.scene-object.is-animating-lift{
    animation:objectLift var(--duration-slow) var(--ease-bounce) both;
}

.scene-object.is-animating-jump{
    animation:objectJump var(--duration-slow) var(--ease-bounce) both;
}

.scene-object.is-animating-rotate{
    animation:objectRotate var(--duration-slow) var(--ease-soft) both;
}

.scene-object.is-animating-tip{
    animation:objectTip var(--duration-slow) var(--ease-soft) both;
}

.scene-object.is-animating-collapse{
    animation:objectCollapse var(--duration-reveal) var(--ease-soft) both;
}

.scene-object.is-animating-open-lid{
    animation:objectOpenLid var(--duration-slow) var(--ease-bounce) both;
}

.scene-object.is-animating-open-bag{
    animation:objectOpenBag var(--duration-slow) var(--ease-bounce) both;
}

.scene-object.is-animating-open-shell{
    animation:objectOpenShell var(--duration-slow) var(--ease-bounce) both;
}

.scene-object.is-animating-chair-open{
    animation:objectChairOpen var(--duration-reveal) var(--ease-soft) both;
}

.scene-object button{
    position:relative;
}

.reveal-hover-hint{
    position:absolute;
    left:70%;
    top:30%;
    width:46px;
    height:46px;
    transform:translate(-35%,-35%) scale(.86);

    border-radius:50%;
    pointer-events:none;
    z-index:5;
    opacity:0;
    visibility:hidden;

    /* heller Kern + innerer Glow */
    background:
        radial-gradient(circle,
            rgba(255,255,255,1) 0 24%,
            rgba(255,255,255,.98) 25% 30%,
            rgba(255,225,120,.95) 31% 42%,
            rgba(255,186,55,.45) 43% 62%,
            rgba(255,170,40,0) 74%
        );

    /* nur äußerer Ring */
    border:2px solid rgba(255,255,255,.95);

    box-shadow:
        0 0 10px rgba(255,255,255,.95),
        0 0 22px rgba(255,185,60,.95),
        0 0 42px rgba(255,170,40,.65),
        0 0 60px rgba(255,170,40,.28);

    animation:revealHintIdle 1.8s ease-in-out infinite;

    transition:
        opacity var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-bounce),
        box-shadow var(--duration-fast) var(--ease-standard);
        
    transition:
        opacity var(--duration-fast) var(--ease-standard),
        visibility var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-bounce),
        box-shadow var(--duration-fast) var(--ease-standard);
}

/* äußere Sonnenstrahlen */

.reveal-hover-hint::before{

    content:"";
    position:absolute;
    inset:-20px;
    border-radius:50%;

    background:
        repeating-conic-gradient(
            from -6deg,
            transparent 0deg 18deg,
            rgba(255,182,55,1) 18deg 28deg,
            transparent 28deg 45deg
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 53%,
            #000 54% 84%,
            transparent 85%
        );

    opacity:1;
}

/* innere Sonnenstrahlen */

.reveal-hover-hint::after{

    content:"";
    position:absolute;
    inset:-2px;
    border-radius:50%;

    background:
        repeating-conic-gradient(
            from -5deg,
            transparent 0deg 20deg,
            rgba(255,194,78,.95) 20deg 28deg,
            transparent 28deg 45deg
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 32%,
            #000 33% 45%,
            transparent 46%
        );

    opacity:.95;
}

html.reveal-hints-visible .reveal-hover-hint{
    opacity:.88;
    visibility:visible;
}

html.reveal-hints-visible
.scene-object[data-reveal-enabled="true"]:hover
.reveal-hover-hint,

html.reveal-hints-visible
.scene-object[data-reveal-enabled="true"]:focus-within
.reveal-hover-hint{

    opacity:1;

    transform:translate(-35%,-35%) scale(1.05);

    box-shadow:
        0 0 12px rgba(255,255,255,1),
        0 0 26px rgba(255,190,70,1),
        0 0 50px rgba(255,170,40,.72),
        0 0 72px rgba(255,170,40,.34);
}

@keyframes revealHintIdle{

    0%,100%{
        transform:translate(-35%,-35%) scale(.86);
    }

    50%{
        transform:translate(-35%,-35%) scale(.96);
    }
}

/* Keyframes */

@keyframes objectLift{
    0%{
        transform:translateY(0) scale(1);
    }
    45%{
        transform:translateY(-28px) scale(1.04);
    }
    100%{
        transform:translateY(0) scale(1);
    }
}

@keyframes objectJump{
    0%{
        transform:translateY(0) rotate(0deg) scale(1);
    }
    35%{
        transform:translateY(-34px) rotate(-4deg) scale(1.08);
    }
    70%{
        transform:translateY(4px) rotate(3deg) scale(.98);
    }
    100%{
        transform:translateY(0) rotate(0deg) scale(1);
    }
}

@keyframes objectRotate{
    0%{
        transform:rotate(0deg) scale(1);
    }
    45%{
        transform:rotate(14deg) scale(1.04);
    }
    100%{
        transform:rotate(0deg) scale(1);
    }
}

@keyframes objectTip{
    0%{
        transform:rotate(0deg) translateY(0);
    }
    45%{
        transform:rotate(-16deg) translateY(6px);
    }
    100%{
        transform:rotate(0deg) translateY(0);
    }
}

@keyframes objectCollapse{
    0%{
        transform:scale(1) translateY(0);
        opacity:1;
    }
    45%{
        transform:scale(1.04,.82) translateY(16px);
        opacity:.95;
    }
    100%{
        transform:scale(1) translateY(0);
        opacity:1;
    }
}

@keyframes objectOpenLid{
    0%{
        transform:translateY(0) rotate(0deg);
    }
    45%{
        transform:translateY(-10px) rotate(-5deg);
    }
    100%{
        transform:translateY(0) rotate(0deg);
    }
}

@keyframes objectOpenBag{
    0%{
        transform:scale(1);
    }
    45%{
        transform:scale(1.08,.94) translateY(4px);
    }
    100%{
        transform:scale(1);
    }
}

@keyframes objectOpenShell{
    0%{
        transform:scale(1) rotate(0deg);
    }
    45%{
        transform:scale(1.08) rotate(-6deg);
    }
    100%{
        transform:scale(1) rotate(0deg);
    }
}

@keyframes objectChairOpen{
    0%{
        transform:translateY(0) rotate(0deg);
    }
    45%{
        transform:translateY(-8px) rotate(2deg) scale(1.03);
    }
    100%{
        transform:translateY(0) rotate(0deg) scale(1);
    }
}

/* Button transitions */

#navigation a,
#hero-button,
#popup-button,
#popup-close{
    transition:
        transform var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard),
        opacity var(--duration-fast) var(--ease-standard);
}

/* Reduced motion */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

}