/* ===================================
    Homepage hero (GitLab #41)

    Static replacement for the Revolution Slider that used to sit on the
    storypunks.de homepage. Positions follow the slider's layer offsets in
    percent of the hero box; the three breakpoints are the slider's
    responsive levels (1240, 778, 480). Only transform, opacity and filter
    are animated, so nothing shifts the layout.
====================================== */

.hero {
    --hero-scale: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 16px 90px;
    overflow: hidden;
}

.hero__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero__item {
    position: absolute;
    display: block;
    animation: hero-fade-in 1.5s cubic-bezier(0.77, 0, 0.18, 1) 0.05s both;
}

.hero__decor img {
    display: block;
    width: calc(var(--hero-width) * var(--hero-scale));
    height: calc(var(--hero-height) * var(--hero-scale));
    max-width: none;
    object-fit: contain;
}

/* --- decoration: size, position and loop of every item --- */

.hero__item--mohawk {
    --hero-width: 672px;
    --hero-height: 673px;
    top: 7%;
    left: calc(50% - 336px * var(--hero-scale));
    animation-delay: 0.32s;
}

.hero__item--mohawk img {
    animation: hero-orbit-small 15s linear infinite;
}

.hero__item--d10 {
    --hero-width: 575px;
    --hero-height: 571px;
    top: -20.5%;
    left: 88.9%;
    animation-delay: 0.32s;
}

.hero__item--d10 img {
    animation: hero-spin 150s linear infinite;
}

.hero__item--d20-large {
    --hero-width: 97px;
    --hero-height: 98px;
    top: 7.7%;
    left: 10.5%;
}

.hero__item--d20-large img {
    --hero-from: -90px, 0;
    --hero-to: 90px, 20px;
    animation: hero-drift 30s ease-in-out infinite alternate;
}

.hero__item--d4 {
    --hero-width: 67px;
    --hero-height: 69px;
    top: 26.9%;
    left: 24.1%;
}

.hero__item--d4 img {
    animation: hero-spin 15s linear infinite;
}

.hero__item--d100 {
    --hero-width: 51px;
    --hero-height: 52px;
    top: 22.6%;
    left: 48.2%;
}

.hero__item--d100 img {
    --hero-from: 0, 0;
    --hero-to: 60px, -40px;
    animation: hero-drift 12s ease-in-out infinite alternate;
}

.hero__item--d20-small {
    --hero-width: 14px;
    --hero-height: 14px;
    top: 24%;
    left: 79.3%;
}

.hero__item--d20-small img {
    --hero-from: 0, 0;
    --hero-to: -50px, -30px;
    animation: hero-drift 12s ease-in-out infinite alternate;
}

.hero__item--d8-top {
    --hero-width: 44px;
    --hero-height: 87px;
    top: 5.3%;
    left: 77.3%;
}

.hero__item--d8-top img {
    animation: hero-orbit-small 12s linear infinite;
}

.hero__item--d8-bottom {
    --hero-width: 44px;
    --hero-height: 87px;
    top: 64.8%;
    left: 13.2%;
}

.hero__item--d8-bottom img {
    --hero-from: 0, -40px;
    --hero-to: 20px, 40px;
    animation: hero-drift 12s ease-in-out infinite alternate;
}

/* --- social links: the slider's floating circles --- */

.hero__social {
    position: static;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero__social .hero__item {
    z-index: 3;
}

.hero__social .animated-element {
    display: flex;
}

.hero__item--facebook {
    top: 52%;
    left: 2%;
}

.hero__item--facebook .animated-element {
    --hero-from: 0, 0;
    --hero-to: 0, 70px;
    animation: hero-drift 12s ease-in-out infinite alternate;
}

.hero__item--instagram {
    top: 73.4%;
    left: 27.9%;
}

.hero__item--instagram .animated-element {
    animation: hero-orbit 12s linear infinite reverse;
}

.hero__item--tiktok {
    top: 69.6%;
    left: 66.1%;
}

.hero__item--tiktok .animated-element {
    animation: hero-orbit 12s linear infinite;
}

.hero__item--mastodon {
    top: 63.4%;
    left: 91.7%;
}

.hero__item--mastodon .animated-element {
    animation: hero-orbit 19s linear infinite;
}

/* --- text --- */

.hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 650px;
    text-align: center;
}

.hero__title {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 60px;
    line-height: 1.25;
    letter-spacing: 0;
}

.hero__headline {
    display: block;
    font-weight: 300;
    animation: hero-blur-in 1.48s cubic-bezier(0.77, 0, 0.18, 1) 0.1s both;
}

.hero__words {
    display: block;
    font-weight: 700;
    animation: hero-zoom-in 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.15s both;
}

.hero__rotator {
    display: inline-grid;
    perspective: 400px;
}

.hero__word {
    grid-area: 1 / 1;
    opacity: 0;
    transform: rotateX(90deg);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.hero__word.is-active {
    opacity: 1;
    transform: none;
}

.hero__text {
    max-width: 630px;
    margin: 37px auto 0;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0;
    animation: hero-fade-in 1.48s cubic-bezier(0.77, 0, 0.18, 1) 0.1s both;
}

.hero__action {
    margin: 41px 0 0;
    animation: hero-rise-in 1s cubic-bezier(0.77, 0, 0.18, 1) 0.8s both;
}

.hero__cta.btn-setting {
    border-width: 2px;
}

/* --- keyframes --- */

@keyframes hero-fade-in {
    from {
        opacity: 0;
    }
}

@keyframes hero-blur-in {
    from {
        opacity: 0;
        filter: blur(20px);
        transform: translateY(50px);
    }
}

@keyframes hero-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
}

@keyframes hero-rise-in {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
}

@keyframes hero-drift {
    from {
        transform: translate(var(--hero-from));
    }

    to {
        transform: translate(var(--hero-to));
    }
}

@keyframes hero-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes hero-orbit {
    from {
        transform: rotate(0deg) translateX(22px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(22px) rotate(-360deg);
    }
}

@keyframes hero-orbit-small {
    from {
        transform: rotate(0deg) translateX(12px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(12px) rotate(-360deg);
    }
}

/* --- responsive levels of the former slider --- */

@media screen and (max-width: 1239px) {
    .hero {
        --hero-scale: 0.83;
    }

    .hero__title {
        font-size: 50px;
    }

    .hero__text {
        font-size: 15px;
    }
}

@media screen and (max-width: 778px) {
    .hero__item--mohawk,
    .hero__item--d10,
    .hero__item--d20-large {
        display: none;
    }

    .hero {
        --hero-scale: 1;
    }

    .hero__title {
        font-size: 40px;
    }

    .hero {
        padding-bottom: 120px;
    }

    .hero__text {
        max-width: 540px;
        margin-top: 24px;
    }

    .hero__action {
        margin-top: 30px;
    }

    .hero__item--d100 {
        top: 19.8%;
        left: 46.6%;
    }

    .hero__item--d20-small {
        top: 20.2%;
        left: 90%;
    }

    .hero__item--d4 {
        top: 24.4%;
        left: 9.9%;
    }

    .hero__item--d8-top {
        top: 9.7%;
        left: 83.7%;
    }

    .hero__item--d8-bottom {
        top: 73.9%;
        left: 3.3%;
    }

    .hero__item--facebook {
        top: 55.8%;
        left: 0;
    }

    .hero__item--instagram {
        top: 58.5%;
        left: 9.1%;
    }

    .hero__item--tiktok {
        top: 66.8%;
        left: 75.7%;
    }

    .hero__item--mastodon {
        top: 55.7%;
        left: 83.1%;
    }
}

@media screen and (max-width: 480px) {
    .hero {
        --hero-scale: 0.81;
        padding-bottom: 80px;
    }

    .hero__title {
        font-size: clamp(28px, 8.5vw, 40px);
    }

    .hero__text {
        font-size: 14px;
        line-height: 22px;
    }

    .hero__item--d100 {
        top: 21%;
        left: 44.6%;
    }

    .hero__item--d20-small {
        top: 21%;
        left: 83.8%;
    }

    .hero__item--d4 {
        top: 21.5%;
        left: 4.4%;
    }

    .hero__item--d8-top {
        top: 11%;
        left: 73.3%;
    }

    .hero__item--d8-bottom {
        top: 84%;
        left: 5.4%;
    }

    .hero__item--facebook {
        top: 68%;
    }

    .hero__item--instagram {
        top: 72.5%;
        left: 18.7%;
    }

    .hero__item--tiktok {
        top: 77%;
        left: 64.6%;
    }

    .hero__item--mastodon {
        top: 69.5%;
        left: 82.6%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero *,
    .hero *::before,
    .hero *::after {
        animation: none !important;
        transition: none !important;
    }
}