.homepage {
    --size: 16px;
    --gap: var(--size);
    font-size: var(--size);
    gap: 6em;
    padding: 6em;
}

.homepage p {
    line-height: 1.7;
}
    
.homepage h1 {
    font-size: 1.75em;
}
    
.homepage h2 {
    font-size: 1.5em;
}

.homepage h1, .homepage h2 {
    margin-bottom: 0;
}

.homepage div, .homepage .flex {
    gap: var(--gap);
    max-width: 100%;
    flex-wrap: wrap;
}

.homepage .text-block {
    color: var(--c-text-secondary);
}

.homepage .text-block {
    width: 40em;
    max-width: 100%;
}

.homepage .text-small {
    font-size: 0.75em;
}

.homepage .text-smallest {
    font-size: 0.625em;
}

.homepage .btn-cta, .homepage .btn-outlined {
    padding: 0 var(--size);
    font-size: calc(var(--size) * 0.875);
    height: calc(var(--size) * 2.5);
    --gap: 0.5em;
}

.homepage .btn-outlined i, .homepage .btn-link i {
    height: calc(var(--size) * 1.25);
    font-size: calc(var(--size) * 1.25);
}

.homepage .btn-small {
    height: calc(var(--size) * 1.875);
}

.homepage .text-gradient {
    background-image: linear-gradient(to right,
        var(--c-call-to-action) 0%,
        var(--c-call-to-action) 25%,
        var(--c-primary) 50%,
        var(--c-call-to-action) 75%,
        var(--c-call-to-action) 100%
    );
    
    background-size: 200% 100%;
    background-repeat: repeat-x;
    
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    
    animation: scroll-background 5s linear infinite;
}

@keyframes scroll-background {
    from {
        background-position: 0% 0;
    }
    
    to {
        background-position: -200% 0;
    }
}

.homepage .hero {
    padding-top: 7em;
    padding-bottom: 7em;
}

.homepage .hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    z-index: -1;
    width: 60vw;
    min-width: 60em;
    opacity: 0.5;
}

.homepage .hero-logo {
    right: 0;
    z-index: 0;
    width: 35%;
}

.homepage .hero-logo img {
    right: -5%;
    width: 18em;
    animation: scale-logo 3s ease-in-out infinite;
}

@keyframes scale-logo {
    0% {
        transform: scale(1);
    }
    
    50% {
        transform: scale(1.035);
    }
    
    100% {
        transform: scale(1);
    }
}

.homepage .hero p {
    max-width: 36em;
}

.homepage .hero .controls {
}

.homepage .hero .controls, .homepage .hero .controls div {
    --gap: 0.5em;
}

.homepage .features .box {
    width: 21em;
    padding: 1em;
    max-width: 100%;
    --gap: 0;
}

.homepage .features .box p {
    font-size: 0.875em;
    max-width: 22em;
}

.homepage .features .box .text-large {
    font-size: 1.2em;
}

.homepage .features .ph {
    font-size: 4em;
    height: calc(var(--size) * 8);
    will-change: transform;
}


.homepage .features .ph-export {
    /*animation: bounce-scale 1.2s linear infinite;*/
}

.homepage .features .ph-game-controller {
    animation: bob 2.6s ease-in-out infinite;
}

.homepage .features .ph-bell {
    transform-origin: top center;
    animation: bell-shake 2s ease-in-out infinite both;
    transform-origin: 50% 50%;
    --shake: 15deg;
}

@keyframes bounce-scale {
    0% {
        transform: scale(1);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    22% {
        transform: scale(1.12);
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }
    40% {
        transform: scale(0.985);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    58% {
        transform: scale(1.04);
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }
    72% {
        transform: scale(1);
        animation-timing-function: linear;
    }
    100% {
        transform: scale(1);
    }
}

@keyframes bob {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(calc(var(--size) * 0.3));
    }
}

@keyframes bell-shake {
    0% {
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1); /* center -> extreme: ease-out */
    }
    12% {
        transform: rotate(calc(var(--shake) * -1));
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1); /* extreme -> center: ease-in */
    }
    20% {
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1); /* center -> extreme: ease-out */
    }
    32% {
        transform: rotate(var(--shake));
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1); /* extreme -> center: ease-in */
    }
    40% {
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1); /* first ring done; start smaller second */
    }
    52% {
        transform: rotate(calc(var(--shake) * -0.5));
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }
    60% {
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    72% {
        transform: rotate(calc(var(--shake) * 0.5));
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }
    84% {
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1); /* gentle decel into loop */
    }
    100% {
        transform: rotate(0deg);
    }
}

.homepage .testimonial {
    cursor: pointer;
    user-select: none;
}

.homepage .testimonial::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--border-color);
    pointer-events: none;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    transition: .15s ease-in-out;
}

.homepage .testimonial .ph-caret-up {
    font-size: 1.5em;
    color: var(--border-color);
    transition: .15s ease-in-out;
    position: absolute;
    top: 0;
    right: 0;
    transform: rotate(0deg);
}

.homepage .testimonial:hover::after {
    border: 2px solid var(--c-primary-accent);
}

.homepage .testimonial:hover .ph-caret-up {
    color: var(--c-primary-accent);
}

.homepage .testimonial .name {
    font-size: 0.875em;
}

.homepage .testimonial img {
    width: 3em;
    height: 3em;
    object-fit: contain;
}

.homepage .testimonials > div {
    width: 40em;
    max-width: 100%;
    padding-top: 1em;
}

.homepage .testimonial .rich-text p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    margin-bottom: 0;
    overflow: hidden;
    font-size: 0.875em;
}

.homepage .testimonial.expanded .rich-text p {
    display: block;
}

.homepage .testimonial.expanded .ph-caret-up {
    transform: rotate(-180deg);
}

.homepage .forum-topic {
    color: inherit;
    padding: 1em;
}

.homepage .forum-topic, .forum-topic div {
    /* all children inherit this gap */
    --gap: calc(var(--size) / 2);
    
    gap: calc(var(--gap) * 1.5);
}

.homepage .forum-topic p {
    font-weight: 400;
    line-height: 1;
}

.homepage .forum-topic .avatar {
    width: 1.5em;
    height: 1.5em;
}

.homepage .forum-topic .date {
    opacity: 0.75;
    /*margin-left: auto;*/
}

.homepage .forum-topic:hover {
    background-color: var(--c-hover);
}

.homepage .forum-topics {
    max-width: 100%;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.homepage .forum-topics + .read-more .ph-caret-right {
    width: calc(var(--size) * 0.75);
    font-size: 1.125em;
}

@media screen and (max-width: 1400px) {
    .homepage {
        padding: 3em;
    }
    
    .homepage .hero-logo {
        display: none;
    }
}

@media screen and (max-width: 900px) {
    .homepage {
        --size: 2vw;
        padding: 2em;
    }

    .homepage h1, .homepage h2, .homepage h3, .homepage h4, .homepage h5, .homepage h6 {
        white-space: pre-wrap;
        line-height: 1.5;
    }
    
    .homepage .features .box {
        font-size: 0.9em;
    }
}

@media screen and (max-width: 700px) {
    .homepage {
        --size: 2.5vw;
        padding: 1em;
    }
    
    .homepage .features .box {
        font-size: 1.2em;
        width: 100%;
    }

    .homepage .forum-topics {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 500px) {
    .homepage {
        --size: 3vw;
    }
    
    .homepage .features .box {
        font-size: 1.2em;
        width: 100%;
    }
}