/* Each artwork and its controls share one scaled coordinate space. */
.statinger-category-select[hidden],
html[data-statinger-maintenance] .statinger-category-select {
    display: none !important;
}

.statinger-category-select {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.9s ease, visibility 0.9s ease;
}

.statinger-category-select.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

html[data-statinger-view="category"] .statinger-home-intro {
    display: none !important;
}

.statinger-category-select__art {
    position: relative;
    --statinger-category-label-size: min(0.61vw, 1.084dvh);
    width: min(100vw, 177.6833dvh);
    aspect-ratio: 1672 / 941;
    flex: none;
}

@media (hover: hover) and (pointer: fine) {
    .statinger-category-select__art {
        --statinger-category-label-size: min(0.732vw, 1.3008dvh);
    }
}

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .statinger-category-select__art {
        --statinger-category-label-size: min(0.793vw, 1.4092dvh);
    }
}

.statinger-category-select__picture {
    display: block;
    width: 100%;
    height: 100%;
}

.statinger-category-select__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-mask-image: radial-gradient(ellipse 50% 55% at 50% 55%, #000 75%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 55% at 50% 55%, #000 75%, transparent 100%);
}

@supports (mask-composite: intersect) {
    .statinger-category-select__image {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
            linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4) 8%, #000 18%, #000 92%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
            linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4) 8%, #000 18%, #000 92%, transparent);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }
}

/* Reuse the maintenance mist element, gradients and keyframes unchanged. */
.statinger-category-select .statinger-maintenance-screen__mist {
    left: 32%;
    top: 0;
    width: 36%;
    height: 29%;
}

/* The mirrored mist stays inside the photographed tabletop area. */
.statinger-category-select__table-reflection {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 77.5%;
    width: 27%;
    height: 9%;
    transform: translateX(-50%);
    overflow: hidden;
    pointer-events: none;
    opacity: 0.9;
    background: radial-gradient(ellipse 52% 85% at 50% 38%, rgba(233, 230, 226, 0.67), rgba(235, 221, 207, 0.32) 45%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 70% 65% at center, #000 12%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 65% at center, #000 12%, transparent 100%);
}

.statinger-category-select__table-reflection::before,
.statinger-category-select__table-reflection::after {
    content: '';
    position: absolute;
    inset: -15%;
    pointer-events: none;
    filter: blur(clamp(8px, 1vw, 15px));
}

.statinger-category-select__table-reflection::before {
    background: radial-gradient(ellipse 28% 56% at 34% 30%, rgba(236, 224, 211, 0.52), transparent 76%),
        radial-gradient(ellipse 30% 62% at 65% 47%, rgba(255, 224, 197, 0.40), transparent 78%);
    animation: statinger-maintenance-mist-a 6s ease-in-out -3s infinite reverse;
}

.statinger-category-select__table-reflection::after {
    background: radial-gradient(ellipse 27% 65% at 59% 26%, rgba(238, 224, 211, 0.48), transparent 78%),
        radial-gradient(ellipse 29% 52% at 40% 53%, rgba(245, 204, 174, 0.36), transparent 80%);
    animation: statinger-maintenance-mist-b 8s ease-in-out -5s infinite reverse;
}

.statinger-category-transition[hidden] { display: none !important; }
.statinger-category-transition {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #000;
    opacity: 0;
    pointer-events: auto;
    transition: opacity 0.62s ease;
}
.statinger-category-transition.is-dark { opacity: 1; }
.statinger-category-transition.is-revealing { transition-duration: 0.95s; }

.statinger-category-select__control {
    position: absolute;
    z-index: 2;
    top: 33.5%;
    width: clamp(44px, 3.3%, 60px);
    height: clamp(88px, 17%, 164px);
    transform: translate(-50%, -50%);
    isolation: isolate;
}

/* Anchor the labels just inside the horizontal glass edges. */
.statinger-category-select__control--utility { left: 21.5%; }
.statinger-category-select__control--gastro { left: 78.5%; }

@media (max-width: 800px) and (orientation: portrait) {
    .statinger-category-select__art {
        --statinger-category-label-size: clamp(9px, 0.68vw, 11px);
        width: min(100vw, 56.2799dvh);
        aspect-ratio: 941 / 1672;
    }

    .statinger-category-select__control--utility { left: 24%; top: 36%; }
    .statinger-category-select__control--gastro { left: 78%; top: 59%; }
}

.statinger-category-select__control::before,
.statinger-category-select__control::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(12px);
    background: radial-gradient(ellipse 55% 43% at 48% 42%, rgba(255, 180, 112, 0.72), transparent 80%),
        radial-gradient(ellipse 54% 38% at 58% 68%, rgba(230, 118, 44, 0.408), transparent 82%);
}

.statinger-category-select__control::after {
    background: radial-gradient(ellipse 45% 52% at 52% 55%, rgba(255, 194, 125, 0.528), transparent 82%);
}

@media (hover: none) and (pointer: coarse) {
    .statinger-category-select__control::before {
        background: radial-gradient(ellipse 55% 43% at 48% 42%, rgba(255, 180, 112, 0.936), transparent 80%),
            radial-gradient(ellipse 54% 38% at 58% 68%, rgba(230, 118, 44, 0.530), transparent 82%);
    }

    .statinger-category-select__control::after {
        background: radial-gradient(ellipse 45% 52% at 52% 55%, rgba(255, 194, 125, 0.686), transparent 82%);
    }

    .statinger-category-select__table-reflection {
        background: radial-gradient(ellipse 52% 85% at 50% 38%, rgba(233, 230, 226, 0.871), rgba(235, 221, 207, 0.416) 45%, transparent 85%);
    }

    .statinger-category-select__table-reflection::before {
        background: radial-gradient(ellipse 28% 56% at 34% 30%, rgba(236, 224, 211, 0.676), transparent 76%),
            radial-gradient(ellipse 30% 62% at 65% 47%, rgba(255, 224, 197, 0.520), transparent 78%);
    }

    .statinger-category-select__table-reflection::after {
        background: radial-gradient(ellipse 27% 65% at 59% 26%, rgba(238, 224, 211, 0.624), transparent 78%),
            radial-gradient(ellipse 29% 52% at 40% 53%, rgba(245, 204, 174, 0.468), transparent 80%);
    }
}

.statinger-category-select__control--utility::before {
    animation: statinger-category-haze-left 7.1s ease-in-out -1.8s infinite alternate;
}

.statinger-category-select__control--utility::after {
    animation: statinger-category-haze-right 10.3s ease-in-out -4.3s infinite alternate-reverse;
}

.statinger-category-select__control--gastro::before {
    animation: statinger-category-haze-right 8.9s ease-in-out -5.1s infinite alternate;
}

.statinger-category-select__control--gastro::after {
    animation: statinger-category-haze-left 12.7s ease-in-out -2.6s infinite alternate-reverse;
}

@keyframes statinger-category-haze-left {
    0% { opacity: 0.30; transform: translate3d(-3px, 5px, 0) scale(0.94); }
    55% { opacity: 0.57; transform: translate3d(2px, -4px, 0) scale(1.04); }
    100% { opacity: 0.38; transform: translate3d(4px, 3px, 0) scale(0.98); }
}

@keyframes statinger-category-haze-right {
    0% { opacity: 0.37; transform: translate3d(4px, -3px, 0) scale(1.02); }
    48% { opacity: 0.63; transform: translate3d(-2px, 5px, 0) scale(0.96); }
    100% { opacity: 0.28; transform: translate3d(-5px, -4px, 0) scale(1.06); }
}

#statinger-category-select .statinger-category-select__button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    color: rgba(255, 248, 236, 0.94);
    font-family: var(--siteui-t-content-ff, sans-serif);
    font-size: var(--statinger-category-label-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.statinger-category-select__label {
    position: relative;
    z-index: 1;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.08em;
    transform-origin: center;
    transition: transform 0.4s ease, filter 0.4s ease;
    animation: statinger-category-button-breathe 4.4s ease-in-out infinite;
}

#statinger-category-select .statinger-category-select__button:hover .statinger-category-select__label,
#statinger-category-select .statinger-category-select__button:focus-visible .statinger-category-select__label {
    transform: scale(1.14);
    filter: brightness(1.18);
}

#statinger-category-select .statinger-category-select__button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@keyframes statinger-category-button-breathe {
    0%, 100% {
        color: rgba(255, 248, 236, 0.86);
        text-shadow: 0 0 5px rgba(255, 235, 214, 0.10);
    }
    50% {
        color: rgba(255, 248, 236, 0.98);
        text-shadow: 0 0 8px rgba(255, 235, 214, 0.25);
    }
}

/* Use the same two-phase intro reveal as the existing maintenance screen. */
html:not([data-statinger-maintenance]) .statinger-home-intro.is-leaving {
    opacity: 1;
    visibility: visible;
    background-color: #000;
    transition: opacity 0.9s ease, visibility 0.9s ease, background-color 0.52s ease;
}

html:not([data-statinger-maintenance]) .statinger-home-intro.is-leaving .statinger-home-intro__content {
    animation: none;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.52s ease, transform 0.52s ease;
}

html:not([data-statinger-maintenance]) .statinger-home-intro.is-leaving.is-revealing {
    opacity: 0;
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .statinger-category-select,
    html:not([data-statinger-maintenance]) .statinger-home-intro.is-leaving,
    html:not([data-statinger-maintenance]) .statinger-home-intro.is-leaving .statinger-home-intro__content {
        transition-duration: 0.01ms;
    }

    .statinger-category-select__control::before,
    .statinger-category-select__control::after {
        animation: none;
        opacity: 0.45;
    }

    .statinger-category-select__table-reflection::before,
    .statinger-category-select__table-reflection::after {
        animation: none;
        opacity: 0.65;
    }

    .statinger-category-transition { transition-duration: 0.01ms; }

    .statinger-category-select__label {
        transition-duration: 0.01ms;
        animation: none;
    }
}