/* ============================================================
   Varghese Luxury — Preloader
   Palette: white ground + golden line-art
   ============================================================ */

:root {
  /* Palette lifted from the Varghese Luxury poster */
  --pl-bg-1: #14375c;        /* deep royal blue (center of the glow) */
  --pl-bg-2: #0a1f38;        /* darker navy */
  --pl-bg-3: #040c18;        /* near-black blue edges */

  --pl-gold: #d9b45a;        /* primary metallic gold */
  --pl-gold-bright: #f6e6b4; /* gold highlight */
  --pl-gold-deep: #8a5a1e;   /* dark bronze / gold shadow */

  --pl-cream: #f2e7cf;       /* parchment / brand text */
  --pl-ink: #f2e7cf;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  background: var(--pl-bg-2);
  color: var(--pl-ink);
}

/* ---------- Preloader shell ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, var(--pl-bg-1) 0%, var(--pl-bg-2) 45%, var(--pl-bg-3) 100%);
  transition: opacity .6s ease, visibility .6s ease;
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
}

.preloader__inner {
  width: min(440px, 82vw);
  text-align: center;
}

/* ---------- Building mark ---------- */
.preloader__mark {
  width: 220px;
  height: auto;
  display: block;
  margin: 0 auto 6px;
  overflow: visible;
  filter: drop-shadow(0 0 10px rgba(217, 180, 90, .35));
}

.pl-gold  { stroke: var(--pl-gold); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pl-dark  { stroke: var(--pl-gold-bright); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* draw-in animation for outline paths */
.pl-draw {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: pl-draw 1.6s ease forwards;
}
.pl-line {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: pl-draw 1s ease forwards;
}
.pl-ground {
  stroke-width: 4;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: pl-draw 1.1s ease .2s forwards;
}

.pl-line:nth-of-type(1) { animation-delay: .35s; }
.pl-line:nth-of-type(2) { animation-delay: .5s; }
.pl-line:nth-of-type(3) { animation-delay: .65s; }
.pl-line:nth-of-type(4) { animation-delay: .8s; }

@keyframes pl-draw {
  to { stroke-dashoffset: 0; }
}

/* ---------- Brand text ---------- */
.preloader__brand {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: .42em;
  text-indent: .42em;
  background: linear-gradient(180deg, var(--pl-gold-bright) 0%, var(--pl-gold) 45%, var(--pl-gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.preloader__sub {
  margin-top: 12px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--pl-cream);
}

/* ---------- Progress bar ---------- */
.preloader__bar {
  position: relative;
  width: 100%;
  height: 4px;
  margin: 26px auto 14px;
  background: rgba(217, 180, 90, .16);
  border-radius: 2px;
  overflow: hidden;
}

.preloader__bar span {
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--pl-gold-deep), var(--pl-gold) 55%, var(--pl-gold-bright));
  box-shadow: 0 0 12px rgba(246, 230, 180, .5);
  transition: right .25s ease;
}

.preloader__pct {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .06em;
  color: var(--pl-gold-bright);
}

/* ---------- Revealed site ---------- */
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  background: var(--pl-bg-2);
  color: var(--pl-cream);
}

.site h1 {
  font-family: "Cormorant Garamond", serif;
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--pl-gold);
}

@media (prefers-reduced-motion: reduce) {
  .pl-draw, .pl-line, .pl-ground { animation: none; stroke-dashoffset: 0; }
}