/*** Brand preloader — DETERMINADO & DINAMIZADOR (JS-driven 2D motion) ***/

#preloader.dd-preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--gradient-bg, linear-gradient(135deg, #07101C 0%, #0E2440 42%, #1A3A5C 78%, #243D55 100%));
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dd-preloader-fade, 500ms) ease,
    visibility var(--dd-preloader-fade, 500ms) ease;
}

/* Intentional diagonal wash: strong coral left-bottom → cool blue top-right.
   Centre stays darker so the mark stays readable. */
#preloader.dd-preloader::before {
  content: "";
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(ellipse 70% 55% at 12% 88%, rgba(255, 107, 74, 0.58) 0%, rgba(255, 107, 74, 0.22) 38%, transparent 70%),
    radial-gradient(ellipse 55% 48% at 88% 12%, rgba(74, 140, 220, 0.42) 0%, rgba(74, 140, 220, 0.14) 42%, transparent 72%),
    linear-gradient(128deg,
      rgba(255, 107, 74, 0.2) 0%,
      rgba(255, 107, 74, 0.06) 28%,
      transparent 48%,
      rgba(70, 130, 200, 0.08) 68%,
      rgba(70, 130, 200, 0.22) 100%);
  background-size: 115% 115%, 115% 115%, 140% 140%;
  background-position: 20% 70%, 80% 30%, 40% 50%;
  animation: dd-preloader-flow 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* Soft centre veil so the logo sits on a calm dark field. */
#preloader.dd-preloader::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 48% 42% at 50% 48%, rgba(7, 16, 28, 0.55) 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

@keyframes dd-preloader-flow {
  from { background-position: 14% 78%, 86% 22%, 36% 48%; }
  to   { background-position: 26% 64%, 74% 36%, 58% 52%; }
}

@media (prefers-reduced-motion: reduce) {
  #preloader.dd-preloader::before {
    animation: none;
    background-position: 20% 70%, 80% 30%, 46% 50%;
  }
}

#preloader.dd-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dd-preloader__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.dd-preloader__orbit {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dd-preloader__ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  will-change: transform;
}

.dd-preloader__ring-svg circle {
  fill: none;
  stroke-linecap: round;
}

.dd-preloader__ring-svg--outer circle {
  stroke: #FF6B4A;
  stroke-width: 3.5;
  stroke-dasharray: 110 292;
  filter: drop-shadow(0 0 6px rgba(255, 107, 74, 0.7));
}

.dd-preloader__ring-svg--inner circle {
  stroke: #FF8A63;
  stroke-width: 2.5;
  stroke-dasharray: 7 11;
  opacity: 0.85;
}

.dd-preloader__spark {
  --dd-orbit-r: 64px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #FF6B4A;
  box-shadow: 0 0 14px rgba(255, 107, 74, 0.95);
  z-index: 1;
  will-change: transform;
}

.dd-preloader__spark--2 {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: #FF8A63;
  --dd-orbit-r: 64px;
}

.dd-preloader__spark--3 {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #FF5C38;
  --dd-orbit-r: 50px;
}

.dd-preloader__mark {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 70px;
}

.dd-preloader__mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 74, 0.35) 0%, rgba(255, 107, 74, 0) 70%);
  transform: translate(-50%, -50%);
}

.dd-preloader__mark svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(255, 107, 74, 0.45));
}

.dd-preloader__track {
  position: relative;
  width: 180px;
  height: 4px;
  border-radius: 4px;
  background: rgba(155, 176, 199, 0.18);
  overflow: hidden;
}

.dd-preloader__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #FF5C38 0%, #FF8A63 45%, #FF6B4A 100%);
  box-shadow: 0 0 14px rgba(255, 107, 74, 0.75);
  will-change: width;
}

.dd-preloader__label {
  margin: 0;
  font-family: "Outfit", "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(155, 176, 199, 0.85);
  will-change: opacity;
}

@media (max-width: 575px) {
  .dd-preloader__orbit {
    width: 118px;
    height: 118px;
  }

  .dd-preloader__mark {
    width: 58px;
    height: 56px;
  }

  .dd-preloader__mark::before {
    width: 96px;
    height: 96px;
  }

  .dd-preloader__track {
    width: 150px;
  }

  .dd-preloader__spark {
    --dd-orbit-r: 54px;
  }

  .dd-preloader__spark--2 {
    --dd-orbit-r: 54px;
  }

  .dd-preloader__spark--3 {
    --dd-orbit-r: 42px;
  }
}