@keyframes selected {
    0% {
        transform: scale(1.2) rotate(-7deg);
    }

    50% {
        transform: scale(1.1) rotate(7deg);
    }
}

@keyframes jiggle {
    20% {
        transform: rotate(15deg) scale(0.87);
    }

    40% {
        transform: rotate(-11deg) scale(1.04);
    }

    60% {
        transform: rotate(4deg) scale(0.9);
    }

    80% {
        transform: rotate(-6deg) scale(1.1);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}

body {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    font-family: 'Oswald', sans-serif;
    margin: 0;
    padding: 0;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100vw;
    min-height: 400px;
    height: 60vh;
    max-height: 90vh;
    margin: 0;
    padding: 0;
    top: -40vh;
    z-index: 1000;
    user-select: none;
}

#intro-overlay {
    position: fixed;
    z-index: 9999;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.7s;
    min-width: 320px;
    min-height: 320px;
}

#intro-timeline-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 320px;
    min-height: 320px;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#timeline {
    position: relative;
    aspect-ratio: 1/1;
    width: clamp(320px, 60vw, 600px);
    height: clamp(320px, 60vw, 600px);
    min-width: 250px;
    min-height: 250px;
    max-width: 90vw;
    max-height: 90vw;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: spin 8s linear infinite;
    background: none;
}

#timeline-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

.article_container {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 120px auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 100%;
    height: fit-content;
    padding: 0 50px 50px 50px;
    top: 30%;
    z-index: 900;
}

#title {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 0 0;
    border-bottom: 7px solid #000;
}

#title_text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    color: #e71d36;
    text-align: left;
    font-size: 4.5em;
    height: 100%;
    width: 100%;
}

.block {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px;
}

#block1 img {
    animation: jiggle 1.3s steps(1) normal both;
}

.block h2 {
    margin: 0;
    padding: 0;
    color: #e71d36;
    font-size: 2em;
}

.block p {
    margin: 0;
    padding: 0;
    color: #000000;
    font-size: 1.2em;
}

.block h3 {
    margin: 0;
    padding: 0;
    color: #e71d36;
    font-size: 1.5em;
}

.block img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

#block1 {
    grid-area: 2 / 1 / 3 / 2;
}

#block2 {
    grid-area: 2 / 2 / 3 / 3;
}

#block3 {
    grid-area: 2 / 3 / 3 / 4;
}

#block4 {
    grid-area: 2 / 4 / 3 / 5;
}

.work {
    color: #000 !important;
    border: none !important;
    border-bottom: 7px solid #e71d36 !important;
}

.tick {
    position: absolute;
    --tick-length: 50px;
    /* Default, can be overridden by JS */
    --tick-width: 3px;
    position: absolute;
    width: var(--tick-length);
    height: var(--tick-width);
    background: repeating-linear-gradient(to right,
            #000,
            /* start color */
            #000 3px,
            transparent 3px,
            transparent 6px);
    transform-origin: left center;
    border-radius: 2px;
}

.tick-image-container.selected {
    display: none !important;
}

.tick-image-container.selected .tick-image {
    display: none !important;
}

.tick-image {
    position: absolute;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;

}

.tick-image-container {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    --tick-image: 80px;
    top: calc(50% - var(--tick-image) / 2);
    left: calc(50% - var(--tick-image) / 2);
    width: var(--tick-image);
    height: var(--tick-image);
    transform-origin: center center;
    transition: all .25ms ease-in-out;
}

.tick-image:hover {
    transform: scale(1.2);
    animation: selected 0.7s steps(1) infinite;
    transition: transform 0.2s cubic-bezier(0.77, 0, 0.175, 1);
}

#start-btn {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    position: absolute;
    padding: 18px 50px;
    font-size: 3rem;
    background: none;
    border: none;
    transition: background 0.2s;
}

#start-btn:hover {
    color: #606060;
}

#intro-overlay .tick-image,
#intro-overlay .tick-image-container {
    pointer-events: none !important;
    cursor: default !important;
    transition: none !important;
    animation: none !important;
}

#intro-overlay .tick-image:hover {
    transform: none !important;
    animation: none !important;
}