@view-transition {
            navigation: auto;
        }
        
        *, *:before, *:after {
            box-sizing: border-box;
            margin: 0;
            padding:0;  
        }

        img {
            max-width: 100%;
            display: inline block;
        }

        h1, h2 {
            text-align: center;
        }

        a {
            font-size: 100%; 
            vertical-align: baseline; 
            background: transparent;
            text-decoration: none;
	        cursor: pointer;
        }

        html {overflow-y: scroll;}
        
        html, body {
            min-height: 100dvh;
        }

        body {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size:16px;
            font-family: "Righteous", sans-serif;  
        }
        
        .landing {
            display: flex;
            place-items: center;
            min-height: 100svh;
            position: relative;
            background-image:var(--bodyBackGround);
            max-inline-size: 100svw;
            min-height: 100svh;
            flex-basis: 100%;
            z-index: 1;
        }

        .overlay {
            width: 100svw;
            height: 100svh;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .animated {
            position: relative;
            width: 100%;
            max-inline-size: 40rem;
        }

            & .welcome, & .logos, & .greetings, & .next {
                inline-size: 100%;
                max-inline-size: 40rem;
            }

            & .welcome {
                    position: absolute;
                    inset: 0;
                    place-items: center;
                    flex-direction: column;
                    display: flex;
                    opacity: 0;
                    visibility: hidden;
                    flex-flow: 1 1 1;
                    z-index: -1;
                    animation-name: switch;
                    animation-delay: 3000ms;
                    animation-duration: 1000ms;
                    animation-timing-function: ease-in;
                    animation-fill-mode: forwards;
                    scale: 0;
                    gap: 0.75rem;

                    
            }

            @keyframes switch {
                        0% {
                            opacity: 0;
                            visibility: hidden;
                            scale: 0;
                            z-index: -1;
                        }
                        100% {
                            opacity: 1;
                            visibility: visible;
                            scale: 1;
                            z-index: 1;  
                        }
            }

            .logos {
                    display: inline flex;
                    justify-content: space-around;
                    align-items: center;
                    position: relative;
                    animation-name: fadeIn2;
                    animation-delay: 9000ms;
                    animation-duration: 2000ms;
                    animation-timing-function: ease-in;
                    animation-fill-mode: forwards;
                    opacity: 0;
                    visibility: hidden;
                    scale: 0;

                    & .destined {
                        position: relative;
                        inline-size: 10rem;
                        height: 10rem;

                        & a {
                            position: absolute;
                            inset: 0;
                        }
                    }
                }

                 @keyframes fadeIn2 {
                        0% {
                            opacity: 0;
                            visibility: hidden;
                            scale: 0;
                        }
                        100% {
                            opacity: 1;
                            visibility: visible;
                            scale: 1;
                        }
                    }


            .greetings {
                    font-size: 8rem;
                    color: transparent;
                    text-shadow: 0 0 0 transparent;
                    font-weight: 800;
                    letter-spacing: 0.5rem;
                    line-height: 1.6;
                    align-self: center;
                    animation-name: spinIn;
                    animation-delay: 7000ms;
                    animation-duration: 2000ms;
                    animation-timing-function: ease-in;
                    animation-fill-mode: forwards;
                    rotate: 0deg;
                    scale: 0;
                    z-index: 2;
                }

                @keyframes spinIn {
                        0% {
                            color: transparent;
                            text-shadow: 0 0 0 transparent;
                            rotate: 0deg;
                            scale: 0;
                        }
                        100% {
                            color: light-dark(var(--bc-skyblue), var(---bc-c-sky_blue));
                            text-shadow: -0.2rem -0.2rem 0.2rem light-dark(var(--bc-gold), var(---bc-c-gold)), -0.3rem -0.4rem 0.3rem var(--bc-sky_blue-tint);
                            line-height: 1.2;
                            rotate: 360deg;
                            scale: 1;
                        }
                    }

            .next {
                    font-size: 2rem;
                    color: transparent;
                    font-family: fantasy;
                    text-shadow: 0 0 0 transparent;
                    font-weight: 800;
                    letter-spacing: 0.5rem;
                    line-height: 2.5;
                    vertical-align: middle;
                    animation-name: fadeIn;
                    animation-delay: 9000ms;
                    animation-duration: 2000ms;
                    animation-timing-function: ease-in;
                    animation-fill-mode: forwards;
                    opacity: 0;
                    visibility: hidden;
                    z-index: 3;
                    text-align: center;
                    outline: none;
                    border: 0.1rem ridge light-dark(var(--bc-rebeccapurple), var(--bc-gold));
                    border-radius: 0.4rem;
                    transition: all 500ms ease-in-out;

                    &:hover {
                        background-color: light-dark(var(--bc-sky_blue-tint), var(---bc-c-sky_blue-tint));
                    }
                }

                @keyframes fadeIn {
                        0% {
                            color: transparent;
                            text-shadow: 0 0 0 transparent;
                            opacity: 0;
                            visibility: hidden;
                        }
                        100% {
                            color: var(--bc-skyblue-accent);
                            text-shadow: 0 0.1rem 0.2rem light-dark(var(--bc-purple-accent), var(---bc-c-purple-accent)), 0.1rem 0.2rem 0.3rem light-dark(var(--bc-blue), var(---bc-c-blue));
                            opacity: 1;
                            visibility: visible;
                        }
                    }
            
            & .dss__family {
                position: relative;
                margin-inline: auto;
                margin-block: auto;
                width: 20rem;
                height: 20rem;
                justify-content: center;
                align-items: center;
                display: flex;
                flex-flow: 1 1 1;
                z-index: 5;
                animation: rotateIn 2000ms ease-in forwards;
                rotate: 0deg;
                scale: 0;
                filter:drop-shadow(0 0.0125rem 1rem var(--bc-blue));
            }
                & .wavy-circle {
                    position: absolute;
                    left: 0;
                    top: 0;
                    background-image: linear-gradient(130deg, light-dark(var(--bc-beige), var(---bc-c-beige)), light-dark(var(--bc-blue), var(---bc-c-blue)));
                    z-index: -1;
                    --s: 18.75rem; /* adjust to control the size */
                    width: var(--s); 
                    aspect-ratio: 1;
                    --g:/calc(var(--s)*0.322) calc(var(--s)*0.322) radial-gradient(50% 50%,#000 99%,#0000 101%) no-repeat;
                    mask: calc(50% + var(--s)*0.3) calc(50% + var(--s)*0) var(--g),calc(50% + var(--s)*0) calc(50% + var(--s)*0.3) var(--g),calc(50% + var(--s)*-0.3) calc(50% + var(--s)*0) var(--g),calc(50% + var(--s)*0) calc(50% + var(--s)*-0.3) var(--g),radial-gradient(calc(var(--s)*0.35),#000 99%,#0000 101%) subtract,calc(50% + var(--s)*0.321) calc(50% + var(--s)*0.321) var(--g),calc(50% + var(--s)*-0.321) calc(50% + var(--s)*0.321) var(--g),calc(50% + var(--s)*-0.321) calc(50% + var(--s)*-0.321) var(--g),calc(50% + var(--s)*0.321) calc(50% + var(--s)*-0.321) var(--g);
                    animation-name: spinOut;
                    animation-delay: 5000ms;
                    animation-duration: 3000ms;
                    animation-timing-function: ease-out;
                    animation-fill-mode: forwards;
                    rotate: 0deg;
                    scale: 1;
                    z-index: 1;

                    & h2 {
                        position: absolute;
                        display: flex;
                        visibility: visible;
                        opacity: 0;
                        flex-wrap: wrap;
                        top: 39%;
                        left: 0;
                        max-width: 100%;
                        padding-block: 0.5rem;
                        background-color: light-dark(var(--bc-keyframes-dss), var(---bc-c-keyframes-dss));
                        animation-name: family;
                        animation-delay: 2000ms;
                        animation-duration: 2000ms;
                        animation-timing-function: ease-in;
                        animation-fill-mode: forwards;
                        color: var(--bc-dodgerblue);
                        text-shadow: 0 0.1rem 0.1rem light-dark(var(--bc-rebeccapurple), var(---bc-c-rebeccapurple));
                        font-size: clamp(1.5rem, 1.5ch, 2em);
                        letter-spacing: 0.1rem;
                        z-index: 100;
                        border-radius: 0.1rem;
                        mask: 
                        radial-gradient(3px at 25% 0   ,#0000 98%,#000) 50% 3px/12px 51% repeat-x,
                        radial-gradient(3px at 75% 50% ,#000 99%,#0000 101%) top/12px 6px repeat-x,
                        radial-gradient(3px at 75% 100%,#0000 98%,#000) calc(50% + 6px) calc(100% - 3px)/12px 51% repeat-x,
                        radial-gradient(3px at 25% 50% ,#000 99%,#0000 101%) calc(50% + 6px) 100%/12px 6px repeat-x
                    }

                    & .logo_1 {
                        top: 0.5rem;
                        margin-inline: 33%;
                        position: absolute;
                        width: 6.25rem;
                        height: 6.25rem;
                        padding: 0.5rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                        z-index: 1;
                    }

                    & .child-circle {
                        position: absolute;
                        left: -3%;
                        bottom: 0%;
                        --s: 20rem; /* adjust to control the size */
                        background-image: linear-gradient(13deg, var(cc-bg-lg__0), var(cc-bg-lg__1));
                            z-index: -1;
                        width: var(--s); 
                        aspect-ratio: 1 / .65;
                        --g:/calc(var(--s)*0.433) calc(var(--s)*0.433) radial-gradient(50% 50%,#000 99%,#0000 101%) no-repeat;
                        mask: calc(50% + var(--s)*0) calc(50% + var(--s)*0.25) var(--g),calc(50% + var(--s)*-0.217) calc(50% + var(--s)*-0.125) var(--g),calc(50% + var(--s)*0.217) calc(50% + var(--s)*-0.125) var(--g),radial-gradient(calc(var(--s)*0.331),#000 99%,#0000 101%) subtract,calc(50% + var(--s)*-0.433) calc(50% + var(--s)*0.25) var(--g),calc(50% + var(--s)*0) calc(50% + var(--s)*-0.5) var(--g),calc(50% + var(--s)*0.433) calc(50% + var(--s)*0.25) var(--g);
                    }               
                }

                    .logo_2 {
                        left: 8%;
                        margin-block: 5%;
                        position: absolute;
                        width: 5.4rem;
                        height: 5.4rem;
                        padding: 0.5rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                        z-index: 1;
                    }
            
                    .logo_3 {
                        margin-block-start: 5.5%;
                        right: 10%;
                        position: absolute;
                        width: 5rem;
                        height: 5rem;
                        padding: 0.5rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                        z-index: 1;
                    }

                    .logo_4 {
                        bottom: 0.75rem;
                        margin-inline: 36%;
                        position: absolute;
                        width: 5.5rem;
                        height: 5.5rem;
                        padding: 0.5rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                        z-index: 1;
                    }

                .logo-img img {
                            position: absolute;
                            inset: 0;
                            z-index: 1;
                        }

                @keyframes rotateIn {
                    0% {
                        rotate: 0deg;
                        scale: 0;
                    }
                    100% {
                        rotate: 360deg;
                        scale: 1;
                    }
                }     

                @keyframes spinOut {
                    0% {
                        rotate: 0deg;
                        scale: 1;
                        z-index: 1;
                    }
                    100% {
                        rotate: 360deg;
                        scale: 0;
                        z-index: -1;
                    }
                }

                @keyframes family {
                    0% {
                        opacity: 0;
                        background-color: var(--bc-keyframes-dss);
                    }
                    100% {
                        opacity: 1;
                        background-color: var(--bc-keyframes-dss-bg);
                    }
                }

@media screen and (width <= 48rem) {
    .animated {
            position: relative;
            inline-size: calc(100svw - 2rem);
            max-inline-size: 100%;

            & .welcome, & .logos, & .greetings, & .next {
                inline-size: calc(100% - 2rem);
                max-inline-size: 100%;
                align-self: center;
            }

            & .welcome {

                & .logos {
                    justify-content: space-between;
                    & .destined {
                        max-inline-size: 8rem;
                    }
                }

                & .greetings {
                    font-size: clamp(3.5rem, 3.5ch, 4rem);
                }

                 & .next {
                    font-size: clamp(1.5rem, 1.5ch, 2rem);
                 }
            }
        }
}