/*Animation*/

/* ---------------------------------------------------------------
       TUNABLES: the values you're most likely to change live here as
       global custom properties. Adjust them and the whole animation
       updates — no need to touch the rules below.
       --------------------------------------------------------------- */
:root {
    --final-size: 160px;     /* Nadim: 160px*/
    /* the logo's resting size */
    --start-scale: 10;       /* Nadim: 4*/
    /* how big it starts: 160 x 8 = 1280px on screen */
    --duration: 1500ms;
    /* how long the shrink takes */
    --fade: 1100ms;
    /* how long the cross-fade at the end takes */
}

/* Count padding/borders INSIDE an element's width, so sizes are predictable. */
* {
    box-sizing: border-box;
}

/* Remove the default body margin and let the page be full-height.
       (A percentage height only works if every ancestor also has one.) */
#intro-overlay {
    margin: 0;
    height: 100%;
    left: 0;

    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

#intro-overlay {
    min-height: 100vh;
    /* at least one full screen tall */
    display: flex;
    /* flexbox is the centering engine... */
    align-items: center;
    /* ...vertical centering... */
    justify-content: center;
    /* ...horizontal centering.            */
    /* Centers the item as a whole, so the
                                     logo stays centred at EVERY size. */

    /* Soft dark backdrop with a subtle vignette so every face of the mark
         reads. Swap to a light grey like #f4f4f6 if you prefer a light page
         (avoid pure white — the white facet of the logo would vanish). */
    background: radial-gradient(120% 120% at 50% 42%,
            #2c2c33 0%, #1b1b20 55%, #141418 100%);

    overflow: hidden;
    /* clip the briefly-1280px logo so no
                                     scrollbars flash during the opening frame */
}

/* ---------------------------------------------------------------
       THE STAGE is the wrapper that actually shrinks. Both logos live
       inside it, stacked on top of each other, so they shrink together
       and we can cross-fade between them at the end.

       Sharpness note: the stage's NATURAL size is the LARGE size and the
       animation scales it DOWN. The browser rasterises at layout size then
       transforms that bitmap on the GPU — minifying stays crisp, upscaling
       would look soft. So we start big and scale down on purpose.
       --------------------------------------------------------------- */
.stage {
    position: relative;
    /* anchor for the stacked imgs */
    width: calc(var(--final-size) * var(--start-scale));
    height: calc(var(--final-size) * var(--start-scale));
    transform-origin: center center;
    /* scale toward its own centre */
    /* shorthand: <name> <duration> <easing> <fill>. The cubic-bezier is an
         ease-out that decelerates hard at the end ("landing" feel).
         `forwards` holds the final frame instead of snapping back. */
    /*Nadim's animation
    animation: land var(--duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;*/
    /*Mark's animation 1: start bigger, accelerating shrinkage
    animation: land var(--duration) cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;*/
    /*Mark's animation 2: start bigger, accelerating shrinkage, bounce effect*/
    animation: land var(--duration) cubic-bezier(0.68, -0.55, 0.265, 1.3) forwards;
    /*Mark's animation 3 - play around
    animation: land var(--duration) cubic-bezier(0.68, -0.55, 0.265, 1.35) forwards;*/

    
}



.firmName {
    position: absolute;
    top: calc(50% + (var(--final-size) / 2) + 24px);
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    text-align: center;
    white-space: nowrap;
    transition: opacity var(--fade) ease;
    color: #8bd0b8;
    font-family: 'Geist', sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
}

.stage.swap ~ .firmName {
    opacity: 1;
}

/* Both logos fill the stage and sit exactly on top of one another. */
.stage .logoOverlay {
    position: absolute;
    inset: 0;
    /* top/right/bottom/left all 0 */
    width: 100%;
    height: 100%;
    display: block;
}

/* The SECOND logo starts invisible; when .swap is added it fades in
       while the FIRST fades out — that's the cross-fade. */
.stage .second {
    opacity: 0;
}

/* Nadim's version 
.stage.swap .second {
    opacity: 1;
    transition: opacity var(--fade) ease;
}

.stage.swap .first {
    opacity: 0;
    transition: opacity var(--fade) ease;
}
*/

/* --- Claude's fly through version --- */
/* second startet leicht vergrößert (wirkt wie "aus der Ferne kommend") */
.stage .second {
    opacity: 0;
    transform: scale(1.4);
    transform-origin: center center;
}

.stage .first {
    transform-origin: center center;
}

/* first fliegt an der Kamera vorbei: stark vergrößern + ausblenden */
.stage.swap .first {
    animation: flyThrough var(--fade) ease-in forwards;
}

/* second landet: von 1.4x auf 1x, gleichzeitig einblenden */
.stage.swap .second {
    animation: flyIn var(--fade) ease-out forwards;
}

@keyframes flyThrough {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(15);
        opacity: 0;
    }
}

@keyframes flyIn {
    from {
        transform: scale(1.4);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
/* --- Claude's fly through version ends here --- */

/* The shrink's timeline: fade the whole stage in and scale it down. */
@keyframes land {
    from {
        transform: scale(1);
        /* full natural size = 1280px: starts huge */
        opacity: 1;
        /* fully transparent */
    }

    60% {
        opacity: 1;
        /* finish the fade-in early, so the logo is
                                 solid while it does its final settle */
    }

    to {
        /* 1 / start-scale brings 1280px down to the 160px final size */
        transform: scale(calc(1 / var(--start-scale)));
        opacity: 1;
    }
}

/* Added by the script the instant the shrink finishes: drop the transform
       and set the REAL 160px size, so both SVGs re-render as sharp vector art
       at rest instead of staying a minified bitmap. */
.stage.settled {
    animation: none;
    transform: none;
    width: var(--final-size);
    height: var(--final-size);
}

/* Accessibility: if the user's OS asks to minimise motion, skip the
       shrink AND the cross-fade — just show the END state (the second logo)
       at its final size. */
@media (prefers-reduced-motion: reduce) {
    .stage {
        animation: none;
        transform: none;
        width: var(--final-size);
        height: var(--final-size);
    }

    .stage .first {
        opacity: 0;
    }

    .stage .second {
        opacity: 1;
    }
}





/* Repeat visits in the same browser session: the inline <head> script tags
   <html> with .intro-seen, and we hide the overlay before it can paint or
   animate, so the intro plays only once per session. */
html.intro-seen #intro-overlay { display: none !important; }