/* v2 adjustments: fixed card geometry, floating app-like shapes and a simple wordmark. */
.theme-toggle {
    position: absolute;
    z-index: 20;
    top: 28px;
    right: clamp(25px, 5vw, 70px);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: #0a81b9;
    background: rgb(255 255 255 / 58%);
    box-shadow: 0 7px 18px rgb(64 104 137 / 14%);
    cursor: pointer;
    font: inherit;
    font-size: 19px;
    line-height: 1;
    transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}

.theme-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgb(64 104 137 / 22%);
}

.theme-toggle .icon-sun {
    display: none;
}

.dark .theme-toggle {
    color: #f3c768;
    background: rgb(20 36 54 / 78%);
}

.dark .theme-toggle .icon-moon {
    display: none;
}

.dark .theme-toggle .icon-sun {
    display: inline;
}

.dark .moodboard {
    background: linear-gradient(125deg, #111b2c, #102b40 48%, #27274c);
    color: #f5f8fb;
}

.dark .tile {
    background: rgb(14 32 48 / 72%);
    border-color: rgb(184 220 238 / 20%);
    box-shadow: 0 20px 55px rgb(0 0 0 / 28%);
}

.dark .tile-label {
    text-shadow: 0 2px 12px #000;
}

.dark .tile-label small {
    color: #b9cfdd;
}

.dark .center {
    color: #f5f8fb;
}

.dark .shape {
    opacity: .72;
}

.shape {
    position: absolute;
    z-index: 1;
    --rotation: 20deg;
    width: 112px;
    height: 112px;
    border-radius: 15px;
    opacity: .56;
    transform: rotate(var(--rotation));
    box-shadow: 0 12px 24px rgb(55 86 112 / 14%);
    animation: none;
}

.shape-one {
    --rotation: -19deg;
    left: 20%;
    top: 12%;
    background: linear-gradient(135deg, #8fd4ee, #397fb7);
}

.shape-two {
    --rotation: 34deg;
    right: 21%;
    top: 31%;
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #b8b1fa, #6b62ce);
}

.shape-three {
    --rotation: 9deg;
    left: 29%;
    bottom: 12%;
    width: 66px;
    height: 66px;
    background: linear-gradient(135deg, #f0c0c9, #d980a1);
}

.shape-four {
    --rotation: -31deg;
    right: 12%;
    bottom: 10%;
    width: 110px;
    height: 110px;
    background: linear-gradient(135deg, #8bdfd0, #258795);
}

.shape-five {
    --rotation: 52deg;
    left: 47%;
    top: 12%;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #f2d58e, #e79c65);
}

.shape-six {
    --rotation: -43deg;
    left: 8%;
    bottom: 31%;
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg, #a8b8f1, #7a72d3);
}

.shape {
    animation: shape-float 8s ease-in-out infinite;
}

.shape-two {
    animation-delay: -1.3s;
}

.shape-three {
    animation-delay: -2.5s;
}

.shape-four {
    animation-delay: -3.7s;
}

.shape-five {
    animation-delay: -5s;
}

.shape-six {
    animation-delay: -6.2s;
}

@keyframes shape-float {
    0%, 100% {
        transform: translateY(0) rotate(var(--rotation));
    }
    50% {
        transform: translateY(-25px) rotate(calc(var(--rotation) + 18deg));
    }
}

.tile,
.tile-music,
.tile-photo,
.tile-area {
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s, box-shadow .45s;
}

.tile:hover img {
    transform: none;
}

.tile-music:hover {
    transform: rotate(-7deg) translateY(-12px) scale(1.04);
}

.tile-photo:hover {
    transform: rotate(7deg) translateY(-12px) scale(1.04);
}

.tile-area:hover {
    transform: translateX(-50%) rotate(-3deg) translateY(-12px) scale(1.04);
}

.center {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    color: #172638;
    font-size: 2.5rem;
    font-weight: 400;
}

.tile-label i {
    display: none;
}

@media (max-width: 760px) {
    .shape {
        width: 82px;
        height: 82px;
        border-radius: 13px;
        opacity: .72;
    }

    .shape-one {
        left: -24px;
        top: 20%;
    }

    .shape-two {
        right: -20px;
        top: 44%;
        width: 68px;
        height: 68px;
    }

    .shape-three {
        left: -18px;
        bottom: 19%;
        width: 62px;
        height: 62px;
    }

    .shape-four {
        right: -25px;
        bottom: 5%;
        width: 92px;
        height: 92px;
    }

    .shape-five {
        left: auto;
        right: 10%;
        top: 8%;
        width: 44px;
        height: 44px;
    }

    .shape-six {
        left: 20%;
        bottom: 31%;
        width: 52px;
        height: 52px;
    }

    .center {
        top: 5%;
        font-size: 22px;
    }

    .tile-music:hover {
        transform: rotate(-5deg) translateY(-7px) scale(1.02);
    }

    .tile-photo:hover {
        transform: rotate(5deg) translateY(-7px) scale(1.02);
    }

    .tile-area:hover {
        transform: translateX(-50%) rotate(-3deg) translateY(-7px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .tile {
        width: 84vw;
        height: 22vh;
        min-height: 160px;
    }

    .tile-music {
        left: 2%;
        top: 12%;
    }

    .tile-photo {
        right: 2%;
        top: 39%;
    }

    .tile-area {
        bottom: 7%;
    }

    .center {
        top: 5%;
    }
}

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