/* Isometric villa scene */
.villa-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg,
      #F4DCC0 0%,
      #F0CDA8 20%,
      #E8B894 40%,
      #DCA88C 60%,
      #C99680 75%,
      #B58875 100%);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.4);
}

.villa-sky {
  position: absolute;
  inset: 0;
}
.sun {
  position: absolute;
  top: 18%; right: 24%;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #FFF1D8 0%, #FFE0B0 40%, rgba(255,210,150,0) 70%);
  filter: blur(2px);
}
.cloud {
  position: absolute;
  background: rgba(255,245,230,0.55);
  border-radius: 100px;
  filter: blur(8px);
}
.cloud-1 { top: 12%; left: 8%; width: 180px; height: 22px; }
.cloud-2 { top: 24%; left: 60%; width: 120px; height: 14px; }

.sea {
  position: absolute;
  left: 0; right: 0;
  top: 38%;
  height: 18%;
  background: linear-gradient(180deg, #6B98A8 0%, #4A7B8C 50%, #3A6878 100%);
  overflow: hidden;
}
.sea-shimmer {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 4px,
      rgba(255,255,255,0.05) 4px 5px);
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
  0% { transform: translateX(0); }
  100% { transform: translateX(-20px); }
}

.hill {
  position: absolute;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.hill-far {
  bottom: 42%; left: -10%; right: -10%;
  height: 22%;
  background: linear-gradient(180deg, #7A8868 0%, #5C6A4A 100%);
  opacity: 0.7;
}
.hill-mid {
  bottom: 40%; left: 40%;
  width: 50%; height: 20%;
  background: linear-gradient(180deg, #5E6E48 0%, #3E4421 100%);
  opacity: 0.85;
}

/* Isometric scene */
.iso-scene {
  position: absolute;
  inset: 0;
  bottom: 0;
  perspective: 1400px;
  perspective-origin: 50% 30%;
  transform-style: preserve-3d;
}

/* Ground plane (warm earth) */
.ground {
  position: absolute;
  bottom: 0; left: -20%; right: -20%;
  height: 60%;
  background:
    radial-gradient(ellipse at center top, #D9B788 0%, #B89164 40%, #8E6B45 100%);
  transform: rotateX(62deg) translateZ(-40px);
  transform-origin: center top;
}

/* Cypresses */
.cypress {
  position: absolute;
  width: 28px;
  height: 130px;
  background: linear-gradient(180deg, #2A3315 0%, #1F2810 100%);
  border-radius: 50% 50% 20% 20% / 30% 30% 12% 12%;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.cypress-1 { top: 38%; left: 14%; transform: scale(0.9); }
.cypress-2 { top: 36%; left: 22%; transform: scale(1.1); }
.cypress-shadow {
  position: absolute;
  bottom: -10px; left: -8px;
  width: 44px; height: 14px;
  background: rgba(0,0,0,0.18);
  border-radius: 50%;
  filter: blur(6px);
}

/* Vineyard */
.vineyard {
  position: absolute;
  top: 56%; right: 8%;
  width: 26%;
  height: 22%;
  transform: rotateX(60deg) rotateZ(-10deg);
  transform-origin: center;
}
.vine-row {
  height: 5px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, transparent, #6B7B3E 20%, #6B7B3E 80%, transparent);
  border-radius: 2px;
  position: relative;
}
.vine-row::before, .vine-row::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 6px; height: 11px;
  background: #5C6A2E;
  border-radius: 50%;
}
.vine-row::before { left: 30%; }
.vine-row::after { left: 60%; }

/* Villa */
.villa {
  position: absolute;
  bottom: 22%;
  left: 38%;
  width: 280px;
  height: 200px;
  transform-style: preserve-3d;
}

.villa-base, .villa-glass, .villa-upper {
  position: absolute;
  transform-style: preserve-3d;
}

/* Stone base — main mass */
.villa-base {
  bottom: 0; left: 0;
  width: 180px;
  height: 90px;
  transform-style: preserve-3d;
}
.villa-base .face-front {
  position: absolute;
  width: 180px; height: 90px;
  background: linear-gradient(180deg, #F2EBDC 0%, #E0D5BF 100%);
  border: 1px solid rgba(0,0,0,0.06);
  transform: translateZ(60px);
}
.villa-base .face-side {
  position: absolute;
  width: 60px; height: 90px;
  background: linear-gradient(180deg, #D9CDB3 0%, #B8A887 100%);
  transform: rotateY(90deg) translateZ(180px);
}
.villa-base .face-top {
  position: absolute;
  width: 180px; height: 60px;
  background: linear-gradient(135deg, #F8F2E2 0%, #E6DCC4 100%);
  transform: rotateX(-90deg) translateZ(0);
  transform-origin: top;
}

/* Glass wing */
.villa-glass {
  bottom: 0; left: 180px;
  width: 100px;
  height: 70px;
}
.glass-front {
  position: absolute;
  width: 100px; height: 70px;
  background: linear-gradient(135deg,
    rgba(140, 175, 195, 0.85) 0%,
    rgba(180, 210, 220, 0.7) 50%,
    rgba(120, 160, 180, 0.85) 100%);
  border: 1px solid rgba(255,255,255,0.5);
  transform: translateZ(60px);
  overflow: hidden;
}
.glass-reflection {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
}
.mullion {
  position: absolute;
  top: 0; bottom: 0;
  width: 1.5px;
  background: rgba(255,255,255,0.6);
}
.mullion:nth-child(1) { left: 25%; }
.mullion:nth-child(2) { left: 50%; }
.mullion:nth-child(3) { left: 75%; }
.glass-side {
  position: absolute;
  width: 60px; height: 70px;
  background: linear-gradient(180deg, rgba(100,130,150,0.6), rgba(70,100,120,0.7));
  transform: rotateY(90deg) translateZ(100px);
}
.glass-top {
  position: absolute;
  width: 100px; height: 60px;
  background: linear-gradient(135deg, #F0EAD8 0%, #D8CDB0 100%);
  transform: rotateX(-90deg) translateZ(0);
  transform-origin: top;
}

/* Upper white block */
.villa-upper {
  bottom: 90px; left: 30px;
  width: 110px;
  height: 60px;
}
.villa-upper .face-front {
  position: absolute;
  width: 110px; height: 60px;
  background: linear-gradient(180deg, #FFFEF8 0%, #F0E8D0 100%);
  border: 1px solid rgba(0,0,0,0.05);
  transform: translateZ(40px);
}
.villa-upper .face-side {
  position: absolute;
  width: 40px; height: 60px;
  background: linear-gradient(180deg, #E8DEC4 0%, #C6B695 100%);
  transform: rotateY(90deg) translateZ(110px);
}
.villa-upper .face-top {
  position: absolute;
  width: 110px; height: 40px;
  background: #FFFCF0;
  transform: rotateX(-90deg) translateZ(0);
  transform-origin: top;
}
.window-cut {
  position: absolute;
  background: #2C3340;
  transform: translateZ(41px);
  border: 1px solid rgba(255,255,255,0.3);
}
.window-cut.w1 { top: 14px; left: 18px; width: 22px; height: 30px; }
.window-cut.w2 { top: 14px; left: 56px; width: 36px; height: 30px; }

/* Pergola */
.pergola {
  position: absolute;
  bottom: 70px;
  left: 200px;
  width: 90px;
  height: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transform: translateZ(80px);
}
.pergola-beam {
  height: 3px;
  background: linear-gradient(90deg, #6B5238, #8C6B47);
  border-radius: 1px;
}

/* Pool */
.pool {
  position: absolute;
  bottom: -30px;
  left: -40px;
  width: 200px;
  height: 80px;
  background: linear-gradient(135deg, #6FA3B8 0%, #4A7B8C 100%);
  border: 3px solid #F0E8D0;
  border-radius: 4px;
  transform: rotateX(90deg);
  transform-origin: top;
  box-shadow: inset 0 0 30px rgba(255,255,255,0.15);
}
.pool-water {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 12px,
      rgba(255,255,255,0.08) 12px 13px);
  animation: ripple 4s linear infinite;
}
@keyframes ripple {
  0% { background-position: 0 0; }
  100% { background-position: 24px 24px; }
}

/* Olive trees */
.olive {
  position: absolute;
  width: 32px;
  height: 32px;
  background: radial-gradient(circle, #8C9B6E 30%, #6B7B4E 70%);
  border-radius: 50%;
  box-shadow:
    0 6px 12px rgba(0,0,0,0.15),
    inset -4px -4px 6px rgba(0,0,0,0.15);
}
.olive::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 14px;
  width: 4px; height: 10px;
  background: #6B5238;
}
.olive-1 { bottom: 18%; left: 30%; }
.olive-2 { bottom: 14%; left: 70%; transform: scale(1.15); }
.olive-3 { bottom: 10%; left: 84%; transform: scale(0.85); }

/* Path */
.path {
  position: absolute;
  bottom: 6%;
  left: 28%;
  display: flex;
  gap: 14px;
  transform: rotateX(70deg);
}
.stone {
  width: 18px; height: 12px;
  background: linear-gradient(135deg, #E0D2B5, #B8A484);
  border-radius: 50%;
  box-shadow: 0 2px 3px rgba(0,0,0,0.15);
}