/* ==========================================================================
   Direct Homes – Page preloader
   Markup: includes/footerlinks.php (#preloader.dh-preloader)
   A house draws itself line by line (walls, gold roof, chimney, door),
   the windows light up, smoke rises – then it starts again until the page
   ========================================================================== */

#preloader.dh-preloader {
  position: fixed;
  inset: 0;
  z-index: 100200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dh-bg);
}

.dh-preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   House drawing (one 2.8s cycle, all parts share the same timeline)
   -------------------------------------------------------------------------- */
.dh-preloader__house {
  display: block;
  width: 120px;
  height: 100px;
  overflow: visible;
  animation: dh-house-cycle 2.8s ease-in-out infinite;
}

.dh-ph {
  fill: none;
  stroke: var(--dh-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.dh-ph--ground  { stroke: var(--dh-sand); stroke-width: 3; animation: dh-draw-ground 2.8s ease-out infinite; }
.dh-ph--walls   { animation: dh-draw-walls 2.8s ease-in-out infinite; }
.dh-ph--roof    { stroke: var(--dh-accent); stroke-width: 3.6; animation: dh-draw-roof 2.8s ease-in-out infinite; }
.dh-ph--chimney { animation: dh-draw-chimney 2.8s ease-in-out infinite; }
.dh-ph--door    { animation: dh-draw-door 2.8s ease-in-out infinite; }
.dh-ph--win     { stroke-width: 2.6; animation: dh-draw-win 2.8s ease-in-out infinite, dh-light-win 2.8s ease-in-out infinite; }

/* chimney smoke */
.dh-ph-smoke {
  fill: rgba(var(--dh-primary-rgb), 0.18);
  opacity: 0;
  animation: dh-smoke 2.8s ease-out infinite;
}

.dh-ph-smoke--2 {
  animation-delay: 0.25s;
}

@keyframes dh-draw-ground  { 0% { stroke-dashoffset: 1; } 14%, 100% { stroke-dashoffset: 0; } }
@keyframes dh-draw-walls   { 0%, 6% { stroke-dashoffset: 1; } 30%, 100% { stroke-dashoffset: 0; } }
@keyframes dh-draw-roof    { 0%, 24% { stroke-dashoffset: 1; } 46%, 100% { stroke-dashoffset: 0; } }
@keyframes dh-draw-chimney { 0%, 40% { stroke-dashoffset: 1; } 52%, 100% { stroke-dashoffset: 0; } }
@keyframes dh-draw-door    { 0%, 44% { stroke-dashoffset: 1; } 58%, 100% { stroke-dashoffset: 0; } }
@keyframes dh-draw-win     { 0%, 52% { stroke-dashoffset: 1; } 64%, 100% { stroke-dashoffset: 0; } }

/* windows: lights go on */
@keyframes dh-light-win {
  0%, 64% { fill: rgba(var(--dh-accent-rgb), 0); }
  72%, 100% { fill: rgba(var(--dh-accent-rgb), 0.85); }
}

@keyframes dh-smoke {
  0%, 60% { opacity: 0; transform: translateY(6px); }
  72%     { opacity: 1; }
  92%, 100% { opacity: 0; transform: translateY(-8px); }
}

/* whole drawing fades out at the end of a cycle, then redraws */
@keyframes dh-house-cycle {
  0%, 86% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Wordmark + thin progress line
   -------------------------------------------------------------------------- */
.dh-preloader .dh-wordmark {
  margin-top: 4px;
  font-size: 28px;
}

.dh-preloader__bar {
  position: relative;
  display: block;
  overflow: hidden;
  width: 120px;
  height: 2px;
  border-radius: 2px;
  background: rgba(var(--dh-primary-rgb), 0.12);
}

.dh-preloader__bar span {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: var(--dh-accent);
  animation: dh-preloader-bar 1.4s ease-in-out infinite;
}

@keyframes dh-preloader-bar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* No motion: show the finished house */
@media (prefers-reduced-motion: reduce) {
  .dh-preloader__house,
  .dh-ph,
  .dh-ph-smoke,
  .dh-preloader__bar span {
    animation: none;
  }

  .dh-ph {
    stroke-dashoffset: 0;
  }

  .dh-ph--win {
    fill: rgba(var(--dh-accent-rgb), 0.85);
  }
}