* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.preloader {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 99999;
  /* background: #fff; */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7f1d1d;
  background-image: url("../img/loader-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-element {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  width: 100%;
  height: 100%;
  position: relative;
  /* TIMING: 3s for combination movement animation */
  transition: width 3s ease-in-out, height 3s ease-in-out;
}


/* Combined state - after animation */

.loader-element.combined {
  width: 399px;
  height: 311.39px;
}


/* WATER ELEMENT - Initial and combined positions */

.water.loader-svg {
  position: absolute;
  top: 50%;
  left: 15%;
  transform: translate(-50%, -50%) scale(1);
  /* TIMING: 3s for smooth movement during combination */
  transition: all 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.loader-element.combined .water.loader-svg {
  top: 75%;
  left: 26%;
  transform: translate(-50%, -50%) scale(1);
}


/* FIRE ELEMENT - Initial and combined positions */

.fire.loader-svg {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%) scale(1);
  /* TIMING: 3s for smooth movement during combination */
  transition: all 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.loader-element.combined .fire.loader-svg {
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}


/* AIR ELEMENT - Initial and combined positions */

.air.loader-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  /* TIMING: 3s for smooth movement during combination */
  transition: all 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.loader-element.combined .air.loader-svg {
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}


/* EARTH ELEMENT - Initial and combined positions */

.earth.loader-svg {
  position: absolute;
  top: 50%;
  left: 65%;
  transform: translate(-50%, -50%) scale(1);
  /* TIMING: 3s for smooth movement during combination */
  transition: all 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.loader-element.combined .earth.loader-svg {
  top: 75%;
  left: 75%;
  transform: translate(-50%, -50%) scale(1);
}


/* SKY ELEMENT - Initial and combined positions */

.sky.loader-svg {
  position: absolute;
  top: 50%;
  left: 85%;
  transform: translate(-50%, -50%) scale(1);
  /* TIMING: 3s for smooth movement during combination */
  transition: all 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.loader-element.combined .sky.loader-svg {
  top: 40%;
  left: 48.5%;
  transform: translate(-50%, -50%) scale(3.1);
}


/* NAME ELEMENT - Hidden by default, positioned below elements */

.name.loader-svg {
  position: absolute;
  top: 115%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  /* TIMING: Hidden by default */
  opacity: 0;
  visibility: hidden;
  /* TIMING: 1.5s smooth fade-in animation */
  transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out;
}


/* Make name visible after combination */

.loader-element.show-name .name.loader-svg {
  opacity: 1;
  visibility: visible;
}


/* Sky element SVG transitions */

.sky.loader-svg .sk1 {
  display: block;
  transition: opacity 1s ease-in-out;
}

.sky.loader-svg .sk2 {
  display: none;
  transition: opacity 1s ease-in-out;
}

.loader-element.combined .sky.loader-svg .sk1 {
  display: none;
}

.loader-element.combined .sky.loader-svg .sk2 {
  display: block;
}

.loader-svg {
  width: 200px;
  height: auto;
}

.loader-svg svg {
  width: 100%;
  height: auto;
  display: block;
}


/* AIR ANIMATION - 3 second drawing */

.air svg .air-svg-elem-1 {
  stroke-dashoffset: 6060.052734375px;
  stroke-dasharray: 6060.052734375px;
  fill: transparent;
  /* TIMING: 3s drawing + 1s fill delay */
  transition: stroke-dashoffset 3s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

.air svg.active .air-svg-elem-1 {
  stroke-dashoffset: 0;
  fill: #ef9d49;
}


/* FIRE ANIMATION - 3 second drawing */

.fire svg .fire-svg-elem-1 {
  stroke-dashoffset: 8140.720703125px;
  stroke-dasharray: 8140.720703125px;
  fill: transparent;
  /* TIMING: 3s drawing + 1s fill delay */
  transition: stroke-dashoffset 3s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

.fire svg.active .fire-svg-elem-1 {
  stroke-dashoffset: 0;
  fill: #ef9d49;
}


/* WATER ANIMATION - 3 second drawing */

.water svg .water-svg-elem-1 {
  stroke-dashoffset: 5855.9130859375px;
  stroke-dasharray: 5855.9130859375px;
  fill: transparent;
  /* TIMING: 3s drawing + 1s fill delay */
  transition: stroke-dashoffset 3s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

.water svg.active .water-svg-elem-1 {
  stroke-dashoffset: 0;
  fill: rgb(239, 157, 73);
}


/* EARTH ANIMATION - 3 second drawing */

.earth svg .earth-svg-elem-1 {
  stroke-dashoffset: 5651.3115234375px;
  stroke-dasharray: 5651.3115234375px;
  fill: transparent;
  /* TIMING: 3s drawing + 1s fill delay */
  transition: stroke-dashoffset 3s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

.earth svg.active .earth-svg-elem-1 {
  stroke-dashoffset: 0;
  fill: rgb(239, 157, 73);
}


/* SKY ANIMATION - 3 second drawing */

.sky svg .sky-svg-elem-1 {
  stroke-dashoffset: 3554.6630859375px;
  stroke-dasharray: 3554.6630859375px;
  fill: transparent;
  /* TIMING: 3s drawing + 1s fill delay */
  transition: stroke-dashoffset 3s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

.sky svg.active .sky-svg-elem-1 {
  stroke-dashoffset: 0;
  fill: rgb(239, 157, 73);
}

.sky svg .sky-svg-elem-2 {
  stroke-dashoffset: 2610.937255859375px;
  stroke-dasharray: 2610.937255859375px;
  fill: transparent;
  /* TIMING: 3s drawing + slight delay + 1s fill delay */
  transition: stroke-dashoffset 3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s, fill 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}

.sky svg.active .sky-svg-elem-2 {
  stroke-dashoffset: 0;
  fill: rgb(239, 157, 73);
}