ul:has(li hero-params) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    max-width: 100%;
    padding: 0;

    & + text-block {
        margin-top: 3rem;
    }
}

li:has(hero-params) {
    container: item / inline-size;
    background: var(--neutral-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    box-shadow: 0 0.5rem 1rem var(--shadow-color-2);
    flex-basis: var(--ingredient-basis);
    flex-grow: 1;
    flex-shrink: 1;
    text-align: center;
    position: relative;
    transition: transform var(--transition-duration) ease;
    
    &:hover {
        transform: translateY(-0.75rem);

        hero-message {
            display: block;
        }
    }

    & h3 {
        font-size: 1.5rem;
        margin-top: 0;
        color: var(--title-color);
    }
}

hero-params {
    display: contents;
}

hero-shape {
    display: block;  
    position: relative;
    width: var(--hero-width, 80%);
    margin: 6rem auto;
    container-type: size;
    aspect-ratio: var(--hero-aspect-ratio);
    box-shadow: var(--hero-shadow);
    background: var(--hero-bg);
    border-radius: var(--hero-radius);
}

hero-message {
    display: none;
    filter: drop-shadow(-0.0625rem 0.5rem 0.75rem var(--shadow-color-2));
    min-width: 100cqw;
    height: auto;
    position: absolute;
    top: 20%;
    transform: translate(0, -100%);
    transition-property: opacity, display;
    transition-duration: var(--transition-duration);
    opacity: 1;

    @starting-style {
        opacity: 0;
    }

    & hero-text {
        background-color: var(--neutral-color);
        display: block;
        width: 100cqw;
        height: auto;
        padding: 1rem;
        padding-bottom: 2rem;
        clip-path: polygon(5% 0%, 95% 0%, 100% 5%, 100% 80%, 95% 85%, 85% 85%, 85% 100%, 70% 85%, 5% 85%, 0% 80%, 0% 5%);

        & p {
            font-size: 1.05rem;
            margin: 0.25rem 0;
        }
    }
}

hero-eye {
    position: absolute;
    top: 30cqh;
    width: 10cqw;
    height: 13cqw;
    background: var(--text-color);
    border-radius: 50%;
    box-shadow: inset 0 -2cqw 0 1cqw var(--neutral-color);
}

hero-eye:first-of-type {
    left: 30cqw;
    transform: rotate(-8deg);
}

hero-eye:last-of-type {
    right: 30cqw;
    transform: rotate(8deg);
}

hero-arm {
    position: absolute;
    top: 50cqh;
    width: 12cqw;
    height: 8cqw;
    background: var(--hero-arm-bg);
    border-radius: 4cqw;
    box-shadow: inset 0 -0.125rem 0.25rem var(--shadow-color-2);
}

hero-arm:first-of-type {
    left: -10cqw;
    transform: rotate(25deg);
}

hero-arm:last-of-type {
    right: -10cqw;
    transform: rotate(-25deg);
}

hero-leg {
    position: absolute;
    bottom: -10cqh;
    width: 10cqw;
    height: 10cqh;
    background: var(--hero-leg-bg);
    border-radius: 2cqw 2cqw 3cqw 3cqw;
    box-shadow: inset 0 -2cqw 3cqw var(--shadow-color-2);
}

hero-leg:first-of-type {
    left: 35cqw;
    transform: rotate(-8deg);
}

hero-leg:last-of-type {
    right: 35cqw;
    transform: rotate(8deg);
}

hero-hair {
    position: absolute;
    top: calc(-0.8 * var(--hero-hair-height));
    left: 50%;
    transform: translateX(-50%);
    height: var(--hero-hair-height);
    aspect-ratio: var(--hero-hair-ratio, 1);
    background: var(--hero-hair-bg);
    clip-path: var(--hero-hair-shape);
}

hero-mouth {
    position: absolute;
    top: 45cqh;
    width: 30cqw;
    left: 50%;
    transform: translateX(-50%);
    height: 10cqh;
    border: 0.25rem solid var(--text-color);
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 0 0 70% 70%;
}

hero-mouth::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 100%;
  height: 0;
  opacity: 0;
  background: var(--text-color);
  border-radius: 0 0 70% 70%;
  transition: all var(--transition-duration) cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* при ховере открываем рот */
li:hover hero-mouth::after {
  height: 100%;
  opacity: 1;
}

hero-params[id="tomato"] {
    --hero-arm-bg: var(--tomato-color-2);
    --hero-leg-bg: var(--tomato-color-4);
    /* Hair params */
    --hero-hair-shape: polygon(0% 20%,
        30% 30%,
        60% 100%,
        60% 60%,
        85% 0%,
        
        90% 70%,
        60% 100%,
        0% 65%
    );
    --hero-hair-bg: var(--tomato-hair-color);
    --hero-hair-height: 30cqh;
    --hero-aspect-ratio: 1.1;
    --hero-bg: radial-gradient(circle at 35% 30%, var(--tomato-color-2), var(--tomato-color-3) 55%, var(--tomato-color-4));
    --hero-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
    --hero-shadow:
        inset -0.75rem -1rem 1.5rem var(--shadow-color-2),
        inset 0.5rem 0.625rem 1.25rem var(--shadow-color-1),
        0 1rem 1.5rem var(--shadow-color-3);
}

hero-params[id="carrot"] {
    --hero-arm-bg: var(--carrot-color-2);
    --hero-leg-bg: var(--carrot-color-4);
    /* Hair params */
    --hero-hair-shape: polygon(
        0% 100%,
        5% 70%,
        10% 30%,
        15% 8%,
        20% 25%,
        22% 55%,
        25% 100%,
        40% 100%,
        42% 60%,
        48% 20%,
        52% 5%,
        58% 18%,
        62% 50%,
        65% 100%,
        80% 100%,
        82% 65%,
        88% 25%,
        92% 6%,
        96% 20%,
        98% 55%,
        100% 100%
    );
    --hero-hair-bg: var(--carrot-hair-color);
    --hero-hair-height: 20cqh;
    --hero-width: 50%;
    --hero-aspect-ratio: 0.5;
    --hero-bg:
        linear-gradient(
            to bottom,
            var(--carrot-color-1) 0%,
            var(--carrot-color-2) 40%,
            var(--carrot-color-3) 75%,
            var(--carrot-color-4) 100%
        ),
        radial-gradient(ellipse at 50% 68%, transparent 0 0.75rem, var(--shadow-color-3) 0.75rem 1rem, transparent 1rem);
    --hero-radius: 40% 40% 45% 45% / 20% 20% 80% 80%;
    --hero-shadow:
        inset -0.75rem -1rem 1.5rem var(--shadow-color-2),
        inset 0,5rem 0.75rem 1rem var(--shadow-color-1),
        0 0.75rem 1.5rem var(--shadow-color-3);
}

hero-params[id="onion"] {
    --hero-arm-bg: var(--onion-color-1);
    --hero-leg-bg: var(--onion-color-2);
    /* Hair params */
    --hero-hair-shape: polygon(
        30% 20%,
        40% 30%,
        50% 100%,
        60% 10%,
        55% 0%,
        50% 10%,
        50% 100%,
        30% 40%
    );
    --hero-hair-bg: var(--onion-hair-color);
    --hero-hair-height: 40cqh;
    --hero-aspect-ratio: 1;
    --hero-bg:
        linear-gradient(
            to bottom,
            var(--onion-color-1) 0%,
            var(--onion-color-2) 35%,
            var(--onion-color-3) 70%,
            var(--onion-color-4) 100%
        ),
        radial-gradient(ellipse at 50% 70%, transparent 0 1rem, var(--shadow-color-3) 1rem 1.125rem, transparent 1.5rem);
    --hero-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
    --hero-shadow:
        inset -0.75rem -1.125rem 1.5rem var(--shadow-color-2),
        inset 0.5rem 0.75rem 1.25rem var(--shadow-color-1),
        0 1rem 1.5rem var(--shadow-color-3);
}

hero-params[id="chicken"] {
    --hero-arm-bg: var(--chicken-color-1);
    --hero-leg-bg: var(--chicken-color-2);
    /* Hair params */
    --hero-hair-shape: polygon(
        20% 20%,
        40% 10%,
        50% 30%,
        60% 5%,
        80% 10%,
        60% 100%,
        40% 100%
    );
    --hero-hair-bg: var(--chicken-hair-color);
    --hero-hair-height: 40cqh;
    --hero-aspect-ratio: 1.2;
    --hero-bg:
        radial-gradient(circle at 40% 30%, var(--chicken-color-1), var(--chicken-color-2) 50%, var(--chicken-color-3) 85%),
        radial-gradient(ellipse at 50% 68%, transparent 0 0.75rem, var(--shadow-color-3) 0.75rem 1rem, transparent 1rem);
    --hero-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
    --hero-shadow:
        inset -0.75rem -1rem 1.5rem var(--shadow-color-2),
        inset 0.5rem 0.625rem 1rem var(--shadow-color-1),
        0 1rem 1.5rem var(--shadow-color-3);

    hero-beam {
        position: absolute;
        top: 45cqh;
        left: 50%;
        width: 10cqw;
        height: 10cqh;
        background: var(--chicken-color-4);
        border-radius: 0 0 50% 50%;
        transform: translateX(-50%);
        box-shadow: inset 0 -0.125rem 0.25rem var(--shadow-color-3);
        z-index: 3;
    }
}

hero-params[id="rice"] {
    --hero-arm-bg: var(--rice-color-3);
    --hero-leg-bg: var(--rice-color-4);
    /* Hair params */
    --hero-hair-shape: polygon(
        8% 100%,
        3% 92%,
        6% 75%,
        12% 55%,
        22% 32%,
        35% 15%,
        50% 4%,
        65% 15%,
        78% 32%,
        88% 55%,
        94% 75%,
        97% 92%,
        92% 100%
    );
    --hero-hair-bg: radial-gradient(ellipse 90% 70% at 50% 75%, var(--shadow-color-1) 0%, transparent 70%),
        radial-gradient(ellipse 55% 35% at 50% 28%, var(--rice-color-1) 0%, transparent 65%),
        linear-gradient(180deg, var(--rice-color-1) 0%, var(--rice-color-2) 50%, var(--rice-color-3) 100%);
    --hero-hair-height: 40cqh;
    --hero-hair-ratio: 3;
    --hero-aspect-ratio: 1.2;
    --hero-bg: linear-gradient(
        to bottom,
        var(--rice-color-1) 0%,
        var(--rice-color-2) 30%,
        var(--rice-color-3) 70%,
        var(--rice-color-4) 100%
    );
    --hero-radius: 10% 10% 45% 45% / 15% 15% 85% 85%;
    --hero-shadow:
        inset -0.625rem -0.75rem 1.25rem var(--shadow-color-2),
        inset 0.5rem 0.5rem 1rem var(--shadow-color-1),
        0 0.75rem 1.25rem var(--shadow-color-3);

    hero-hair::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 6rem 6rem;
        opacity: 0.4;
        mix-blend-mode: multiply;
        pointer-events: none;
    }
}


hero-params[id="secret"] {
    --hero-arm-bg: var(--secret-color-2);
    --hero-leg-bg: var(--secret-color-3);
    /* Hair params */
    --hero-hair-shape: polygon(
        10% 100%,
        15% 90%,
        30% 90%,
        35% 70%,
        65% 70%,
        70% 90%,
        85% 90%,
        90% 100%
    );
    --hero-hair-bg: var(--secret-color-4);
    --hero-hair-height: 40cqh;
    --hero-hair-ratio: 2;
    --hero-aspect-ratio: 0.8;
    --hero-bg:
        linear-gradient(
            to bottom,
            var(--secret-color-1) 0%,
            var(--secret-color-2) 35%,
            var(--secret-color-3) 70%,
            var(--secret-color-4) 100%
        ),
        radial-gradient(ellipse at 50% 70%, transparent 0 1rem, var(--shadow-color-3) 1rem 1.125rem, transparent 1.125rem);
    --hero-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
    --hero-shadow:
        inset -0.75rem -1rem 1.5rem var(--shadow-color-1),
        inset 0.5rem 0.75rem 1.25rem var(--shadow-color-1),
        0 1rem 1.5rem var(--shadow-color-3);
}