/* Mona Lisa Spa Ajman - temporary coming-soon page.
   Replace index.html / style.css / script.js when the full site launches. */

:root {
  --black: #0d0b0a;
  --charcoal: #1b1816;
  --gold: #c9a24d;
  --gold-light: #ecd391;
  --gold-deep: #9a7530;
  --beige: #d8c3a0;
  --cream: #f6eddc;
  --serif: "Cormorant Garamond", "Palatino Linotype", Georgia, serif;
  --sans: "Montserrat", "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.22, .72, .2, 1);
  --intro: .9s; /* delay before content reveals, after the veil lifts */
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--black); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  overflow: hidden;
}

/* ---------- Intro veil (never blocks: pointer-events none, auto-fades) ---------- */
.veil {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--black);
  pointer-events: none;
  animation: veil-out .9s ease .35s forwards;
}
@keyframes veil-out { to { opacity: 0; visibility: hidden; } }

/* ---------- Scene ---------- */
.scene { position: fixed; inset: 0; overflow: hidden; z-index: 0; }

.scene__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 60% 45%;
  animation: kenburns 38s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.2) translate3d(-2.2%, -1.6%, 0); }
}

.scene__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13,11,10,.55) 0%, rgba(13,11,10,.32) 45%, rgba(13,11,10,.7) 100%),
    radial-gradient(ellipse at center, rgba(13,11,10,.05) 0%, rgba(13,11,10,.4) 100%);
}

.scene__glow {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,77,.2) 0%, rgba(201,162,77,.07) 35%, transparent 65%);
  filter: blur(20px);
  mix-blend-mode: screen;
  will-change: transform;
}
.scene__glow--a { top: -25vmax; left: -15vmax; animation: drift-a 26s ease-in-out infinite alternate; }
.scene__glow--b {
  bottom: -30vmax; right: -20vmax;
  background: radial-gradient(circle, rgba(236,211,145,.14) 0%, rgba(201,162,77,.05) 38%, transparent 65%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(22vmax, 14vmax, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-20vmax, -12vmax, 0) scale(1.1); } }

/* slow diagonal band of light */
.scene__sweep {
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  background: linear-gradient(90deg, transparent, rgba(236,211,145,.07), transparent);
  transform: rotate(18deg);
  animation: sweep 16s ease-in-out 2s infinite;
  will-change: transform;
}
@keyframes sweep { 0% { transform: translateX(0) rotate(18deg); } 60%, 100% { transform: translateX(420%) rotate(18deg); } }

.scene__particles { position: absolute; inset: 0; width: 100%; height: 100%; }

.scene__vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 18vmin 4vmin rgba(0,0,0,.65);
}

/* ---------- Layout ---------- */
.stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}

.card {
  position: relative;
  width: min(100%, 920px);
  padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 64px);
  text-align: center;
  border: 1px solid rgba(201,162,77,.28);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(246,237,220,.07), rgba(246,237,220,.015));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(246,237,220,.08);
  animation: card-in 1.2s var(--ease) var(--intro) both, card-glow 7s ease-in-out 2.5s infinite alternate;
}
/* corner accents */
.card::before, .card::after {
  content: "";
  position: absolute;
  width: 34px; height: 34px;
  border: 1px solid var(--gold);
  opacity: .8;
}
.card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.card::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }

@keyframes card-in { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes card-glow {
  from { box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 rgba(201,162,77,0), inset 0 1px 0 rgba(246,237,220,.08); }
  to   { box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 46px rgba(201,162,77,.16), inset 0 1px 0 rgba(246,237,220,.08); }
}

/* ---------- Brand ---------- */
.brand {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(.78rem, 2.4vw, 1rem);
  letter-spacing: .5em;
  text-transform: uppercase;
  padding-left: .5em; /* balance trailing letter-spacing */
  animation: rise .9s var(--ease) calc(var(--intro) + .2s) both;
}
.brand__text,
.shimmer {
  background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold-light) 25%, var(--gold) 45%, var(--gold-light) 60%, var(--gold-deep) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* ---------- Ornament ---------- */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: clamp(18px, 3vw, 28px) auto;
  animation: rise .9s var(--ease) calc(var(--intro) + .4s) both;
}
.ornament i {
  display: block;
  height: 1px;
  width: clamp(46px, 12vw, 96px);
  background: linear-gradient(90deg, transparent, var(--gold));
  transform-origin: right center;
  animation: line-grow 1.2s var(--ease) calc(var(--intro) + .5s) both;
}
.ornament i:last-child { background: linear-gradient(270deg, transparent, var(--gold)); transform-origin: left center; }
.ornament b {
  width: 8px; height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(201,162,77,.8);
  animation: pulse-gem 3.6s ease-in-out infinite;
}
@keyframes line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pulse-gem { 0%,100% { opacity: .75; box-shadow: 0 0 8px rgba(201,162,77,.5); } 50% { opacity: 1; box-shadow: 0 0 18px rgba(236,211,145,.9); } }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(18px, 3vw, 26px);
  padding: 9px 22px 9px 20px;
  border: 1px solid rgba(201,162,77,.6);
  border-radius: 999px;
  background: rgba(13,11,10,.45);
  color: var(--gold-light);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .38em;
  text-transform: uppercase;
  cursor: default;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  animation: scale-in .9s cubic-bezier(.34, 1.4, .5, 1) calc(var(--intro) + .6s) both, badge-glow 4.5s ease-in-out 2.6s infinite;
}
.badge:hover { transform: scale(1.06); border-color: var(--gold-light); box-shadow: 0 0 28px rgba(201,162,77,.4); }
.badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 0 0 rgba(236,211,145,.6);
  animation: ping 2.6s ease-out infinite;
}
@keyframes scale-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes badge-glow { 0%,100% { box-shadow: 0 0 0 rgba(201,162,77,0); } 50% { box-shadow: 0 0 24px rgba(201,162,77,.3); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(236,211,145,.6); } 70%,100% { box-shadow: 0 0 0 10px rgba(236,211,145,0); } }

/* ---------- Heading (words split by script.js; plain text if JS is off) ---------- */
.title {
  margin: 0 0 clamp(14px, 2.5vw, 22px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 8.5vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: .01em;
  color: var(--cream);
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.title .word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em; margin-bottom: -.12em; }
.title .word > span {
  display: inline-block;
  animation: word-in 1.1s var(--ease) calc(var(--intro) + .75s + var(--i) * .14s) both;
}
.title .word:last-child > span {
  background: linear-gradient(100deg, var(--gold-light) 0%, var(--cream) 30%, var(--gold) 55%, var(--gold-light) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: word-in 1.1s var(--ease) calc(var(--intro) + .75s + var(--i) * .14s) both, shimmer 7s linear 3s infinite;
}
@keyframes word-in { from { opacity: 0; transform: translate3d(0, 105%, 0); } to { opacity: 1; transform: none; } }

.lead {
  max-width: 34em;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.9vw, 1.5rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--beige);
  animation: rise 1s var(--ease) calc(var(--intro) + 1.55s) both;
}

@keyframes rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }

/* ---------- Footer ---------- */
.foot {
  position: absolute;
  left: 0; right: 0;
  bottom: max(14px, env(safe-area-inset-bottom));
  text-align: center;
  animation: rise 1s var(--ease) calc(var(--intro) + 2s) both;
}
.foot p {
  margin: 0;
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(216,195,160,.6);
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  .brand { letter-spacing: .32em; padding-left: .32em; }
  .badge { letter-spacing: .3em; padding: 8px 18px; }
  .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(13,11,10,.42); }
  .scene__sweep, .scene__glow--b { display: none; }
  .scene__image { animation-duration: 30s; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .stage { justify-content: flex-start; padding-top: 18px; padding-bottom: 54px; }
  .card { padding: 22px 28px; }
  .title { font-size: clamp(2rem, 7vh, 3rem); }
  body { overflow-y: auto; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .scene__image { transform: scale(1.06); }
  .scene__sweep { display: none; }
}