@keyframes spin {
    to { transform: rotate(360deg); }
}

pilaf-scene {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: var(--pilaf-scene-width);
    aspect-ratio: 1;
    margin: 2.5rem auto;
}

patterned-table {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: 
      radial-gradient(circle at 50% 50%, transparent 58%, var(--table-color) 58.5%, var(--table-color) 100%),
      repeating-conic-gradient(
        from 0deg,
        var(--accent-color) 0deg 8deg,
        transparent 8deg 16deg,
        var(--primary-color) 16deg 20deg,
        transparent 20deg 28deg
      ),
      repeating-conic-gradient(
        from 10deg,
        transparent 0deg 12deg,
        var(--accent-color) 12deg 14deg,
        transparent 14deg 26deg
      );
    box-shadow: 
        0 0 0 0.25rem var(--accent-color),
        0 0 0 0.5rem var(--text-color),
        0 0 0 1rem var(--primary-color);
}

iron-cauldron {
    display: block;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: spin calc(var(--transition-duration) * 100) linear infinite;
    transform-origin: center center;
}

cauldron-rim {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 70%;
    background: var(--rim-color);
    box-shadow: 
        inset 0 0 0 0.5rem var(--shadow-color-1),
        inset 0 0 0 1rem var(--shadow-color-2);
}

pilaf-bg {
    display: block;
    position: absolute;
    inset: 1rem;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle, var(--secondary-color) 0%, oklch(from var(--secondary-color) 0.7 0.18 h) 100%);
    clip-path: content-box;
}

pilaf-bg::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    filter: url(#rice-texture);
    mix-blend-mode: overlay; 
    opacity: 0.8;
    pointer-events: none;
}

chicken-chunk {
    position: absolute;
    display: block;
    width: 10%;
    aspect-ratio: 1.4;
    top: 50%;
    left: 50%;
    background: 
        radial-gradient(ellipse at 30% 30%, var(--chicken-color-1) 0%, transparent 50%),
        linear-gradient(135deg, var(--chicken-color-2) 0%, var(--chicken-color-3) 45%, var(--chicken-color-4) 100%);
    border-radius: 40% 50% 45% 35%;
    box-shadow: 
        inset 0.125rem 0.125rem 0.25rem var(--shadow-color-1),
        inset -0.125rem -0.125rem 0.25rem var(--shadow-color-2);
}

carrot-chunk {
    position: absolute;
    display: block;
    width: 8%;
    aspect-ratio: 2;
    top: 50%;
    left: 50%;
    background: linear-gradient(90deg, var(--carrot-color-1), var(--carrot-color-2) 60%, var(--carrot-color-3));
    border-radius: 0.25rem;
    box-shadow: 
        inset 0 0.0625rem 0.125rem var(--shadow-color-1),
        inset 0 -0.0625rem 0.125rem var(--shadow-color-2),
}

tomato-chunk {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5%;
    display: block;
    aspect-ratio: 0.95;
    background: 
        radial-gradient(ellipse at 35% 30%, var(--tomato-color-1) 0%, transparent 45%),
        linear-gradient(160deg, var(--tomato-color-2), var(--tomato-color-3) 70%, var(--tomato-color-4));
    border-radius: 0% 45% 0% 20%;
    box-shadow: 
        inset 0.125rem 0.125rem 0.25rem var(--shadow-color-1),
        inset -0.125rem -0.125rem 0.25rem var(--shadow-color-2);
}

parsley-leaf {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15%;
    display: block;
    aspect-ratio: 1;
    background: linear-gradient(
            90deg,
            transparent 47%,
            var(--parsley-color-1) 48% 51%,
            transparent 52%
        ),
        var(--parsley-color-2) ;
    clip-path: polygon(
        50% 0%,
        57% 13%,
        72% 8%,
        66% 20%,
        84% 18%,
        73% 30%,
        94% 32%,
        79% 42%,
        91% 50%,
        73% 53%,
        84% 67%,
        65% 63%,
        67% 78%,
        55% 70%,
        53% 100%,

        46% 100%,
        44% 76%,
        34% 84%,
        37% 68%,
        18% 72%,
        27% 57%,
        8% 60%,
        21% 47%,
        5% 41%,
        22% 34%,
        12% 24%,
        30% 27%,
        28% 13%,
        42% 19%
    );
}