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

.pre-loader {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999991;
    background-color: var(--wdtAccentTxtColor);
    perspective: 1000px;
    transform-style: preserve-3d;
}

.loader-inner {
    padding: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    width:100%;
    height:100%;
    margin-top: -80px;
    margin-left: -80px;
    perspective: 1000px;
    transform-style: preserve-3d;
}

/* The loader container */
.wdt-loader1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width:100%;
    height:100%;
    perspective: 1000px;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%);
}












.wdt-loader{
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:var(--wdtBodyBGColor);
    font-family:var(--wdtFontTypo_Base);
    overflow:hidden;
    z-index:99999;
  }

  /* ---------- ripple rings ---------- */
  .aura{
    position:absolute;
    width:230px;
    height:230px;
    display:flex;
    align-items:center;
    justify-content:center;
    top:50%;
    left:50%;
    transform:translate(-50%,-58%);
  }
  .aura span{
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    border:1px solid rgba(var(--wdtSecondaryColorRgb),0.7);
    animation:ripple 3.6s ease-out infinite;
    opacity:0;
  }
  .aura span:nth-child(2){animation-delay:1.2s;}
  .aura span:nth-child(3){animation-delay:2.4s;}

  @keyframes ripple{
    0%{ transform:scale(.78); opacity:.55; }
    100%{ transform:scale(1.55); opacity:0; }
  }

  /* ---------- halo + figure ---------- */
  .halo-wrap{
    position:relative;
    width:230px;
    height:230px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    animation:breathe 4.2s ease-in-out infinite;
  }

  .halo{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
      radial-gradient(circle at 50% 40%,
        rgba(var(--wdtTertiaryColorRgb),0.28) 0%,
        rgba(var(--wdtTertiaryColorRgb),0) 62%),
      var(--wdtPrimaryColor);
    animation:haloGlow 4.2s ease-in-out infinite;
  }

.halo-wrap svg{
    width:130px;
    font-size:130px;
    z-index:1;

}

  @keyframes breathe{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.035); }
  }

  @keyframes haloGlow{
    0%,100%{ box-shadow:0 0 35px 0 rgba(var(--wdtPrimaryColorRgb),0.30); }
    50%{ box-shadow:0 0 55px 8px rgba(var(--wdtPrimaryColorRgb),0.45); }
  }

  .figure{
    position:relative;
    width:120px;
    height:132px;
    z-index:1;
    overflow:visible;
  }

  .figure path,
  .figure circle{
    fill:none;
    stroke:var(--wdtAccentTxtColor);
    stroke-width:2.1;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .chakra{
    fill:var(--wdtAccentTxtColor);
    stroke:none;
    animation:chakraGlow 2.6s ease-in-out infinite;
    transform-origin:100px 10px;
  }

  @keyframes chakraGlow{
    0%,100%{ opacity:.35; filter:drop-shadow(0 0 1px rgba(243,239,232,.4)); }
    50%{ opacity:1; filter:drop-shadow(0 0 6px rgba(243,239,232,.9)); }
  }

  .robe{
    animation:robeBreathe 4.2s ease-in-out infinite;
    transform-origin:100px 150px;
  }

  @keyframes robeBreathe{
    0%,100%{ transform:scaleY(1); }
    50%{ transform:scaleY(1.018); }
  }

  /* ---------- brand ---------- */
  .brand{
    margin-top:34px;
    font-family:var(--wdtFontTypo_Alt);
    font-weight:500;
    font-style:italic;
    font-size:var(--wdtFontSize_H5);
    color:var(--wdtHeadAltColor);
    letter-spacing:0.5px;
    z-index:2;
  }

  .tagline{
    margin-top:6px;
    font-family:var(--wdtFontTypo_Ext);
    font-weight:var(--wdtFontWeight_Ext);
    font-size:12px;
    line-height:var(--wdtLineHeight_Ext);
    letter-spacing:2.2px;
    text-transform:uppercase;
    color:var(--wdtBodyTxtColor);
    z-index:2;
  }

  /* ---------- loading dots ---------- */
  .dots{
    margin-top:22px;
    display:flex;
    gap:7px;
    z-index:2;
  }
  /* aura / halo shape behind the figure — soft, translucent, theme tint */
  .wdt-body-aura {
    fill: var(--wdtSecondaryColor);
    fill-opacity: .25;
    transform-origin: center;
    animation: wdt-aura-pulse 4.5s cubic-bezier(.445,.05,.55,.95) infinite;
  }

  /* the figure itself — solid, theme primary */
  .wdt-body-figure {
    fill: var(--wdtAccentTxtColor);
  }

  /* whole group: same slow float used elsewhere in the theme, plus a soft breathing scale */
  .wdt-body-group {
    transform-origin: center;
    animation:
      wdt-body-float 4.5s cubic-bezier(.445,.05,.55,.95) infinite,
      wdt-body-breathe 4.5s cubic-bezier(.445,.05,.55,.95) infinite;
  }

  @keyframes wdt-body-float {
    0%   { transform: translateY(3%); }
    50%  { transform: translateY(-3%); }
    100% { transform: translateY(3%); }
  }

  @keyframes wdt-body-breathe {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.03); }
    100% { transform: scale(1); }
  }

  @keyframes wdt-aura-pulse {
    0%   { transform: scale(.94); fill-opacity: .18; }
    50%  { transform: scale(1.06); fill-opacity: .32; }
    100% { transform: scale(.94); fill-opacity: .18; }
  }

  @media (prefers-reduced-motion: reduce){
    .wdt-body-group, .wdt-body-aura{ animation: none !important; }
  }
  .dots span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--wdtPrimaryColor);
    opacity:.3;
    animation:dotPulse 1.4s ease-in-out infinite;
  }
  .dots span:nth-child(2){ animation-delay:.18s; }
  .dots span:nth-child(3){ animation-delay:.36s; }

  @keyframes dotPulse{
    0%,60%,100%{ opacity:.25; transform:translateY(0); }
    30%{ opacity:1; transform:translateY(-3px); }
  }

  @media (prefers-reduced-motion: reduce){
    .aura span,.halo-wrap,.halo,.chakra,.robe,.dots span{
      animation:none !important;
    }
  }

  @media (max-width:480px){
    .aura{ width:190px; height:190px; }
    .halo-wrap{ width:190px; height:190px; }
    .figure{ width:98px; height:108px; }
    .brand{ font-size:20px; }
  }