/* =========================================================
   LuxuryAnimatedBackground
   Base image stays untouched; every effect is a layer on top.
   ========================================================= */
.lux{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}

/* --- shared layer defaults --- */
.lux .lyr{position:absolute;inset:0;pointer-events:none;will-change:transform}

/* ---------- 1 · BASE IMAGE + cinematic camera ---------- */
.lux-camera{
  position:absolute;inset:-2%;
  animation:luxCamera 18s ease-in-out infinite;
  will-change:transform;transform:translate3d(0,0,0);
}
@keyframes luxCamera{
  0%  {transform:scale(1.000) translate3d(0,0,0)}
  50% {transform:scale(1.035) translate3d(-8px,0,0)}
  100%{transform:scale(1.000) translate3d(0,0,0)}
}
.lux-base{
  position:absolute;inset:0;
  background-image:url('/assets/images/luxury-real-estate-bg.webp');
  background-size:cover;background-position:center;background-repeat:no-repeat;
}

/* ---------- 2 · CINEMATIC / ATMOSPHERIC overlay ---------- */
.lux-atmo{
  background:
    radial-gradient(70% 55% at 78% 42%, rgba(255,196,120,.07), transparent 65%),
    radial-gradient(60% 50% at 18% 30%, rgba(90,150,220,.06), transparent 70%),
    linear-gradient(180deg, rgba(6,18,42,.16) 0%, transparent 26%, transparent 72%, rgba(4,12,28,.20) 100%);
  animation:luxAtmo 11s ease-in-out infinite;
}
@keyframes luxAtmo{0%,100%{opacity:.85}50%{opacity:1}}

/* ---------- 3 · CLOUDS (sky only, never over skyline) ---------- */
.lux-clouds{overflow:hidden}
.lux-cloud{
  position:absolute;border-radius:50%;
  background:radial-gradient(closest-side, rgba(200,220,245,.9), rgba(200,220,245,0) 72%);
  filter:blur(26px);will-change:transform;
}
.lux-cloud.a{width:46vw;height:11vh;top:6%; left:-50vw;opacity:.13;animation:luxDrift 50s linear infinite}
.lux-cloud.b{width:34vw;height:8vh; top:16%;left:-40vw;opacity:.10;animation:luxDrift 64s linear infinite 8s}
.lux-cloud.c{width:56vw;height:13vh;top:2%; left:-60vw;opacity:.08;animation:luxDrift 75s linear infinite 22s}
.lux-cloud.d{width:30vw;height:7vh; top:26%;left:-34vw;opacity:.09;animation:luxDrift 58s linear infinite 34s}
@keyframes luxDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(180vw,0,0)}}

/* ---------- 4 · WINDOW LIGHTS ---------- */
.lux-win{
  position:absolute;border-radius:3px;
  background:radial-gradient(closest-side, rgba(255,196,116,.85), rgba(255,176,96,.22) 60%, transparent 78%);
  filter:blur(3px);mix-blend-mode:screen;
  animation:luxWin var(--wd,8s) ease-in-out infinite var(--wdel,0s);
  will-change:opacity;
}
@keyframes luxWin{
  0%,100%{opacity:var(--wlo,.5)}
  50%    {opacity:var(--whi,1)}
}

/* ---------- 5 · CITY LIGHTS (distant skyline) ---------- */
.lux-city{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,232,190,.9), transparent 72%);
  filter:blur(1.6px);mix-blend-mode:screen;
  animation:luxCity var(--cd,9s) ease-in-out infinite var(--cdel,0s);
}
@keyframes luxCity{0%,100%{opacity:.4}50%{opacity:.75}}

/* ---------- 6 · WATER REFLECTIONS ---------- */
.lux-water{
  position:absolute;left:56%;right:0;top:64%;height:20%;
  overflow:hidden;mix-blend-mode:screen;opacity:.55;
}
.lux-water i{
  position:absolute;left:-30%;right:-30%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent, rgba(255,214,160,.5), transparent);
  filter:blur(2px);
  animation:luxRipple var(--rd,13s) ease-in-out infinite var(--rdel,0s);
  will-change:transform,opacity;
}
@keyframes luxRipple{
  0%,100%{transform:translate3d(-2%,0,0) scaleX(1);opacity:.25}
  50%    {transform:translate3d(2%,0,0)  scaleX(1.06);opacity:.6}
}
/* broad slow shimmer across the water */
.lux-water::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 0%, rgba(255,210,150,.10) 45%, rgba(255,210,150,.16) 52%, transparent 100%);
  filter:blur(8px);
  animation:luxShimmer 7s ease-in-out infinite;
}
@keyframes luxShimmer{
  0%,100%{transform:translate3d(-12%,0,0);opacity:.5}
  50%    {transform:translate3d(12%,0,0); opacity:.9}
}

/* ---------- 7 · PROMENADE / FOUNTAIN light flow ---------- */
.lux-flow{
  position:absolute;left:24%;right:8%;top:74%;height:22%;
  mix-blend-mode:screen;opacity:.5;overflow:hidden
}
.lux-flow i{
  position:absolute;width:3px;height:26px;border-radius:3px;
  background:linear-gradient(180deg, rgba(255,226,178,0), rgba(255,226,178,.75), rgba(255,226,178,0));
  filter:blur(2.5px);
  animation:luxFlow var(--fd,5s) ease-in-out infinite var(--fdel,0s);
}
@keyframes luxFlow{
  0%,100%{transform:translate3d(0,-4px,0) scaleY(.9);opacity:.25}
  50%    {transform:translate3d(0,4px,0)  scaleY(1.15);opacity:.7}
}

/* ---------- 8 · PALM BREEZE (subtle sway on foliage band) ---------- */
.lux-palms{
  position:absolute;left:26%;right:36%;top:40%;height:32%;
  transform-origin:50% 100%;
  animation:luxBreeze 7s ease-in-out infinite;
  will-change:transform;
  /* the layer holds nothing visible — it gently transforms a copy of the base */
  background-image:url('/assets/images/luxury-real-estate-bg.webp');
  background-size:var(--bgw) var(--bgh);
  background-position:var(--palmpos);
  opacity:0; /* enabled via JS only when supported, keeps base pristine */
}
@keyframes luxBreeze{
  0%,100%{transform:rotate(0deg)}
  50%    {transform:rotate(0.6deg)}
}

/* ---------- 9 · GOLD PARTICLES ---------- */
.lux-particles{overflow:hidden}
.lux-p{
  position:absolute;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,206,138,.95), rgba(255,190,110,0) 72%);
  filter:blur(.6px);mix-blend-mode:screen;
  animation:luxFloat var(--pd,15s) linear infinite var(--pdel,0s);
  will-change:transform,opacity;
}
@keyframes luxFloat{
  0%  {transform:translate3d(0,0,0);opacity:0}
  14% {opacity:var(--po,.5)}
  86% {opacity:var(--po,.5)}
  100%{transform:translate3d(var(--px,30px),-62vh,0);opacity:0}
}

/* ---------- 10 · GOLD LIGHT TRAILS (follow the existing curves) ---------- */
.lux-trails{position:absolute;inset:0;mix-blend-mode:screen;opacity:.9}
.lux-trails svg{width:100%;height:100%;display:block}
.lux-trails path{
  fill:none;stroke:url(#luxTrailGrad);stroke-linecap:round;
  filter:blur(1.2px);
}
.trail-run{
  stroke-dasharray:120 1400;
  animation:luxTrail var(--td,24s) linear infinite var(--tdel,0s);
}
@keyframes luxTrail{
  0%  {stroke-dashoffset:1520;opacity:0}
  10% {opacity:.32}
  90% {opacity:.32}
  100%{stroke-dashoffset:0;opacity:0}
}

/* ---------- 11 · LOGIN READABILITY OVERLAY ---------- */
.lux-readability{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(5,16,38,.10) 0%,
    rgba(5,16,38,.06) 42%,
    rgba(5,16,38,.30) 68%,
    rgba(5,16,38,.52) 100%);
}


/* ---------- responsive ---------- */

@media (max-width:1024px){
  .lux-cloud.c,.lux-cloud.d{display:none}
  .lux-flow{opacity:.35}
}
@media (max-width:640px){
  .lux-water{opacity:.35}
  .lux-flow{display:none}
  .lux-readability{background:linear-gradient(180deg, rgba(5,16,38,.15) 0%, rgba(5,16,38,.10) 40%, rgba(5,16,38,.5) 100%)}
}

/* ---------- reduced motion: show the original image, still ---------- */
@media (prefers-reduced-motion: reduce){
  .lux-camera,.lux-cloud,.lux-win,.lux-city,.lux-water i,.lux-water::after,
  .lux-flow i,.lux-p,.trail-run,.lux-atmo,.lux-palms{animation:none!important}
  .lux-particles,.lux-trails,.lux-flow{display:none!important}
  .lux-water{opacity:.2}
}