/* Eldeco 7 Peaks Residences — brand preloader (plain CSS).
   The reveal timeline lives here as keyframes; preloader.js only decides when to leave.
   Every phase time is multiplied by --pl-pace. At --pl-pace: 1 the last reveal ends at 3.5s,
   which is REVEAL_MS in preloader.js (it reads --pl-pace, so only change it here).

   Geometry: --u is one pixel of the 746px-wide reference artwork. Every position and size
   below is measured from that artwork, so the composition scales as one unit. */

.preloader {
  --pl-pace: 1;
  --pl-exit: 700ms;

  --pl-ivory: #f5f1e8;
  --pl-gold: #c9ad7b;
  --pl-gold-dark: #806443;
  --pl-green: #087d5b;
  --pl-pattern: #e9e3d5;
  --pl-ink: #1f1d1a;
  --pl-font: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Width-bound on phones, height-bound on short landscape screens, capped on desktop. */
  --u: min(calc((100vw - 32px) / 316), calc(100vh / 330), 2.2px);
}
@supports (height: 100svh) {
  .preloader { --u: min(calc((100vw - 32px) / 316), calc(100svh / 330), 2.2px); }
}

/* Only shown when the head bootstrap ran (JS available). Without JS the page is simply visible. */
html.pl-active .preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: block;
  overflow: hidden;
  background: var(--pl-ivory);
  color: var(--pl-gold-dark);
  font-family: var(--pl-font);
  -webkit-font-smoothing: antialiased;
  transition: transform var(--pl-exit) cubic-bezier(.76, 0, .24, 1);
}
/* Scroll lock. The gutter keeps the page width identical when the scrollbar returns (no layout shift);
   the root background paints that gutter the same ivory as the preloader. */
html.pl-lock { overflow: hidden; scrollbar-gutter: stable; background: #f5f1e8; }

.pl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Paper texture with a soft warm light in the centre */
.pl-texture {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255,255,255,.5), rgba(255,255,255,0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 .16 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: plFade calc(.8s * var(--pl-pace)) ease-out both;
}

.pl-stage {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  transition: opacity .35s ease, transform var(--pl-exit) cubic-bezier(.76, 0, .24, 1);
}
.pl-composition { position: relative; display: flex; flex-direction: column; align-items: center; }

/* Diamond-and-leaf lattice band behind the location line, fading at both edges (as in the artwork) */
.pl-pattern {
  position: absolute;
  z-index: -1;
  top: calc(var(--u) * 108);
  left: 50%;
  width: 100vw;
  height: calc(var(--u) * 104);
  margin-left: -50vw;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cg fill='%23e6dcc9'%3E%3Cpath id='l' d='M11.2 11.2C9.6 7 6.8 4.4 2.6 2.6C4.4 6.8 7 9.6 11.2 11.2Z'/%3E%3Cuse href='%23l' transform='rotate(90 13 13)'/%3E%3Cuse href='%23l' transform='rotate(180 13 13)'/%3E%3Cuse href='%23l' transform='rotate(270 13 13)'/%3E%3C/g%3E%3Cpath d='M13 8.6L17.4 13L13 17.4L8.6 13Z' fill='none' stroke='%23e6dcc9' stroke-width='1.1'/%3E%3C/svg%3E") center top / calc(var(--u) * 26) repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 62%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 62%, transparent);
  animation: plPatternIn calc(.8s * var(--pl-pace)) cubic-bezier(.25, .6, .3, 1) calc(.1s * var(--pl-pace)) both;
}

/* Logo box: 306 × 147 units, from the top of ELDECO to the foot of the 7.
   line-height .7 ≈ Montserrat cap height, so each element's top edge is its cap top. */
.pl-logo { position: relative; width: calc(var(--u) * 306); height: calc(var(--u) * 147); white-space: nowrap; }
.pl-logo > * { position: absolute; line-height: .7; }

.pl-seven {
  left: 0;
  top: calc(var(--u) * 35);
  width: calc(var(--u) * 88);
  height: calc(var(--u) * 112);
  animation: plMaskUp calc(1.1s * var(--pl-pace)) cubic-bezier(.22, .7, .2, 1) calc(.6s * var(--pl-pace)) both;
}
.pl-seven svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  animation: plRise calc(1.1s * var(--pl-pace)) cubic-bezier(.22, .7, .2, 1) calc(.6s * var(--pl-pace)) both;
}
.pl-sheen { animation: plSheen calc(1.2s * var(--pl-pace)) ease-in-out calc(1.5s * var(--pl-pace)) both; }

.pl-eldeco {
  left: calc(var(--u) * 101);
  top: 0;
  color: var(--pl-green);
  font-size: calc(var(--u) * 23);
  font-weight: 800;
  letter-spacing: .07em;
  animation: plFadeUp calc(.7s * var(--pl-pace)) ease-out calc(1.2s * var(--pl-pace)) both;
}

/* PEAKS and RESIDENCES are justified to fixed widths so they match the artwork on any font fallback */
.pl-peaks, .pl-residences { display: flex; justify-content: space-between; }
.pl-peaks {
  left: calc(var(--u) * 103);
  top: calc(var(--u) * 35);
  width: calc(var(--u) * 197);
  color: var(--pl-gold);
  font-size: calc(var(--u) * 53);
  font-weight: 300;
  animation: plWipeRight calc(.9s * var(--pl-pace)) cubic-bezier(.6, 0, .25, 1) calc(1.5s * var(--pl-pace)) both;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pl-peaks {
    background: linear-gradient(180deg, #dcc59b 0%, var(--pl-gold) 45%, #9a7a4c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.pl-residences {
  left: calc(var(--u) * 100);
  top: calc(var(--u) * 89);
  width: calc(var(--u) * 200);
  color: var(--pl-gold-dark);
  font-size: calc(var(--u) * 21);
  font-weight: 500;
}
.pl-residences > span {
  animation: plLetter calc(.7s * var(--pl-pace)) cubic-bezier(.25, .6, .3, 1) calc(1.9s * var(--pl-pace)) both;
}

/* Centred under RESIDENCES; justify-content: center lets it overflow evenly if a fallback font is wider */
.pl-location {
  left: calc(var(--u) * 85);
  top: calc(var(--u) * 132);
  width: calc(var(--u) * 221);
  margin: 0;
  display: flex;
  justify-content: center;
  color: #8a6b42;
  font-size: max(12px, calc(var(--u) * 13.4));
  font-weight: 600;
  letter-spacing: .01em;
  animation: plFadeUp calc(.7s * var(--pl-pace)) ease-out calc(2.2s * var(--pl-pace)) both;
}

.pl-tagline {
  margin: calc(var(--u) * 58) 0 0;
  padding-left: .14em; /* balances trailing letter-spacing so the line is optically centred */
  color: var(--pl-ink);
  font-size: max(12px, calc(var(--u) * 15.7));
  font-weight: 600;
  letter-spacing: .14em;
  line-height: .7;
  text-align: center;
  white-space: nowrap;
  animation: plFadeUp calc(.7s * var(--pl-pace)) ease-out calc(2.8s * var(--pl-pace)) both;
}
@media (max-width: 400px) {
  .pl-tagline { letter-spacing: .09em; padding-left: .09em; }
}
.pl-swash {
  display: block;
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 12);
  margin-top: calc(var(--u) * 20);
  overflow: visible;
}
.pl-swash path {
  stroke-dasharray: 60;
  animation: plDraw calc(.6s * var(--pl-pace)) ease-out calc(2.9s * var(--pl-pace)) both;
}

/* Exit: the whole sheet rises like a curtain, trailing a gold hairline */
.preloader::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--pl-gold); opacity: 0; transition: opacity .2s ease;
}
.preloader.is-leaving { transform: translateY(-100%); pointer-events: none; }
.preloader.is-leaving::after { opacity: 1; }
.preloader.is-leaving .pl-stage { opacity: 0; transform: translateY(-4vh); }

@keyframes plFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes plPatternIn {
  from { opacity: 0; clip-path: inset(100% 0 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes plMaskUp {
  from { clip-path: inset(100% -10% -10% -10%); }
  to { clip-path: inset(-10% -10% -10% -10%); }
}
@keyframes plRise { from { transform: translateY(18%); } to { transform: translateY(0); } }
@keyframes plSheen { from { transform: translateX(0); } to { transform: translateX(200px); } }
@keyframes plFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes plWipeRight {
  from { clip-path: inset(-20% 100% -20% -5%); }
  to { clip-path: inset(-20% -5% -20% -5%); }
}
@keyframes plLetter {
  from { opacity: 0; transform: translateX(calc((4.5 - var(--i)) * .55em)); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes plDraw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }

/* Reduced motion: no movement — the finished artwork fades in, holds, then fades out */
@media (prefers-reduced-motion: reduce) {
  .preloader * { animation-duration: 1ms !important; animation-delay: 0s !important; }
  .preloader .pl-stage { animation: plFade .5s ease-out both !important; }
  html.pl-active .preloader { transition: opacity .45s ease; }
  .preloader.is-leaving { transform: none; opacity: 0; }
  .preloader.is-leaving .pl-stage { transform: none; }
}

@media print { html.pl-active .preloader { display: none; } }