:root{
  --night-900:#0a0d1c;
  --night-800:#12162c;
  --night-700:#1b2140;
  --gold:#c9a15a;
  --gold-bright:#f0d29a;
  --wine:#6f1d2b;
  --turquoise:#2f8f8a;
  --ivory:#f3e9d6;
  --ivory-dim:rgba(243,233,214,0.6);
  --mx:50%;
  --my:40%;
  --tilt-y:0deg;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:var(--night-900);
  overflow:hidden;
}

body{
  font-family:'Vazirmatn','Noto Naskh Arabic',serif;
  color:var(--ivory);
}

body.lang-en{
  font-family:'Cormorant Garamond', serif;
}

.stage{
  position:relative;
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}

/* ---------- background layers ---------- */

.bg-base{
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--night-700) 0%, var(--night-900) 55%),
    linear-gradient(180deg, var(--night-900) 0%, #05060d 100%);
  z-index:0;
}

/* Gabbeh-rug motif tile: central diamond medallion, a stylized quadruped (goat),
   a small tree-of-life, and scattered accent diamonds — drawn in the bold,
   asymmetric, hand-knotted style characteristic of Gabbeh rugs. */
.bg-pattern{
  position:absolute;
  inset:-8%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23c9a15a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M100 40 L140 100 L100 160 L60 100 Z'/%3E%3Cpath d='M100 62 L120 100 L100 138 L80 100 Z'/%3E%3Ccircle cx='100' cy='100' r='5' fill='%23c9a15a' stroke='none'/%3E%3Cpath d='M28 26 L20 16 M28 26 L36 16 M28 26 L28 46 M20 46 L20 62 M36 46 L36 62 M14 46 L24 46 L28 26 L32 46 L42 46'/%3E%3Cpath d='M170 138 L170 180 M170 148 L158 138 M170 148 L182 138 M170 160 L155 149 M170 160 L185 149 M170 172 L160 163 M170 172 L180 163'/%3E%3Ccircle cx='158' cy='138' r='2.5' fill='%23c9a15a' stroke='none'/%3E%3Ccircle cx='182' cy='138' r='2.5' fill='%23c9a15a' stroke='none'/%3E%3Cpath d='M172 28 L182 38 L172 48 L162 38 Z'/%3E%3Cpath d='M28 168 L36 176 L28 184 L20 176 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:210px 210px;
  opacity:0.20;
  transform:translate3d(calc(var(--mx) * 0.02), calc(var(--my) * 0.02), 0) rotate(0deg);
  transition:transform 0.4s ease-out;
  z-index:1;
  mix-blend-mode:screen;
}

.bg-pattern.layer-2{
  background-size:430px 430px;
  opacity:0.12;
  transform:translate3d(calc(var(--mx) * -0.035), calc(var(--my) * -0.035), 0) rotate(6deg);
}

.spotlight{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(circle at var(--mx) var(--my), rgba(201,161,90,0.24) 0%, rgba(201,161,90,0.09) 22%, rgba(201,161,90,0) 45%);
  mix-blend-mode:soft-light;
  transition:background 0.15s ease-out;
}

.vignette{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%, transparent 45%, rgba(5,6,13,0.75) 100%);
}

/* ---------- language toggle ---------- */

.lang-toggle{
  position:absolute;
  top:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  display:flex;
  gap:2px;
  padding:4px;
  border:1px solid rgba(201,161,90,0.35);
  border-radius:999px;
  background:rgba(10,13,28,0.55);
  backdrop-filter:blur(6px);
}

.lang-toggle button{
  font-family:'Vazirmatn', sans-serif;
  font-size:13px;
  letter-spacing:0.04em;
  padding:7px 18px;
  border-radius:999px;
  border:none;
  background:transparent;
  color:var(--ivory-dim);
  cursor:pointer;
  transition:background 0.3s, color 0.3s;
}

.lang-toggle button.active{
  background:linear-gradient(135deg, var(--gold), #a67c3d);
  color:#1a1305;
  font-weight:600;
}

.lang-toggle button:focus-visible{
  outline:2px solid var(--turquoise);
  outline-offset:2px;
}

/* ---------- content ---------- */

.content{
  position:relative;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 24px;
  max-width:920px;
}

.eyebrow{
  font-family:'Noto Naskh Arabic', serif;
  font-weight:600;
  font-size:clamp(20px, 2.6vw, 30px);
  letter-spacing:0.1em;
  color:var(--gold-bright);
  margin:0 0 6px 0;
  opacity:0.94;
}

body.lang-en .eyebrow{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:0.32em;
}

.eyebrow-rule{
  width:120px;
  height:1px;
  margin:0 auto 46px auto;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0.6;
}

.hotels{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(24px, 5vw, 64px);
}

.hotel-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.hotel-name{
  font-family:'Noto Naskh Arabic', serif;
  font-weight:700;
  font-size:clamp(27px, 4.4vw, 46px);
  margin:0;
  color:var(--ivory);
  letter-spacing:0;
  line-height:1.35;
  text-shadow:0 0 24px rgba(201,161,90,0.25);
}

body.lang-en .hotel-name{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-size:clamp(20px, 3.2vw, 32px);
}

.hotel-sub{
  font-family:'Vazirmatn', sans-serif;
  font-size:12px;
  letter-spacing:0.22em;
  color:var(--ivory-dim);
  text-transform:uppercase;
}

body:not(.lang-en) .hotel-sub{
  letter-spacing:0.06em;
}

.stars{
  display:flex;
  gap:6px;
}

.stars svg{
  width:15px;
  height:15px;
  filter:drop-shadow(0 0 4px rgba(201,161,90,0.5));
}

.divider-ornament{
  width:clamp(46px, 6vw, 74px);
  height:clamp(46px, 6vw, 74px);
  flex-shrink:0;
  transform:rotate(var(--tilt-y));
  transition:transform 0.5s ease-out;
  opacity:0.85;
}

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

@media (max-width: 720px){
  .hotels{
    flex-direction:column;
    gap:28px;
  }
  .divider-ornament{
    transform:rotate(45deg);
    width:40px;
    height:40px;
  }
  .lang-toggle{
    top:18px;
  }
}

@media (prefers-reduced-motion: reduce){
  .bg-pattern, .divider-ornament, .spotlight{
    transition:none !important;
  }
}