/* =====================================================================
   FREEDOM preloader
   Static orange bird with a swoosh comet circling it.
   (Pulsing variant: freedom-preloader-pulse.css)
   Drop-in: no HTML changes. Reuses the theme's existing markup:
     <div class="loader-wrapper">
       <div class="loader"></div>
       <div class="loader-section section-left"></div>
       <div class="loader-section section-right"></div>
     </div>
   Include this AFTER assets/css/style.css so it overrides the default ring.
   ===================================================================== */

.loader {
  /* tweakables */
  --fsm-orange: #F05A24;   /* brand digital orange (RGB 240/90/36) */
  --fsm-ring: 6px;         /* swoosh thickness */
  --fsm-speed: 1.15s;      /* swoosh orbit speed */

  /* enlarge the loader box (theme default is 70px) */
  width: 150px;
  height: 150px;
  /* top/left 50% + translate(-50%,-50%) centering comes from style.css */
}

/* --- the bird: static, centred, recolourable via CSS mask --- */
.loader::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 98px;
  height: 90px;
  background-color: var(--fsm-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='12 8 210 194'%3E%3Cpath d='M159.72,194.23l-3.86-4.34C145.24,178,134.13,171.26,99.73,165.5c-29.1-3.23-59.18-6.59-76.44-38.94L17.65,116,27,123.42c13.25,10.47,31.73,9.85,49.61,9.25,3-.1,5.94-.2,8.82-.25L84.36,132c-18.5-7.17-39.47-15.3-50-28.95C20,84.45,19.76,59.73,33.66,27.46l4.57-10.62.22,11.56c.75,38.31,29.6,55.64,60.15,74,32.26,19.38,65.63,39.43,61.62,86ZM33.23,132.91c16.61,22,42.24,24.87,67.12,27.63l.14,0c31.48,5.26,44.7,11.69,55.05,21.74.69-39.44-28.6-57-59.52-75.62C68.42,90.1,40,73,34.41,39.18,25.3,64.87,26.59,84.83,38.3,100c9.7,12.55,30,20.41,47.87,27.35,5.08,2,9.87,3.83,14.14,5.69l14.26,6.23-15.5-1.45c-6.92-.65-14.37-.4-22.25-.13C61.78,138.17,46.33,138.69,33.23,132.91Z'/%3E%3Cpath d='M161.13,153.25l-1.14-3a68.05,68.05,0,0,0-34.28-36.84l-9.61-4.52,44-1h1.33c29.82,0,47.65,22.79,54.42,31.44l5.9,7.48-7.95-2.67a56.58,56.58,0,0,0-50.08,7.28Zm-25.08-39.8a73.32,73.32,0,0,1,27.44,32.16,61.64,61.64,0,0,1,44.42-8.19c-8.19-9.66-23.63-24.53-46.47-24.53h-1.2l-.06-2.5.06,2.5Z'/%3E%3Cpath d='M179,119.78c4.83,1.58,9.58,3.22,13,7.3C187,129.61,181.84,126.13,179,119.78Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='12 8 210 194'%3E%3Cpath d='M159.72,194.23l-3.86-4.34C145.24,178,134.13,171.26,99.73,165.5c-29.1-3.23-59.18-6.59-76.44-38.94L17.65,116,27,123.42c13.25,10.47,31.73,9.85,49.61,9.25,3-.1,5.94-.2,8.82-.25L84.36,132c-18.5-7.17-39.47-15.3-50-28.95C20,84.45,19.76,59.73,33.66,27.46l4.57-10.62.22,11.56c.75,38.31,29.6,55.64,60.15,74,32.26,19.38,65.63,39.43,61.62,86ZM33.23,132.91c16.61,22,42.24,24.87,67.12,27.63l.14,0c31.48,5.26,44.7,11.69,55.05,21.74.69-39.44-28.6-57-59.52-75.62C68.42,90.1,40,73,34.41,39.18,25.3,64.87,26.59,84.83,38.3,100c9.7,12.55,30,20.41,47.87,27.35,5.08,2,9.87,3.83,14.14,5.69l14.26,6.23-15.5-1.45c-6.92-.65-14.37-.4-22.25-.13C61.78,138.17,46.33,138.69,33.23,132.91Z'/%3E%3Cpath d='M161.13,153.25l-1.14-3a68.05,68.05,0,0,0-34.28-36.84l-9.61-4.52,44-1h1.33c29.82,0,47.65,22.79,54.42,31.44l5.9,7.48-7.95-2.67a56.58,56.58,0,0,0-50.08,7.28Zm-25.08-39.8a73.32,73.32,0,0,1,27.44,32.16,61.64,61.64,0,0,1,44.42-8.19c-8.19-9.66-23.63-24.53-46.47-24.53h-1.2l-.06-2.5.06,2.5Z'/%3E%3Cpath d='M179,119.78c4.83,1.58,9.58,3.22,13,7.3C187,129.61,181.84,126.13,179,119.78Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* --- the swoosh: a comet arc orbiting the bird --- */
.loader::after {
  content: "";
  position: absolute;
  inset: 0;                 /* fills the 150px box; overrides theme's 14px inset ring */
  border: none;             /* clears theme's border ring */
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      rgba(240, 90, 36, 0)   0deg,
      rgba(240, 90, 36, 0)   140deg,
      rgba(240, 90, 36, .28) 250deg,
      var(--fsm-orange)      345deg,
      var(--fsm-orange)      360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fsm-ring)), #000 calc(100% - var(--fsm-ring)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--fsm-ring)), #000 calc(100% - var(--fsm-ring)));
  animation: fsm-swoosh var(--fsm-speed) linear infinite;
  z-index: 1;
}

@keyframes fsm-swoosh {
  to { transform: rotate(360deg); }
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .loader::after { animation-duration: 2.4s; }
}