.loader {
  position: relative;
  width: 240px;   /* 120 → 240 */
  height: 320px;  /* 160 → 320 */
  transform: translateY(-40px); /* -20 → -40 */
}
.layer {
  position: absolute;
  width: 200px;   /* 100 → 200 */
  height: 200px;  /* 100 → 200 */
  border-radius: 16px; /* 8 → 16 */
  transform: rotateX(60deg) rotateZ(45deg);
  border-bottom: 8px solid rgba(0, 0, 0, 0.4); /* 4 → 8 */
}
.bot { top: 120px; z-index: 1; animation: loadBot 2.4s ease-in-out infinite; } /* 60 → 120 */
.mid { top: 70px;  z-index: 2; animation: loadMid 2.4s ease-in-out infinite; } /* 35 → 70  */
.top { top: 20px;  z-index: 3; animation: loadTop 2.4s ease-in-out infinite; } /* 10 → 20  */

@keyframes loadBot {
  0%,  5%  { background: rgba(255,255,255,0.1); box-shadow: none; }
  20%, 82% { background: #ffffff; box-shadow: 0 0 18px rgba(255,255,255,0.35); }
  95%, 100%{ background: rgba(255,255,255,0.1); box-shadow: none; }
}
@keyframes loadMid {
  0%,  28% { background: rgba(255,255,255,0.1); box-shadow: none; }
  42%, 82% { background: #ffffff; box-shadow: 0 0 18px rgba(255,255,255,0.35); }
  95%, 100%{ background: rgba(255,255,255,0.1); box-shadow: none; }
}
@keyframes loadTop {
  0%,  55% { background: rgba(255,255,255,0.1); box-shadow: none; }
  68%, 82% { background: #ffffff; box-shadow: 0 0 18px rgba(255,255,255,0.35); }
  95%, 100%{ background: rgba(255,255,255,0.1); box-shadow: none; }
}