/* ================================================================
   FPP PAGE LOADER
   ================================================================ */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%);
  overflow: hidden;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Ambient color blobs */
.page-loader::before,
.page-loader::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.page-loader::before {
  width: 600px;
  height: 600px;
  top: -150px;
  left: -150px;
  background: rgba(102, 102, 52, 0.18);
  animation: fpp-blob-drift 9s ease-in-out infinite;
}

.page-loader::after {
  width: 500px;
  height: 500px;
  bottom: -120px;
  right: -120px;
  background: rgba(137, 84, 59, 0.14);
  animation: fpp-blob-drift 11s ease-in-out infinite reverse;
}

/* ================================================================
   ARCHITECTURAL BUILDINGS (blueprint-style drawings)
   ================================================================ */

.page-loader__buildings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.page-loader__building {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #666634;
  overflow: visible;
  filter: drop-shadow(0 2px 6px rgba(102, 102, 52, 0.08));
}

.page-loader__building path {
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: fpp-draw 6.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.page-loader__building--house {
  width: 150px;
  height: 118px;
  transform: translate(-360px, -190px);
  color: #666634;
}
.page-loader__building--house path { animation-delay: 0s; }

.page-loader__building--tower {
  width: 90px;
  height: 205px;
  transform: translate(245px, -270px);
  color: #89543B;
}
.page-loader__building--tower path { animation-delay: 0.4s; }

.page-loader__building--office {
  width: 110px;
  height: 168px;
  transform: translate(-340px, 70px);
  color: #7D7D4A;
}
.page-loader__building--office path { animation-delay: 0.8s; }

.page-loader__building--classical {
  width: 200px;
  height: 145px;
  transform: translate(220px, 100px);
  color: #666634;
}
.page-loader__building--classical path { animation-delay: 1.2s; }

@media (max-width: 1200px) {
  .page-loader__building--house     { transform: translate(-300px, -170px); width: 130px; height: 102px; }
  .page-loader__building--tower     { transform: translate(210px, -240px);  width: 78px;  height: 178px; }
  .page-loader__building--office    { transform: translate(-290px, 60px);   width: 96px;  height: 146px; }
  .page-loader__building--classical { transform: translate(190px, 90px);    width: 170px; height: 123px; }
}

@media (max-width: 820px) {
  .page-loader__building--house     { transform: translate(-210px, -150px); width: 110px; height: 86px; }
  .page-loader__building--tower     { transform: translate(165px, -200px);  width: 66px;  height: 150px; }
  .page-loader__building--office    { transform: translate(-220px, 60px);   width: 82px;  height: 125px; }
  .page-loader__building--classical { transform: translate(150px, 90px);    width: 145px; height: 105px; }
}

@media (max-width: 560px) {
  .page-loader__building--house,
  .page-loader__building--office { display: none; }
  .page-loader__building--tower     { transform: translate(120px, -190px);  width: 58px;  height: 132px; }
  .page-loader__building--classical { transform: translate(-115px, 120px);  width: 130px; height: 94px; }
}

/* ================================================================
   LOGO GLOW + LOGO
   ================================================================ */

.page-loader__glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 102, 52, 0.18) 0%, rgba(102, 102, 52, 0.06) 50%, transparent 72%);
  animation: fpp-glow-breathe 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.page-loader__logo-wrap {
  position: relative;
  z-index: 2;
}

.page-loader__logo {
  display: block;
  width: 360px;
  height: auto;
  animation: fpp-logo-breathe 2.8s ease-in-out infinite;
  filter: drop-shadow(0 6px 32px rgba(102, 102, 52, 0.25));
  will-change: transform;
}

/* ================================================================
   FLOATING PARTICLES
   ================================================================ */

.page-loader__particle {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  pointer-events: none;
  z-index: 2;
}

.page-loader__particle--1 {
  width: 5px;
  height: 5px;
  background: rgba(102, 102, 52, 0.85);
  margin: -110px 0 0 -150px;
  animation: fpp-p-float 3.8s ease-in-out infinite 0s;
}

.page-loader__particle--2 {
  width: 4px;
  height: 4px;
  background: rgba(137, 84, 59, 0.75);
  margin: -140px 0 0 100px;
  animation: fpp-p-float 4.5s ease-in-out infinite -1.4s;
}

.page-loader__particle--3 {
  width: 6px;
  height: 6px;
  background: rgba(102, 102, 52, 0.55);
  margin: 50px 0 0 155px;
  animation: fpp-p-float 5.2s ease-in-out infinite -2.8s;
}

.page-loader__particle--4 {
  width: 3px;
  height: 3px;
  background: rgba(32, 56, 100, 0.5);
  margin: 130px 0 0 70px;
  animation: fpp-p-float-alt 3.2s ease-in-out infinite -0.7s;
}

.page-loader__particle--5 {
  width: 5px;
  height: 5px;
  background: rgba(137, 84, 59, 0.65);
  margin: 80px 0 0 -165px;
  animation: fpp-p-float 4.8s ease-in-out infinite -3.2s;
}

.page-loader__particle--6 {
  width: 4px;
  height: 4px;
  background: rgba(102, 102, 52, 0.65);
  margin: -175px 0 0 -50px;
  animation: fpp-p-float-alt 6s ease-in-out infinite -1.5s;
}

.page-loader__particle--7 {
  width: 3px;
  height: 3px;
  background: rgba(32, 56, 100, 0.4);
  margin: 150px 0 0 -90px;
  animation: fpp-p-float 5.5s ease-in-out infinite -2.1s;
}

.page-loader__particle--8 {
  width: 6px;
  height: 6px;
  background: rgba(137, 84, 59, 0.45);
  margin: -40px 0 0 170px;
  animation: fpp-p-float-alt 4.2s ease-in-out infinite -0.9s;
}

/* ================================================================
   PROGRESS BAR
   ================================================================ */

.page-loader__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.07);
  z-index: 3;
}

.page-loader__progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #666634 0%, #89543B 50%, #7D7D4A 100%);
  background-size: 200% 100%;
  animation: fpp-progress 4.2s cubic-bezier(0.4, 0, 0.2, 1) forwards,
             fpp-shimmer 1.2s linear 0.5s infinite;
}

/* ================================================================
   KEYFRAMES
   ================================================================ */

@keyframes fpp-logo-breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.045); }
}

@keyframes fpp-glow-breathe {
  0%, 100% { transform: scale(1);   opacity: 0.65; }
  50%       { transform: scale(1.35); opacity: 1; }
}

@keyframes fpp-draw {
  0%, 3%   { stroke-dashoffset: 1800; opacity: 0; }
  8%       { opacity: 0.95; }
  55%      { stroke-dashoffset: 0;    opacity: 0.95; }
  88%      { stroke-dashoffset: 0;    opacity: 0.95; }
  100%     { stroke-dashoffset: 0;    opacity: 0; }
}

@keyframes fpp-p-float {
  0%, 100% { transform: translateY(0)     translateX(0);    opacity: 0.7; }
  33%       { transform: translateY(-14px) translateX(6px);  opacity: 1; }
  66%       { transform: translateY(7px)  translateX(-5px);  opacity: 0.45; }
}

@keyframes fpp-p-float-alt {
  0%, 100% { transform: translateY(0)    translateX(0);    opacity: 0.6; }
  40%       { transform: translateY(11px) translateX(-8px); opacity: 0.9; }
  70%       { transform: translateY(-9px) translateX(6px);  opacity: 0.35; }
}

@keyframes fpp-blob-drift {
  0%, 100% { transform: translate(0, 0)      scale(1); }
  33%       { transform: translate(30px, -20px) scale(1.1); }
  66%       { transform: translate(-15px, 25px) scale(0.9); }
}

@keyframes fpp-progress {
  0%   { width: 0%; }
  15%  { width: 22%; }
  40%  { width: 52%; }
  70%  { width: 74%; }
  90%  { width: 91%; }
  100% { width: 100%; }
}

@keyframes fpp-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}