/*--------------------------------------------------------------
    Loader
--------------------------------------------------------------*/

.pre-loader {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999991;
    background-color: var(--wdtBodyBGColor);
}


.loader-inner {
  width: 100%;
  max-width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* Flex container */
.loader-inner svg {
  font-size: clamp(7.5rem, 6.5rem + 5vw, 12.5rem); /* 120 - 200 */
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center top;
}

/* Shape 1 (hammer head) */
.loader-inner svg .wdt-law-1 { 
  fill:  var(--wdtPrimaryColor); 
  stroke: var(--wdtPrimaryColor); 
  stroke-width: 0.5; 
  stroke-dasharray: 1000; 
  stroke-dashoffset: 1000; 
  fill-opacity: 0; 
  animation: dashLoop 2.8s linear forwards, gavelSmash 2.8s cubic-bezier(0.75, 0.05, 0.45, 1.2) infinite;
  transform-origin: center center;
  transition: fill 0.3s ease;
}

/* Shape 2 (base block) */
.loader-inner svg .wdt-law-2 { 
  fill: var(--wdtSecondaryColor); 
  stroke: var(--wdtSecondaryColor); 
  stroke-width: 0.5; 
  stroke-dasharray: 1000; 
  stroke-dashoffset: 1000; 
  fill-opacity: 0;
  animation: dashLoop 2.8s linear forwards, gavelSmashBase 2.8s cubic-bezier(0.75, 0.05, 0.45, 1.2) infinite;
  transform-origin: center center;
  transition: fill 0.3s ease;
}

@keyframes dashLoop {
  0%   { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 0; }
}


@keyframes gavelSmash {
  0%   { transform: translateY(0px) rotate(0deg); fill-opacity: 0.3; }               
  50%  { transform: translateY(0px) rotate(-40deg); fill-opacity: 1; } 
  100% { transform: translateY(0px) rotate(0deg); fill-opacity: 0.3; }    
}

@keyframes gavelSmashBase {
  0%   { fill-opacity: 0.3;transform: translateY(0px); }
  50%  { fill-opacity: 1;transform: translateY(-6px); } 
  100% { fill-opacity: 0.3; transform: translateY(0px);}
}



/*--------------------------------------------------------------
    Accents
--------------------------------------------------------------*/

    .loader-inner .loader-text:after { background-color: var(--wdtPrimaryColor); }


/*--------------------------------------------------------------
    Responsive
--------------------------------------------------------------*/

/*----*****---- << Mobile (Landscape) >> ----*****----*/

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {

}


/* Common Styles for the devices below 479px width */

@media only screen and (max-width: 479px) {

}