:root {
    --side: min(100vh, 100vw);
    --fade-duration: 0.8s;
    --fade-timing: cubic-bezier(0.4, 0.0, 0.2, 1);
}

html,
body {
    font-family: Helvetica, sans-serif;
    position: relative;
    font-size: 20px;
    background: white;
}

.lines-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 40px;
    bottom: 40px;
}

.lines-container div {
    opacity: 0;
    animation: fadeInRight 1s ease forwards 1.5s;
    transform: translateX(50px);
}

.lines-container div:nth-child(1) {
    animation-delay: 1s;
}

.lines-container div:nth-child(2) {
    animation-delay: 1.1s;
}

.lines-container div:nth-child(3) {
    animation-delay: 1.2s;
}

.lines-container div:nth-child(4) {
    animation-delay: 1.3s;
}

.blue-square {
    position: absolute;
    left: calc(0.16*var(--side));
    top: calc(0.16*var(--side));
    width: calc(0.04*var(--side));
    height: calc(0.04*var(--side));
    opacity: 0;
    animation: fadeInRight 1s ease forwards 0.5s;
    transform: translateX(50px);
}

.top-sel-text {
    position: absolute;
    left: calc(0.2*var(--side));
    top: 0;
    height: calc(0.16*var(--side));
    opacity: 0;
    animation: fadeInRight 1s ease forwards 0.6s;
    transform: translateX(50px);
}

.back-button {
    position: absolute;
    right: 0;
    top: 0;
    height: calc(0.18*var(--side));
    opacity: 0;
    animation: fadeInRight 1s ease forwards 3s;
    transform: translateX(50px);
    z-index: 10000;
}

.page-container {
    position: relative;
    width: calc(100% - 0.04*var(--side));
    min-height: calc(100vh - 0.04*var(--side));
}

.body-wrapper {
    position: relative;
    opacity: 0;
    animation: fadeInRight 1s ease forwards 1.75s;
    transform: translateX(50px);
}

.body-text {
    position: relative;
    padding-left: calc(0.22*var(--side));
    padding-top: calc(0.22*var(--side));
    line-height: 1.6;
    display: block;
}

.body-text a {
    white-space: nowrap
}

.body-text img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
    padding-right: 20px;
    padding-bottom: 20px;
    opacity: 0;
    animation: fadeInRight 1s ease forwards 1.75s;
    transform: translateX(50px);
}

.end {
    padding-top: 40px;
    padding-left: calc(0.22*var(--side));
    height: calc(0.02*var(--side));
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (min-aspect-ratio: 1/1) {
    .body-text {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
    }

    /* left column = image */
    .body-text img:first-of-type {
        width: 40%;
        max-width: 40%;
        margin: 0;
        flex-shrink: 0;
    }

    /* right column = all text stacked vertically */
    .body-text> :not(img:first-of-type) {
        flex: 1;
        display: block;
        flex-direction: column;
        gap: 1em;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Page transition styles */
.page-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--fade-duration) var(--fade-timing),
        transform var(--fade-duration) var(--fade-timing);
    will-change: opacity, transform;
}

.page-wrapper.fade-out {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

.page-wrapper.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: pageEnter var(--fade-duration) var(--fade-timing) forwards;
}

@keyframes pageEnter {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Overlay for smooth transition */
.transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 999;
    transition: opacity 0.3s ease;
}

.transition-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/*.image-container {
animation: wobble 15s ease-in-out infinite 2s;
}*/

.diagonal-img {
    position: fixed;
    bottom: calc(0.25 * var(--side));
    right: max(0.5 * var(--side), calc(0.5 * var(--side) + 100vw - 200vh));
    height: calc(1.5 * var(--side));
    width: auto;
    animation: move-diagonal 12s linear infinite;
    animation-delay: var(--delay, 0s);
    opacity: 0;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.1, 0.6, 0.7, 0.3);
    filter: blur(5px);
}

.first-img {
    position: fixed;
    bottom: calc(0.25 * var(--side));
    right: max(0.5 * var(--side), calc(0.5 * var(--side) + 100vw - 200vh));
    height: calc(1.5 * var(--side));
    width: auto;
    animation: move-diagonal 6s linear;
    animation-delay: var(--delay, 0s);
    opacity: 0;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.7, 0.3);
    filter: blur(5px);
}

.title-container {
    position: absolute;
    top: max(10vh, 10vw);
    left: calc(0.1 * var(--side));
    display: flex;
    flex-direction: column;
}

.svg-title-top {
    align-self: flex-start;
    height: max(5vh, 5vw);
    opacity: 0;
    animation: fadeInRight 1.5s ease forwards, wobble 12s ease-in-out infinite 1.5s;
    transform: translateX(50px);
}

.svg-title-bottom {
    align-self: flex-start;
    height: max(5vh, 5vw);
    opacity: 0;
    animation: fadeInRight 1.5s ease forwards 0.1s, wobble 12s ease-in-out infinite 1.6s;
    transform: translateX(50px);
}

.selector-container {
    display: flex;
    position: relative;
    margin-left: auto;
    flex-direction: column;
    height: auto;
    width: calc(0.4*var(--side));
    z-index: 999;
    animation: wobble 15s ease-in-out infinite 1s;
    -webkit-tap-highlight-color: transparent;
}

.selector-subcontainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.selector,
.selector-text {
    opacity: 0;
    animation: fadeInRight 1.5s ease forwards;
    transform: translateX(50px);
    cursor: pointer;
    /* starting offset */
}

.selector:nth-child(1) {
    animation-delay: 0.5s;
}

.selector:nth-child(2) {
    animation-delay: 0.75s;
}

.selector:nth-child(3) {
    animation-delay: 1s;
}

.selector-text:nth-child(1) {
    animation-delay: 0.75s;
}

.selector-text:nth-child(2) {
    animation-delay: 1s;
}

.selector-text:nth-child(3) {
    animation-delay: 1.25s;
}

/* Inner wrappers handle hover interactions */
.selector-inner,
.selector-text-inner {
    transform: translateX(0);
    transition: transform 1s ease, filter 0.5s ease;
    transform-origin: left center;
}

/* Hover scaling applied to inner elements */
.selector.hover-scale .selector-inner,
.selector-text.hover-scale .selector-text-inner {
    transform: translateX(min(2.5vw, 2.5vh));
    filter: opacity(0.6);
    z-index: 10000;
}

/* Images still responsive */
.selector-inner img,
.selector-text-inner img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 12.5vh;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes move-first {
    0% {
        opacity: 1;
    }

    100% {
        transform: translate(calc(1.5 * var(--side)),
                calc(-1.5 * var(--side)));
        opacity: 1;
    }
}


@keyframes move-diagonal {
    0% {
        transform: translate(calc(-1.5* var(--side)),
                calc(1.5 * var(--side)));
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(calc(1.5 * var(--side)),
                calc(-1.5 * var(--side)));
        opacity: 1;
    }
}

@keyframes wobble {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-1.5px, -1px);
    }

    20% {
        transform: translate(1px, 1.5px);
    }

    30% {
        transform: translate(-1px, 1px);
    }

    40% {
        transform: translate(1.5px, -1px);
    }

    50% {
        transform: translate(-1px, -1.5px);
    }

    60% {
        transform: translate(1px, 1px);
    }

    70% {
        transform: translate(-1.5px, 0px);
    }

    80% {
        transform: translate(1.5px, 1px);
    }

    90% {
        transform: translate(-1px, -1px);
    }
}