/* ======================================== */
/* category tiles                           */
/* ======================================== */

.categories {
    position: relative;
    padding: 18px 0 34px;
    isolation: isolate;
}

.categories::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 50%;
    z-index: -1;

    width: min(760px, 92%);
    height: 250px;

    transform: translateX(-50%);

    background:
        radial-gradient(circle at 50% 50%, rgba(31, 93, 85, 0.16), transparent 68%);

    filter: blur(12px);
    pointer-events: none;
}

.tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.tile {
    position: relative;
    display: block;
    overflow: hidden;

    min-height: 225px;
    border-radius: 24px;

    text-decoration: none;
    isolation: isolate;

    background: #10251f;

    box-shadow:
        0 22px 44px rgba(0, 0, 0, 0.12),
        0 7px 18px rgba(0, 0, 0, 0.08);

    transform: translateY(0);
    transition:
        transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-radius 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;

    border-radius: inherit;
    padding: 1px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.52),
            rgba(255, 255, 255, 0.08) 34%,
            rgba(126, 231, 212, 0.28) 66%,
            rgba(255, 255, 255, 0.18)
        );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    
        -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0.72;
    pointer-events: none;
}

.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        radial-gradient(circle at 82% 42%, rgba(126, 231, 212, 0.16), transparent 32%),
        linear-gradient(
            90deg,
            rgba(6, 18, 16, 0.18) 0%,
            rgba(6, 18, 16, 0.38) 42%,
            rgba(6, 18, 16, 0.78) 100%
        );

    pointer-events: none;

    transition:
        opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tile img {
    display: block;

    width: 100%;
    height: 225px;

    object-fit: cover;

    object-position: 68% center;

    filter:
        brightness(0.76)
        saturate(1.06)
        contrast(1.04);

    transform: scale(1.04);

    transition:
        transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        object-position 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tile-label {
    position: absolute;
    inset: 0;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    color: #ffffff;
    font-size: clamp(24px, 2.15vw, 34px);
    font-weight: 950;
    line-height: 1.2;
    text-align: center;

    letter-spacing: -0.5px;

    text-shadow:
        0 12px 28px rgba(0, 0, 0, 0.48),
        0 2px 0 rgba(255, 255, 255, 0.05);

    transform: translateY(0) scale(1);
    transition:
        transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        letter-spacing 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        text-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tile-label::after {
    content: "";
    position: absolute;
    bottom: 48px;
    left: 50%;

    width: 0;
    height: 3px;

    transform: translateX(-50%);

    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #ffffff, #7ee7d4, transparent);

    box-shadow: 0 0 18px rgba(126, 231, 212, 0.58);

    opacity: 0;

    transition:
        width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tile .tile-label::before {
    content: "";
    position: absolute;
    top: -90%;
    right: -90%;
    z-index: -1;

    width: 70%;
    height: 220%;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.18) 48%,
            transparent 100%
        );

    transform: rotate(18deg) translateX(0);
    opacity: 0;

    transition:
        opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tile:hover {
    transform: translateY(-8px);
    border-radius: 28px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.12),
        0 0 0 6px rgba(31, 93, 85, 0.08);
}

.tile:hover::before {
    opacity: 1;
}

.tile:hover::after {
    background:
        radial-gradient(circle at 78% 42%, rgba(126, 231, 212, 0.24), transparent 34%),
        linear-gradient(
            90deg,
            rgba(6, 18, 16, 0.10) 0%,
            rgba(6, 18, 16, 0.26) 40%,
            rgba(6, 18, 16, 0.72) 100%
        );
}

.tile:hover img {
    object-position: 74% center;

    transform: scale(1.12);
    filter:
        brightness(0.84)
        saturate(1.16)
        contrast(1.08);
}

.tile:hover .tile-label {
    transform: translateY(-4px) scale(1.04);
    letter-spacing: 0.2px;

    text-shadow:
        0 16px 34px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(126, 231, 212, 0.22);
}

.tile:hover .tile-label::after {
    width: 74px;
    opacity: 1;
}

.tile:hover .tile-label::before {
    opacity: 1;
    transform: rotate(18deg) translateX(-220%);
}

.tile:active {
    transform: translateY(-4px) scale(0.992);
}

.tile:focus-visible {
    outline: none;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.18),
        0 0 0 5px rgba(126, 231, 212, 0.36);
}