/* The Main Opening Logo */
:root {

    --font-base-lh : clamp(22px, 2.81vi + 10.77px, 95px);
    --font-base-fs : clamp(16px, 2.85vi + 4.62px, 90px);

    --font-base-lh: clamp(22px, 3.04vi + 3.75px, 95px);
    --font-base-fs: clamp(16px, 3.08vi + -2.5px, 90px);

    --font-credits : 400 clamp(10px, 0.67vi + 6px, 26px) / clamp(15px, 0.88vi + 9.75px, 36px) var(--f-family);
    --font-small   : 400 var(--font-base-fs) / var(--font-base-lh) var(--f-family);
    --font-large   : 400 clamp(22px, 4.35vi + 4.62px, 135px) / clamp(30px, 4.31vi + 12.77px, 142px) var(--f-family);

    font-size   : var(--font-base-fs);
    line-height : var(--font-base-lh);
}

body {
    font-size   : var(--font-base-fs);
    line-height : var(--font-base-lh);
}

/* The Big opening logo */
.motus-logo {
    padding : 0.75rlh 1rlh;
}

/* The Gallery Section */
.motus-images-container {
    display               : grid;
    padding               : 3rlh 1rlh;
    grid-template-columns : 1fr 1fr;
    gap                   : 2rlh 0;
}

.motus-image-container:nth-child(1) {
    justify-self : end;
    align-self   : end;
    z-index      : 2;
    transform    : translateX(15%) translateY(40%);
    max-width    : 45vw;
}

.motus-image-container:nth-child(2) {
    justify-self : start;
    align-self   : start;
    z-index      : 3;
    max-width    : 35vw;
}

.motus-image-container:nth-child(3) {
    grid-column  : span 2;
    justify-self : center;
    align-self   : start;
    z-index      : 1;
    max-width    : 40vw;
}

.motus-image {
    display       : block;
    width         : 100%;
    height        : auto;
    border-radius : 5px;
}

@media (prefers-color-scheme : light) {
    .motus-image {
        box-shadow : rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }
}

@media (width < 800px) {
    .motus-images-container { gap : 0; }
    .motus-image { border-radius : 2px }
    .motus-image-container:nth-child(1) { grid-row : 2; grid-column: 1 / -1; max-width : 80%; justify-self : start; transform : initial; }
    .motus-image-container:nth-child(2) { grid-row : 1; grid-column: 1 / -1; max-width : 75%; justify-self : end; transform : translateY(10%);}
    .motus-image-container:nth-child(3) { grid-row : 3; grid-column: 1 / -1; max-width : 70%; justify-self: center; transform : translateY(-10%);}
}

/* Intro Text */
.motus-intro-container,
.motus-text-container,
.motus-outro-container {
    padding     : 0 1rlh;
    text-indent : 0.75rlh;
}

.motus-intro-container {
    margin-bottom : 1.5rlh;
}

.motus-outro-container {
    margin-top    : 3rlh;
    margin-bottom : 1.5rlh;
}

/* The Main Content Container */
.motus-text-container {
    display               : grid;
    grid-template-columns : repeat(4,1fr);
    gap                   : 0.75rlh;
}

.motus-text-content {
    grid-column : 2 / -1;
}


.motus-intro-container,
.motus-outro-container {
    font : var(--font-large);
}

.motus-footer {
    padding               : 0 1rlh 1rlh;
    display               : grid;
    grid-template-columns : repeat(4,1fr);
    gap                   : 0.75rlh;
    grid-template-areas   : "logo content content content";
}

.motus-footer-content {
    grid-area       : content;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-between;
    grid-gap        : 0.75rlh;
}

.motus-footer-column-content {
    text-indent : 0.75rlh;
}

.motus-footer-column-content-extra {
    margin-top      : 3rlh;
    display         : flex;
    justify-content : space-between;
    align-items     : flex-end;
    font            : var(--font-credits);
    gap             : 0.5rlh;
    flex-wrap       : wrap;
}

.footer-logo-container {
    width     : 2.5rlh;
    grid-area : logo;
    align-self: end;
}


strong {
    font-weight : 700;
}


p:not(:last-child) {
    margin-bottom : 1rlh;
}

p a, .motus-footer-column-content-extra a {
    text-decoration            : none;
    background                 : linear-gradient(to right, var(--c-text) , var(--c-text));
    background-repeat          : no-repeat;
    background-position        : 100% 90%;
    background-size            : 100% 0.05em;
    transition-property        : background-size;
    transition-duration        : 300ms;
    transition-timing-function : ease-out;
}

:is(p,div) a:hover {
    background-size : 0% 0.05em;
}


/* Adjust the footer based on the screen of the container */
@media (width < 600px) {
    .motus-footer {
        grid-template-areas   : ". content content content" ". logo logo logo";
        grid-template-columns : 0.25fr 1fr 1fr 1fr;
    }
    .motus-footer-content,.motus-footer-column-content-extra {
        flex-direction : column;
        justify-content: flex-start;
        align-items : flex-start;
    }
    .footer-logo-container {
        width : 3rlh;
        margin-top : 2rlh;
    }
    .motus-text-container {
        grid-template-columns : 0.25fr 1fr 1fr 1fr;
    }
}

/* Gently animates the text blocks */
@keyframes TextBlockFadesIn {
    from { opacity : 0; }
    to   { opacity : 1; }
}
@keyframes TextBlockSlideIn {
    from { transform : translateY(10vh); }
    to   { transform : translateY(0);    }
}

:is(.motus-intro-container,.motus-text-container) p {
    animation-name        : TextBlockFadesIn, TextBlockSlideIn;
    animation-fill-mode   : forwards;
    animation-timeline    : view() , view();
    animation-range-start : contain, contain 0%; 
    animation-range-end   : contain, contain 50%; 
    opacity               : 0;
    transform             : translateY(10vh);
}


/* Animate the logo */
@keyframes slideTheLogoInFromTheTop {
    from {
        opacity   : 0;
        transform : translateY(-15%);
    }
    to {
        opacity   : 1;
        transform : translateY(0);
    }
}


/* Disable the overflow clipping of the SVG */
.motus-logo { overflow : unset; }

/* Add the animation on the <path> items  */
.motus-logo path {
    opacity   : 0;
    transform : translateY(-15%);
    animation : slideTheLogoInFromTheTop 1000ms forwards;
}

/* Set the delay */
.motus-logo path:nth-child(1) { animation-delay : 0ms }
.motus-logo path:nth-child(2) { animation-delay : 50ms }
.motus-logo path:nth-child(3) { animation-delay : 100ms }
.motus-logo path:nth-child(4) { animation-delay : 150ms }
.motus-logo path:nth-child(5) { animation-delay : 200ms }


/* Initial Slide In Transition */
@keyframes slideInTheImages { to {
    opacity   : 1;
    transform : translateY(0);
    filter    : grayscale(0);
}}

.motus-image {
    animation : slideInTheImages 1000ms forwards;
    opacity   : 0;
    filter    : grayscale(1);
}

/* Animate the images */
.motus-image-container:nth-child(1) .motus-image {
    transform       : translateX(-7%) scale(0.98);
    animation-delay : 300ms;
}
.motus-image-container:nth-child(2) .motus-image {
    transform       : translateX(7%) scale(0.98);
    animation-delay : 200ms;
}
.motus-image-container:nth-child(3) .motus-image {
    transform       : translateX(7%) scale(0.98);
    animation-delay : 400ms;
}