@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo, debug, exploding;

@layer exploding {
    [data-exploded='true'] {
        section {
            transition-delay: 0s;
        }

        .keypad {
            translate: calc(-50% - 1rem) 0;
            transition-delay: 0s, 0.26s;
        }

        .keypad__base {
            --depth: 2.5;
        }

        .keypad__single {
            --depth: -1;
        }

        .keypad__single--left {
            --depth: -2;
        }

        .keypad__double {
            --depth: 0;
        }

        .keypad__base,
        .key {
            translate: 0 calc(var(--depth) * 10vh);
            transition-delay: 0.52s;
        }
    }

    .keypad {
        transition-delay: 0.26s, 0.52s;
    }

    .key,
    .keypad__base {
        transition-property: translate;
        transition-duration: 0.26s;
        transition-timing-function: ease-out;
    }

    [data-exploded='true'] .key::after {
        opacity: 1;
        transition-delay: 0.52s;
    }

    .key::after {
        z-index: -1;
        content: '';
        position: absolute;
        opacity: 0;
        inset: 0;
        transition-property: opacity;
        transition-duration: 0.26s;
        transition-timing-function: ease-out;
        background: repeating-linear-gradient(-45deg,
                #0000 0 5px,
                hsl(220 100% 70%) 5px 6px);
    }
}

@layer demo {
    :root {
        --travel: 20;
    }

    .keypad {
        position: relative;
        aspect-ratio: 400 / 310;
        display: flex;
        place-items: center;
        width: clamp(280px, 35vw, 400px);
        -webkit-tap-highlight-color: #0000;
        transition-property: translate, transform;
        transition-duration: 0.26s;
        transition-timing-function: ease-out;
        transform-style: preserve-3d;
    }

    .key {
        transform-style: preserve-3d;
        border: 0;
        background: #0000;
        padding: 0;
        cursor: pointer;
        outline: none;
    }

    .key[data-pressed='true'],
    .key:active {
        .key__content {
            translate: 0 calc(var(--travel) * 1%);
        }
    }

    .key__content {
        width: 100%;
        display: inline-block;
        height: 100%;
        transition: translate 0.12s ease-out;
        container-type: inline-size;
    }

    .keypad__single .key__text {
        width: 52%;
        height: 62%;
        translate: 45% -16%;
    }

    .key__text {
        height: 46%;
        width: 86%;
        position: absolute;
        font-size: 10cqi;
        /* Adjusted relative font size */
        z-index: 21;
        top: 5%;
        left: 0;
        mix-blend-mode: normal;
        color: hsl(0 0% 94%);
        translate: 8% 10%;
        /* transform: rotateX(36deg) rotateY(45deg) rotateX(-90deg) rotate(0deg); */
        /* Simplified transform or keep original 3D feel? Keeping original but might need tweaking if text is weird */
        transform: rotateX(36deg) rotateY(45deg) rotateX(-90deg);
        text-align: left;
        padding: 1ch;
        pointer-events: none;
        font-weight: bold;
        font-family: monospace;
    }

    .keypad__single {
        position: absolute;
        width: 40.5%;
        left: 54%;
        bottom: 36%;
        height: 46%;
        z-index: 10;
        /* Middle depth */
        clip-path: polygon(0 0,
                54% 0,
                89% 24%,
                100% 70%,
                54% 100%,
                46% 100%,
                0 69%,
                12% 23%,
                47% 0%);
        mask: url(https://assets.codepen.io/605876/keypad-single.png?format=auto&quality=86) 50% 50% / 100% 100%;
    }

    .keypad__single--left {
        left: 29.3%;
        bottom: 54.2%;
        z-index: 5;
        /* Lowest depth (behind) */
    }

    .keypad__single .key__text {
        font-size: 15cqi;
        /* Larger for single keys */
    }

    .keypad__single img {
        top: 0;
        opacity: 1;
        width: 96%;
        position: absolute;
        left: 50%;
        translate: -50% 1%;
    }

    .key__mask {
        width: 100%;
        height: 100%;
        display: inline-block;
    }

    .keypad__double {
        position: absolute;
        background: hsl(10 100% 50% / 0);
        width: 64%;
        height: 65%;
        left: 6%;
        bottom: 17.85%;
        z-index: 20;
        /* Highest depth (Front) */
        clip-path: polygon(34% 0,
                93% 44%,
                101% 78%,
                71% 100%,
                66% 100%,
                0 52%,
                0 44%,
                7% 17%,
                30% 0);
        mask: url(https://assets.codepen.io/605876/keypad-double.png?format=auto&quality=86) 50% 50% / 100% 100%;
    }

    .keypad__double img {
        top: 0;
        opacity: 1;
        width: 99%;
        position: absolute;
        left: 50%;
        translate: -50% 1%;
    }

    .key img {
        filter: hue-rotate(calc(var(--hue, 0) * 1deg)) saturate(var(--saturate, 1)) brightness(var(--brightness, 1));
    }

    .keypad__base {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .keypad__base img {
        transition: translate 0.12s ease-out;
        width: 100%;
    }
}

/* Adjustments for Pizza Dijital Context */
.keypad {
    /* Center it in the hero visual area */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
}

@media (max-width: 768px) {
    .keypad {
        top: 50%;
        /* Center vertically in the tall container */
        transform: translate(-50%, -50%) scale(0.6);
        /* Smaller and centered */
    }
}