/* ======================================================
   ART STAGE
====================================================== */

.scene {

    width: min(92%, 1200px);
    margin: 70px auto;

}

.art-stage {

    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    isolation: isolate;
    border-radius: 40px;
    background: #fbf8f3;
    box-shadow:
        0 40px 90px rgba(0,0,0,.08);

}

/* Background atmosphere */

.window,
.radio,
.basket,
.glass,
.spoon{

    filter:

    blur(.4px);

}

.table,
.placemat,
.bowl,
.steam{


    transform:

    translate(
        var(--mouse-x),
        var(--mouse-y)
    );


}

/* Hero focus */

.bowl{

    filter:

    drop-shadow(
        0 25px 30px rgba(0,0,0,.2)
    );

}
/* Subtle background objects */

.radio,
.basket,
.glass,
.spoon{
    opacity:.38;
    transform: scale(.82) translate(var(--mouse-x), var(--mouse-y));
}

.radio{
    left:260px;
    bottom:72px;
}

.basket{
    left:56px;
    bottom:94px;
}

.glass{
    right:88px;
    bottom:98px;
}

.spoon{
    right:170px;
    bottom:112px;
}
/* ======================================================
   ATMOSPHERE
====================================================== */

.art-stage::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at 20% 15%,
        rgba(255,221,160,.75),
        transparent 40%
    ),

    radial-gradient(
        circle at 85% 10%,
        rgba(255,255,255,.55),
        transparent 30%
    );

    pointer-events:none;

}

.art-stage::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle,
        transparent 60%,
        rgba(0,0,0,.05)
    );

    pointer-events:none;

}

/* ==========================
   Responsive / Mobile tweaks
   - center bowl, hide background clutter
   - scale down placemat and adjust steam/side dishes
========================== */

@media (max-width: 820px) {

    .scene { width: 96%; margin: 30px auto; }

    .art-stage { border-radius: 18px; aspect-ratio: auto; height: 620px; overflow: visible; }

    .placemat{ width:420px; height:420px; left:50%; bottom:8%; transform:translateX(-50%); }

    .bowl{ left:50%; bottom:18%; transform:translate(-50%,0); width:420px; max-width:70%; }

    .radio, .basket, .glass, .spoon{ opacity:0; pointer-events:none; transform:none; }

    .pondu{ left:12%; bottom:16%; width:140px; height:80px; }

    .fish{ right:12%; bottom:16%; }

    .steam{ left:50%; bottom:56%; width:240px; height:240px; }

    .steam-line{ opacity:.7; filter: blur(16px); }

}

/* ======================================================
   TABLE
====================================================== */

.table{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:58%;

    overflow:hidden;

}

/* Main wood */

.table-surface{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        180deg,
        #b67843 0%,
        #aa6d3e 30%,
        #94592d 100%
    );

}

/* Long wood planks */

.table-surface::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    repeating-linear-gradient(

        90deg,

        rgba(255,255,255,.05) 0px,
        rgba(255,255,255,.05) 2px,

        transparent 2px,
        transparent 180px,

        rgba(0,0,0,.05) 180px,
        rgba(0,0,0,.05) 183px,

        transparent 183px,
        transparent 360px

    );

    opacity:.55;

}

/* Wood grain */

.table-surface::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    repeating-linear-gradient(

        180deg,

        rgba(255,255,255,.02) 0px,
        rgba(255,255,255,.02) 3px,

        rgba(0,0,0,.02) 4px,
        rgba(0,0,0,.02) 6px,

        transparent 7px,
        transparent 12px

    );

    mix-blend-mode:soft-light;

    opacity:.8;

}

/* Soft light */

.table-light{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.18),

        transparent 45%

    );

}

/* Bottom shadow */

.table-shadow{

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:45px;

    background:

    linear-gradient(

        rgba(0,0,0,.18),

        transparent

    );

}

/* ======================================================
   RAFFIA PLACEMAT
====================================================== */

.placemat{

    position:absolute;

    left:50%;
    bottom:10%;

    transform:translateX(-50%);

    width:520px;
    height:520px;

    border-radius:50%;

    background:
        radial-gradient(circle,
            #d8b883 0%,
            #c89f62 70%,
            #b8884d 100%);

    box-shadow:
        0 30px 60px rgba(0,0,0,.18);

    overflow:hidden;

}

/* Interior */

.placemat-inner{

    position:absolute;

    inset:24px;

    border-radius:50%;

    background:
        radial-gradient(circle,
            #e3c996 0%,
            #cfab73 100%);

}

/* Radial weaving */

.placemat-pattern{

    position:absolute;

    inset:0;

    border-radius:50%;

    background:

        repeating-conic-gradient(

            from 0deg,

            rgba(255,255,255,.12) 0deg,

            rgba(255,255,255,.12) 2deg,

            transparent 2deg,

            transparent 6deg

        );

    opacity:.65;

}

/* Braided border */

.placemat::before{

    content:"";

    position:absolute;

    inset:8px;

    border-radius:50%;

    border:10px solid rgba(122,76,31,.18);

}

/* Soft center shadow */

.placemat::after{

    content:"";

    position:absolute;

    inset:60px;

    border-radius:50%;

    background:

        radial-gradient(circle,
            transparent 40%,
            rgba(0,0,0,.06));

}

/* ======================================================
   SUNLIGHT DUST PARTICLES
====================================================== */


.particles{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:5;

}



.particles span{


    position:absolute;


    width:5px;

    height:5px;


    border-radius:50%;


    background:

    rgba(255,230,170,.7);


    filter:blur(.5px);


    animation:

    float-dust 10s infinite ease-in-out;


}



.particles span:nth-child(1){

    left:20%;

    top:25%;

}


.particles span:nth-child(2){

    left:40%;

    top:35%;

    animation-delay:2s;

}



.particles span:nth-child(3){

    left:70%;

    top:20%;

    animation-delay:4s;

}



.particles span:nth-child(4){

    left:60%;

    top:50%;

    animation-delay:6s;

}



.particles span:nth-child(5){

    left:85%;

    top:40%;

    animation-delay:3s;

}



@keyframes float-dust{


    0%,
    100%{

        transform:

        translateY(0);

        opacity:.2;

    }


    50%{


        transform:

        translateY(-40px);


        opacity:.8;


    }


}