*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}

body{background:#9edcff}

.field{position:absolute;inset:0}

.sky{
position:absolute;
inset:0;
background:linear-gradient(
#8bcdf0 0%,
#cceaf5 50%,
#92c86a 100%);
}

.sun{
position:absolute;
top:12%;
right:16%;
width:120px;
height:120px;
border-radius:50%;
background:#ffe69a;
opacity:.65;
filter:blur(4px);
}

.cloud{
position:absolute;
width:190px;
height:55px;
background:rgba(255,255,255,.65);
border-radius:60px;
animation:cloudMove 45s linear infinite;
}

.c1{top:120px}
.c2{top:250px;animation-delay:-18s}

@keyframes cloudMove{
from{left:-220px}
to{left:120%}
}

/* 圆润田地，不再是斜线方块 */
.farmland{
position:absolute;
bottom:-25%;
left:-15%;
width:130%;
height:60%;
border-radius:50% 50% 0 0;
background:
radial-gradient(
ellipse at center,
#8acb58 0%,
#6eaf45 55%,
#57943c 100%);
box-shadow:inset 0 25px 50px rgba(0,0,0,.08);
animation:fieldWave 5s ease-in-out infinite;
}

@keyframes fieldWave{
50%{transform:translateY(8px)}
}

/* 更自然的作物点阵 */
.crop-layer{
position:absolute;
bottom:20%;
left:0;
width:100%;
height:120px;
display:flex;
justify-content:center;
gap:45px;
}

.crop-layer span{
width:10px;
height:10px;
background:#e6c85d;
border-radius:50% 50% 45% 45%;
position:relative;
box-shadow:
0 18px 0 #d8b94f,
0 36px 0 rgba(230,200,93,.7);
animation:sway 3s infinite ease-in-out;
}

.crop-layer span:nth-child(even){
animation-delay:.5s;
}

@keyframes sway{
50%{transform:translateY(-8px) rotate(8deg)}
}

.logo{
position:absolute;
inset:0;
display:flex;
justify-content:center;
align-items:center;
}

svg{
width:min(82vw,980px);
}