#wm-banner{
    position:relative;
    height:420px;
    overflow:hidden;

    background:
        radial-gradient(
            circle at center,
            #1e1e1e 0%,
            #101010 35%,
            #050505 65%,
            #000000 100%
        );
}

/* cinematic edge vignette */
#wm-banner::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 45%,
            rgba(0,0,0,.12) 65%,
            rgba(0,0,0,.35) 82%,
            rgba(0,0,0,.60) 100%
        );

    pointer-events:none;

    z-index:50;
}

/* living center glow */
#wm-banner::after{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:900px;
    height:500px;

    transform:
        translate(-50%,-50%);

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,.04) 18%,
            rgba(255,255,255,.015) 35%,
            transparent 70%
        );

    filter:blur(40px);

    pointer-events:none;

    animation:
        wmCenterPulse 16s ease-in-out infinite;

    z-index:1;
}

#wm-banner-stage{
    position:absolute;
    inset:0;
    overflow:hidden;

    z-index:2;

    will-change:transform;

    transition:
        transform .9s cubic-bezier(.18,.72,.16,1);
}

.wm-photo{
    position:absolute;

    opacity:0;

    pointer-events:none;

    border-radius:18px;

    transform-origin:center center;

    backface-visibility:hidden;

    box-shadow:
        0 12px 35px rgba(0,0,0,.28),
        0 35px 110px rgba(0,0,0,.45);

    animation-name:wmFly;
    animation-fill-mode:forwards;
    animation-timing-function:cubic-bezier(.18,.72,.16,1);

    will-change:
        transform,
        opacity,
        filter;
}

/* giant background memories */
.background-layer{
    filter:
        blur(4px)
        brightness(.80);

    z-index:1;

    opacity:.75;
}

/* normal photos */
.mid-layer{
    z-index:2;
}

/* fast foreground photos */
.front-layer{
    z-index:3;

    filter:
        brightness(1.04);
}

/* hero image moments */
.hero{
    z-index:4;

    filter:
        brightness(1.10)
        contrast(1.05);

    box-shadow:
        0 20px 70px rgba(0,0,0,.45),
        0 60px 180px rgba(0,0,0,.60);
}

#wm-banner-overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    z-index:100;

    pointer-events:none;
}

/* logo protection field */
#wm-banner-overlay::before{
    content:"";

    position:absolute;

    width:760px;
    height:320px;

    max-width:88vw;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,.86) 0%,
            rgba(0,0,0,.58) 35%,
            rgba(0,0,0,.18) 60%,
            transparent 100%
        );

    filter:blur(26px);

    z-index:-1;
}

.wm-logo{

    width:190px;

    max-width:28vw;

    margin-bottom:18px;

    opacity:0;

    animation:
        wmLogoAppear 2.2s ease forwards,
        wmLogoFloat 14s ease-in-out 2.2s infinite;

    filter:
        drop-shadow(0 0 25px rgba(255,255,255,.18))
        drop-shadow(0 0 70px rgba(255,255,255,.10))
        drop-shadow(0 0 120px rgba(255,255,255,.06));
}

#wm-banner-overlay h1{
    margin:0;

    color:#fff;

    font-size:64px;

    font-weight:200;

    letter-spacing:.12em;

    text-shadow:
        0 0 40px rgba(0,0,0,.95),
        0 0 80px rgba(0,0,0,.85),
        0 0 140px rgba(0,0,0,.70);
}

#wm-banner-overlay p{
    color:#fff;

    font-size:22px;

    font-weight:300;

    margin-top:10px;

    text-shadow:
        0 0 30px rgba(0,0,0,.95),
        0 0 60px rgba(0,0,0,.85);
}

@keyframes wmCenterPulse{

    0%{
        opacity:.75;

        transform:
            translate(-50%,-50%)
            scale(1);
    }

    50%{
        opacity:1;

        transform:
            translate(-50%,-50%)
            scale(1.08);
    }

    100%{
        opacity:.75;

        transform:
            translate(-50%,-50%)
            scale(1);
    }
}

@keyframes wmLogoFloat{

    0%{
        transform:
            translateY(0px)
            scale(1);
    }

    50%{
        transform:
            translateY(-4px)
            scale(1.02);
    }

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

@keyframes wmLogoAppear{

    0%{
        opacity:0;

        transform:
            translateY(10px)
            scale(.85);
    }

    100%{
        opacity:1;

        transform:
            translateY(0px)
            scale(1);
    }
}

@keyframes wmFly{

    0%{
        opacity:0;

        filter:
            blur(10px)
            brightness(.82);

        transform:
            translate(
                calc(var(--wm-drift-x) * -0.05),
                calc(var(--wm-drift-y) * -0.05)
            )
            rotate(calc(var(--wm-rot) - 4deg))
            scale(.12);
    }

    12%{
        opacity:.95;

        filter:
            blur(0px)
            brightness(1);

        transform:
            translate(
                calc(var(--wm-drift-x) * .14),
                calc(var(--wm-drift-y) * .14)
            )
            rotate(calc(var(--wm-rot) - 2deg))
            scale(.48);
    }

    /* drift phase */
    55%{
        opacity:.98;

        filter:
            blur(0px)
            brightness(1.08)
            contrast(1.04);

        transform:
            translate(
                calc(var(--wm-drift-x) * .72),
                calc(var(--wm-drift-y) * .72)
            )
            rotate(var(--wm-rot))
            scale(.92);
    }

    /* linger phase */
82%{
    opacity:.94;

    filter:
        blur(0px)
        brightness(1.08);

    transform:
        translate(
            calc(var(--wm-drift-x) * .88),
            calc(var(--wm-drift-y) * .88)
        )
        rotate(calc(var(--wm-rot) + 1deg))
        scale(.82);
}

    90%{
        opacity:.42;

        filter:
            blur(2px)
            brightness(.95);

        transform:
            translate(
                calc(var(--wm-drift-x) * .96),
                calc(var(--wm-drift-y) * .96)
            )
            rotate(calc(var(--wm-rot) + 4deg))
            scale(1.03);
    }

100%{
    opacity:0;

    filter:
        blur(6px)
        brightness(.82);

    transform:
        translate(
            var(--wm-drift-x),
            var(--wm-drift-y)
        )
        rotate(calc(var(--wm-rot) + 4deg))
        scale(.88);
}
}

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

    .wm-photo,
    #wm-banner::after,
    #wm-banner-overlay img{
        animation:none !important;
    }

    #wm-banner-stage{
        transform:none !important;
    }
}