.home-main {
    display: grid;
    min-height: calc(100vh - 80px);
    place-items: center;
    overflow: hidden;
}

.home-content {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    width: min(90vw, 600px);
    text-align: center;
}

.home-quote {
    margin: 0;
    max-width: 100%;
    color: #f5f1e8;
    font-size: clamp(1.1rem, 3vw, 1.8rem);
    line-height: 1.35;
    text-wrap: balance;
}

.home-quote--plain {
    font-weight: 500;
}

.home-quote--italic {
    font-style: italic;
}

.home-quote--bold {
    font-weight: 800;
}

.home-quote--dramatic {
    color: #ffd166;
    font-family: Georgia, serif;
    font-size: clamp(1.35rem, 4vw, 2.2rem);
    font-weight: 700;
    text-shadow: 0 2px 12px rgb(0 0 0 / 70%);
}

.home-quote--whisper {
    color: #c9d5ff;
    font-size: clamp(1rem, 2.6vw, 1.45rem);
    font-style: italic;
    letter-spacing: 0.04em;
}

.home-quote--arcane {
    color: #b8a1ff;
    font-family: Georgia, serif;
    font-weight: 700;
    text-shadow: 0 0 12px rgb(128 83 255 / 65%);
}

.home-image-button {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.home-image-button:focus-visible {
    outline: 3px solid #254cff;
    outline-offset: 8px;
}

.home-image {
    display: block;
    width: min(70vw, 420px);
    max-height: 70vh;
    object-fit: contain;
    transform-origin: center;
    animation: home-image-sway 1s steps(1, end) infinite;
    user-select: none;
    -webkit-user-drag: none;
}

@keyframes home-image-sway {
    0% {
        transform: translateX(max(-12vw, -10px)) rotate(-10deg);
    }

    50% {
        transform: translateX(min(12vw, 10px)) rotate(10deg);
    }

    100% {
        transform: translateX(max(-12vw, -10px)) rotate(-10deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-image {
        animation: none;
    }
}