body:has(> main > div:only-child > section:only-child) > header ~ main {    
    height: 0;
	backdrop-filter: unset;
	-webkit-backdrop-filter: unset;
    background-color: transparent;
}

body:has(> main > div:only-child > section:only-child) > header {
    height: 100%;
    background-color: var(--contrastColor);
    box-shadow: unset;
}

body:has(> main > div:only-child > section:only-child) > header:before {
    background:
        radial-gradient(
            ellipse 70% 48% at 50% 38%,
            rgba(255, 255, 255, .14) 0%,
            rgba(255, 255, 255, .06) 42%,
            rgba(255, 255, 255, 0) 78%
        );
}

body:has(> main > div:only-child > section:only-child) > header:after {
    min-height: 350px;
    max-height: 50%;
    background:
        radial-gradient(
            ellipse 135% 115% at 50% -18%,
            rgba(0, 0, 0, 1) 0%,
            rgba(40, 40, 40, .96) 30%,
            rgba(125, 125, 125, .78) 55%,
            rgba(220, 220, 220, .48) 73%,
            oklch(from var(--contrastColor) l c h / 0) 100%
        );
}

body:has(> main > div:only-child > section:only-child) > header > section > div:first-child {
    line-height: 1;
}

body:has(> main > div:only-child > section:only-child) > header > section > div:first-child a {
    outline-color: transparent;
    pointer-events: none;
}

body:has(> main > div:only-child > section:only-child) > header > section > div:first-child img {    
    width: 15%;
}

body:has(> main > div:only-child > section:only-child) > header > section > div:first-child > p {
    display: none;
}

body:has(> main > div:only-child > section:only-child) > header > section > div:first-child a > span:has(+ img) {
    color: rgba(255, 255, 255, 1.00);
    text-shadow: 2px 1px 2px #000;
    font-size: calc(75vw / 20); /* 20 characters */
    letter-spacing: calc(var(--smallSpacing) * 2);
    transform: scale(1);
}

body:has(> main > div:only-child > section:only-child) > header > section > div:nth-child(2) {
    top: 25%;
}

body:has(> main > div:only-child > section:only-child) > header > section > div:nth-child(2) > div {
    transform: none;
    opacity: 1;
}


body:has(> main > div:only-child > section:only-child) > header > section > div:nth-child(2) > div > div:nth-child(2) {
    padding-top: 10%;
    transition-delay: 250ms;
}

/* On initial page load, if homepage; load image animations */
body:has(> main > div:only-child > section:only-child) > header.homeAnimation {
    --totalAnimationDuration: 6000ms;
}

body:has(> main > div:only-child > section:only-child) > header.homeAnimation:before {
    opacity: 0;
    transform: scaleX(.65);
    transform-origin: center;
    filter: blur(16px);
    will-change: opacity, transform, filter;
    animation: homeAmbientReveal 1800ms cubic-bezier(.16, 1, .3, 1) 500ms forwards;
}

body:has(> main > div:only-child > section:only-child) > header.homeAnimation:after {
    opacity: 0;
    transform: scaleY(.12);
    transform-origin: top;
    filter: blur(18px);
    will-change: opacity, transform, filter;
    animation: homeBackdropReveal 2200ms cubic-bezier(.16, 1, .3, 1) 250ms forwards;
}

body:has(> main > div:only-child > section:only-child) > header.homeAnimation > section > div:first-child {
    --startingScale: 8;

    transform: scale(var(--startingScale));
    opacity: 0;
    will-change: opacity, transform;
    animation:
        fadeIn 1100ms ease-out forwards,
        scaleIn 1900ms cubic-bezier(.16, 1, .3, 1) forwards;
}

body:has(> main > div:only-child > section:only-child) > header.homeAnimation > section > div:first-child a > span:has(+ img),
body:has(> main > div:only-child > section:only-child) > header.homeAnimation > section > div:nth-child(2) > div > div img {
    opacity: 0;
    animation: fadeIn 1200ms ease-out 1200ms forwards;
}

/* Stone (yellow, blue & pink) images */
body:has(> main > div:only-child > section:only-child) > header.homeAnimation > section > div:nth-child(2) > div > div img {
    transform: translateY(18px) scale(.96);
    will-change: opacity, transform;
    animation: homeStoneReveal 1900ms cubic-bezier(.16, 1, .3, 1) 1600ms forwards;
}

/* Blue stone's image */
body:has(> main > div:only-child > section:only-child) > header.homeAnimation > section > div:nth-child(2) > div > div:nth-child(2) img {
    animation-delay: 1200ms;
}

/* Shadows */
body:has(> main > div:only-child > section:only-child) > header.homeAnimation .headerStone_dropShadow,
body:has(> main > div:only-child > section:only-child) > header.homeAnimation .headerStone_reflectedShadow {
    opacity: 0;
    animation: fadeIn 1700ms ease-out 2350ms forwards;
}

/* Blue stone's shadows */
body:has(> main > div:only-child > section:only-child) > header.homeAnimation > section > div:nth-child(2) > div > div:nth-child(2) .headerStone_dropShadow,
body:has(> main > div:only-child > section:only-child) > header.homeAnimation > section > div:nth-child(2) > div > div:nth-child(2) .headerStone_reflectedShadow {
    animation-delay: 1900ms;
}
@keyframes homeBackdropReveal {

    0% {
        opacity: 0;
        transform: scaleY(.12);
        filter: blur(18px);
    }

    45% {
        opacity: .72;
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
        filter: blur(0);
    }

}

@keyframes homeAmbientReveal {

    from {
        opacity: 0;
        transform: scaleX(.65);
        filter: blur(16px);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
        filter: blur(0);
    }

}

@keyframes homeStoneReveal {

    from {
        opacity: 0;
        transform: translateY(18px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

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

    body:has(> main > div:only-child > section:only-child) > header.homeAnimation:before,
    body:has(> main > div:only-child > section:only-child) > header.homeAnimation:after,
    body:has(> main > div:only-child > section:only-child) > header.homeAnimation > section > div:first-child,
    body:has(> main > div:only-child > section:only-child) > header.homeAnimation > section > div:first-child a > span:has(+ img),
    body:has(> main > div:only-child > section:only-child) > header.homeAnimation > section > div:nth-child(2) > div > div img,
    body:has(> main > div:only-child > section:only-child) > header.homeAnimation .headerStone_dropShadow,
    body:has(> main > div:only-child > section:only-child) > header.homeAnimation .headerStone_reflectedShadow {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
    }
}