/* ======================================================
   CONGOLESE FUFU - AUTHENTIC TEXTURE
====================================================== */

.fufu{
    position:absolute;
    left:50%;
    top:45%;
    transform: translate(-50%, -20%);
    width: 280px;
    height: 150px;
    
    border-radius:
        58% 42% 53% 47%
        /
        62% 48% 52% 38%;
    
    background:
        radial-gradient(
            ellipse at 35% 25%,
            #f2d392 0%,
            #d4a94a 26%,
            #b07a2d 55%,
            #8a5d22 92%
        ),
        radial-gradient(
            ellipse at 65% 55%,
            rgba(255,240,190,.65) 0%,
            transparent 32%
        ),
        radial-gradient(
            circle at 18% 78%,
            rgba(160,105,45,.18) 0%,
            transparent 16%
        ),
        radial-gradient(
            circle at 75% 35%,
            rgba(220,170,105,.16) 0%,
            transparent 18%
        );
    
    box-shadow:
        inset 0 18px 30px rgba(255,255,220,.35),
        inset 0 -20px 35px rgba(90,50,15,.32),
        0 18px 30px rgba(0,0,0,.18);
    
    overflow: hidden;
    z-index: 10;
    
    animation: fufu-breathe 6s ease-in-out infinite;
}

/* Natural surface highlight */
.fufu-highlight{
    position:absolute;
    width: 100px;
    height: 70px;
    top: 15px;
    left: 45px;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse,
            rgba(255,255,220,.5),
            transparent 70%
        );
    filter: blur(8px);
    z-index: 2;
}

/* Fufu folds - more pronounced and natural */
.fufu-fold{
    position:absolute;
    background:
        radial-gradient(
            ellipse,
            rgba(140,90,30,.3),
            transparent 70%
        );
    filter: blur(6px);
    z-index: 1;
}

.fold-one{
    width: 80px;
    height: 40px;
    left: 30px;
    bottom: 25px;
    transform: rotate(-20deg);
}

.fold-two{
    width: 100px;
    height: 35px;
    left: 120px;
    bottom: 15px;
    transform: rotate(5deg);
}

.fold-three{
    width: 65px;
    height: 45px;
    right: 30px;
    top: 50px;
    transform: rotate(25deg);
}

/* Additional texture bumps */
.fufu::after{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 25%, rgba(255,255,220,.12) 0%, transparent 12%),
        radial-gradient(circle at 45% 60%, rgba(160,105,45,.18) 0%, transparent 14%),
        radial-gradient(circle at 68% 35%, rgba(255,240,190,.12) 0%, transparent 12%),
        radial-gradient(circle at 25% 80%, rgba(150,90,30,.16) 0%, transparent 16%),
        radial-gradient(circle at 55% 22%, rgba(255,255,205,.08) 0%, transparent 18%);
    border-radius: inherit;
    pointer-events: none;
}

/* ======================================================
   AUTHENTIC PONDU / SAKA-SAKA (cassava leaves)
====================================================== */

.pondu {
    position: absolute;
    bottom: 16%;
    left: 10%;
    width: 170px;
    height: 100px;
    z-index: 8;
    
    background: 
        radial-gradient(circle at 30% 30%, #4e6b27 0%, #41561f 45%, #2b3513 100%),
        radial-gradient(circle at 70% 55%, #556f28 0%, transparent 50%),
        linear-gradient(135deg, #556f28 0%, #273114 100%);
    border-radius: 45% 45% 55% 55% / 60% 60% 35% 35%;
    
    box-shadow: 
        inset 0px 10px 20px rgba(0,0,0,0.48),
        inset -5px -5px 15px rgba(0,0,0,0.35),
        0 8px 16px rgba(0,0,0,0.24);
    
    filter: blur(0.2px);
}

.pondu span {
    position: absolute;
    display: block;
    background: radial-gradient(circle at 40% 40%, #6f8f3c 0%, #31400f 90%);
    border-radius: 50% 40% 45% 50%;
    box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
    opacity: .95;
}

.leaf-one {
    width: 28%;
    height: 18%;
    top: 8%;
    left: 8%;
    transform: rotate(-18deg);
}

.leaf-two {
    width: 24%;
    height: 20%;
    top: 12%;
    right: 12%;
    transform: rotate(14deg);
}

.leaf-three {
    width: 22%;
    height: 14%;
    bottom: 10%;
    left: 15%;
    transform: rotate(5deg);
}

.leaf-four {
    width: 26%;
    height: 16%;
    bottom: 16%;
    right: 10%;
    transform: rotate(-6deg);
}

.leaf-five {
    width: 18%;
    height: 12%;
    left: 42%;
    bottom: 8%;
    transform: rotate(8deg);
}

/* Add the lumpy, pulled-apart leafy texture on top */
.pondu::before {
    content: '';
    position: absolute;
    top: -15%;
    left: -5%;
    width: 110%;
    height: 130%;
    background: 
        radial-gradient(ellipse at 20% 20%, #6b8f36 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, #7a9e3e 0%, transparent 40%),
        radial-gradient(ellipse at 50% 80%, #4c6628 0%, transparent 60%);
    border-radius: 60% 40% 50% 50% / 80% 60% 40% 40%;
    z-index: 1;
    opacity: 0.9;
}

/* Add tiny oil pools/specks (the yellow/orange palm oil bits) */
.pondu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 25% 40%, rgba(255, 200, 50, 0.6) 0%, transparent 12%),
        radial-gradient(circle at 75% 60%, rgba(230, 170, 30, 0.4) 0%, transparent 15%),
        radial-gradient(circle at 60% 20%, rgba(240, 190, 40, 0.3) 0%, transparent 8%);
    z-index: 2;
    mix-blend-mode: overlay;
    border-radius: inherit;
}

/* ======================================================
   SMOKED FISH - RESTING ON THE PLACEMAT
====================================================== */

.fish {
    position: absolute;
    bottom: 16%;
    right: 14%;
    width: 142px;
    height: 58px;
    z-index: 22;
    transform: rotate(-12deg);
}

.fish-body {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 30% 40%, #c4a86a 0%, #8a6e3a 40%, #4a2d15 100%);
    border-radius: 60% 40% 40% 60% / 80% 60% 60% 80%;
    
    box-shadow: 
        inset 0px 8px 14px rgba(0,0,0,0.55),
        inset -12px 0px 18px rgba(0,0,0,0.45),
        0 12px 18px rgba(0,0,0,0.24);
    
    border: 1px solid rgba(0,0,0,0.22);
}

.fish-body::before {
    content: '';
    position: absolute;
    left: 18%;
    top: 55%;
    width: 62%;
    height: 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.14);
    transform: rotate(-6deg);
}

.fish-eye {
    position: absolute;
    top: 24%;
    left: 22%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f5f2e6;
    box-shadow: inset 0 0 0 2px #3f2b1c, 0 0 0 3px rgba(255,255,255,.75);
    z-index: 3;
}

/* The highlight where the light catches the dried skin */
.fish-highlight {
    position: absolute;
    top: 15%;
    left: 25%;
    width: 40%;
    height: 25%;
    background: radial-gradient(ellipse at center, rgba(210, 180, 130, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(3px);
    z-index: 2;
}

/* The tail fin */
.fish-tail {
    position: absolute;
    bottom: 0;
    right: -25px;
    width: 45px;
    height: 35px;
    background: radial-gradient(ellipse at 0% 50%, #2e1f12 0%, #0f0a05 100%);
    border-radius: 0 50% 50% 0 / 0 100% 100% 0;
    transform-origin: left center;
    transform: rotate(15deg);
    box-shadow: inset -5px 0px 10px rgba(0,0,0,0.9);
    z-index: 1;
}

/* Flaky skin texture pieces */
.fish::after {
    content: '';
    position: absolute;
    top: 60%;
    right: -8%;
    width: 18px;
    height: 10px;
    background: #5a4030;
    border-radius: 20% 80% 50% 50%;
    transform: rotate(25deg);
    box-shadow: 0 3px 5px rgba(0,0,0,0.4);
    opacity: 0.7;
}

/* ======================================================
   PALM OIL REFLECTION - NATURAL & GLOSSY
====================================================== */

.palm-oil{
    position:absolute;
    left: 65px;
    bottom: 30px;
    width: 90px;
    height: 18px;
    z-index: 12;
    
    background:
        radial-gradient(
            ellipse at 40% 50%,
            rgba(220,120,30,.45),
            rgba(180,80,20,.2) 50%,
            transparent 70%
        );
    
    border-radius: 50%;
    filter: blur(2px);
    
    animation: palm-glow 3s ease-in-out infinite;
}

/* Secondary palm oil spot */
.palm-oil::after{
    content: "";
    position: absolute;
    right: -20px;
    top: -5px;
    width: 40px;
    height: 12px;
    background:
        radial-gradient(
            ellipse,
            rgba(200,100,25,.3),
            transparent 70%
        );
    border-radius: 50%;
    filter: blur(3px);
}

/* ======================================================
   ANIMATIONS
====================================================== */

@keyframes fufu-breathe{
    0%, 100%{
        transform: translate(-50%, -45%) scale(1);
    }
    50%{
        transform: translate(-50%, -45%) scale(1.015);
    }
}

@keyframes palm-glow{
    0%, 100%{ opacity: 0.8; }
    50%{ opacity: 1; }
}