/* 3D Wave Animation CSS */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');

:root {
  --body-bg: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  --box-color-top: #B4CED9;
  --box-color-face: #5697BF;
  --box-color-side: #566D8C;
  --box-width: 50px;
  --box-height: 15px;
  --box-depth: 50px;
  --box-spacing: 0px;
  --animation-duration: 3s;
  --animation-delay: .1s;
}

.canvas {
  position: relative;
  transform: rotateX(45deg) rotateZ(45deg);
  transform-style: preserve-3d;
  font-size: 0;
}

  .canvas-wrapper {
    height: 500px;
    
  }

/* Simple mobile scaling - minimal change to avoid breaking */

@media (max-width: 1024px) {
  .canvas {

    position: absolute;
    left: 50%;
    margin-left: -120px;
    transform: rotateX(45deg) translate(0px, 150px) rotateZ(45deg) ;
  }
}


@media (max-width: 480px) {
  .canvas {
    transform: rotateX(45deg) translate(15px, 0) rotateZ(45deg) scale(0.5);
  }
  .canvas-wrapper {
    height: 350px;
  }
}

.group {
  display: inline-block;
  margin-right: var(--box-spacing);
  transform-style: preserve-3d;
}

.box {
  position: relative;
  width: var(--box-width);
  height: var(--box-depth);
  background-color: var(--box-color-top);
  transform-style: preserve-3d;
  margin-bottom: var(--box-spacing);
  animation-name: wave;
  animation-delay: calc(var(--scale, 1) * var(--animation-delay));
  animation-duration: var(--animation-duration);
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.74,.14,.18,.91);
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: 100% 100%;
}

.box:before {
  width: 100%;
  height: calc(var(--box-height) * var(--scale, 1));
  background-color: var(--box-color-side);
  transform: rotateX(90deg) translateZ(calc(var(--box-height) * var(--scale, 1) - var(--box-depth)));
}

.box:after {
  width: calc(var(--box-height) * var(--scale, 1));
  height: 100%;
  background-color: var(--box-color-face);
  transform: rotateY(-90deg) translateZ(calc(var(--box-height) * var(--scale, 1) - var(--box-width)));
}

@keyframes wave {
  50% {
    transform: translateZ(calc(var(--scale, 1) * var(--box-height)));
  }
}