/* ==========================================================================
   Khafila Real Estate — coming soon
   Palette is lifted from the logo artwork itself (deep green + burnished gold)
   rather than a generic scheme, so the page and the mark read as one object.
   ========================================================================== */

:root {
  /* Brand */
  --ink:        #04090c;   /* backdrop, sampled from the logo plate */
  --ink-deep:   #020507;
  --green:      #062017;
  --green-lift: #0b3d24;
  --gold-hi:    #f6e3ac;
  --gold:       #d4af61;
  --gold-mid:   #c39b4b;
  --gold-low:   #8a6a2c;

  --text:       #e8dcc0;
  --text-dim:   #a2977f;

  /* Space — marketing page, so on the generous side */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-mid:  320ms;

  /* Live tilt values, written by main.js */
  --rx: 0deg;
  --ry: 0deg;
  --gloss: 50%;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--text);
  /* Cinzel is the face the logo's wordmark is cut in, so the whole page is set
     in it — Amiri carries the Arabic, matching the naskh in the lockup. */
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  /* Two soft pools of light: emerald from below, gold behind the crest. */
  background-image:
    radial-gradient(58% 45% at 50% 38%, rgba(212, 175, 97, 0.10), transparent 70%),
    radial-gradient(75% 55% at 50% 108%, rgba(11, 61, 36, 0.55), transparent 72%);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 4px;
}

/* --- Atmosphere ---------------------------------------------------------- */

#motes {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.72) 100%);
}

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1.25rem, 5vw, 4rem);
  padding-top: max(clamp(1rem, 2.5vw, 1.75rem), env(safe-area-inset-top));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.brand:hover { opacity: 0.82; }

.brand__crest {
  width: auto;
  height: clamp(38px, 5.2vw, 52px);
  filter: drop-shadow(0 2px 10px rgba(212, 175, 97, 0.28));
}

.brand__text { display: grid; gap: 2px; }

.brand__name {
  font-weight: 600;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-low));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand__sub {
  font-size: clamp(0.56rem, 1vw, 0.66rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --- Stage --------------------------------------------------------------- */

.stage {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3.5vh, 2.5rem);
  padding: var(--s-3) clamp(1.25rem, 5vw, 4rem) var(--s-4);
  text-align: center;
}

/* The 3D shell. Perspective lives here so the logo and its reflection share
   one camera. */
.scene {
  perspective: 1300px;
  perspective-origin: 50% 45%;
  position: relative;
  /* Driven off height, then clamped by width, so the mark always fits the
     viewport's *short* axis — a tall logo on a laptop is a height problem.
     1.3456 is the logo's own 1211/900 ratio. */
  height: min(46svh, calc(80vw * 1.3456), 520px);
  aspect-ratio: 900 / 1211;
  width: auto;
}

.logo3d {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--rx))
    rotateY(var(--ry))
    translateZ(0);
  animation: drift 11s ease-in-out infinite;
  will-change: transform;
}

/* Idle motion — a slow hover *and* a lazy yaw. The yaw matters: head-on, an
   extrusion is invisible, so the mark needs to be turned slightly off-axis at
   all times for the depth to read. */
@keyframes drift {
  0%, 100% { translate: 0 -0.6%; rotate: 0 1 0 -10deg; }
  50%      { translate: 0 0.6%;  rotate: 0 1 0 10deg; }
}

.logo3d__face,
.logo3d__side {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.logo3d__face {
  position: relative;
  filter:
    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 44px rgba(212, 175, 97, 0.20));
}

/* Extruded sides: the logo's own alpha, filled flat and stacked backwards in
   Z. Masks are cheaper than 14 filtered copies of the bitmap. */
.logo3d__side {
  background: var(--side-tint, #6b511f);
  -webkit-mask-image: url("assets/khafila-logo.png");
  mask-image: url("assets/khafila-logo.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Travelling specular highlight, clipped to the logo silhouette. */
.logo3d__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.75;
  background: linear-gradient(
    100deg,
    transparent 38%,
    rgba(255, 246, 214, 0.55) 47%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 246, 214, 0.55) 53%,
    transparent 62%
  );
  background-size: 260% 100%;
  background-position: var(--gloss) 0;
  -webkit-mask-image: url("assets/khafila-logo.png");
  mask-image: url("assets/khafila-logo.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation: sweep 6.5s ease-in-out infinite;
}

@keyframes sweep {
  0%, 12%  { background-position: 150% 0; }
  62%, 100% { background-position: -50% 0; }
}

/* Floor bounce — a flipped, blurred ghost that grounds the object. */
.reflection {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 42%;
  overflow: hidden;
  pointer-events: none;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scaleY(-1);
  transform-origin: top center;
  opacity: 0.16;
  filter: blur(7px);
  -webkit-mask-image: linear-gradient(to top, transparent 8%, #000 92%);
  mask-image: linear-gradient(to top, transparent 8%, #000 92%);
}
.reflection img {
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* --- Copy ---------------------------------------------------------------- */

.copy { display: grid; justify-items: center; gap: var(--s-2); }

.copy__title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(1.9rem, 7vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold-hi) 4%, var(--gold) 48%, var(--gold-low) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 34px rgba(212, 175, 97, 0.18);
}

.rule {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: min(78vw, 340px);
}
.rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-mid));
}
.rule span:last-child { background: linear-gradient(90deg, var(--gold-mid), transparent); }
.rule i {
  width: 7px;
  height: 7px;
  rotate: 45deg;
  background: var(--green-lift);
  border: 1px solid var(--gold);
}

/* A full sentence, so it gets sentence treatment: measured line length and
   open leading. Cinzel's lowercase are small caps, which suits a short brand
   line but needs the extra line-height to stay readable. */
.copy__tagline {
  margin: 0;
  max-width: 44ch;
  font-weight: 400;
  font-size: clamp(0.92rem, 2.3vw, 1.05rem);
  line-height: 1.85;
  letter-spacing: 0.06em;
  text-wrap: balance;
  color: var(--text);
  opacity: 0.88;
}

.copy__ar {
  margin: 0;
  font-family: "Amiri", "Geeza Pro", serif;
  font-size: clamp(1.05rem, 3.6vw, 1.45rem);
  color: var(--gold);
  opacity: 0.92;
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  position: relative;
  z-index: 3;
  padding: var(--s-2) clamp(1.25rem, 5vw, 4rem);
  padding-bottom: max(var(--s-2), env(safe-area-inset-bottom));
  text-align: center;
}
.site-footer p {
  margin: 0;
  font-size: 0.68rem;
  /* Tracking tightens on narrow screens so the line stays unwrapped. */
  letter-spacing: clamp(0.1em, 0.6vw, 0.22em);
  text-transform: uppercase;
  /* No opacity knocked on top — at 0.75 this fell to 4.28:1, under AA. */
  color: var(--text-dim);
}

/* --- Entrance ------------------------------------------------------------ */

/* Everything starts hidden and is released once main.js has built the
   extrusion, so the first frame is never a flat, half-assembled logo. */
.is-loading .scene,
.is-loading .copy > * ,
.is-loading .site-header,
.is-loading .site-footer { opacity: 0; }

.is-ready .site-header,
.is-ready .site-footer,
.is-ready .scene,
.is-ready .copy > * {
  animation: rise 900ms var(--ease-out) backwards;
}
.is-ready .scene      { animation-delay: 80ms; }
.is-ready .copy__title{ animation-delay: 420ms; }
.is-ready .rule       { animation-delay: 520ms; }
.is-ready .copy__tagline { animation-delay: 600ms; }
.is-ready .copy__ar   { animation-delay: 680ms; }
.is-ready .site-header{ animation-delay: 240ms; }
.is-ready .site-footer{ animation-delay: 760ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* --- Responsive ---------------------------------------------------------- */

/* Keep the copyright on one line on the narrowest phones. */
@media (max-width: 430px) {
  .site-footer p { font-size: 0.58rem; letter-spacing: 0.08em; }
}

@media (min-width: 1024px) {
  .stage { gap: clamp(1.5rem, 4vh, 3rem); }
  .scene { height: min(52svh, calc(42vw * 1.3456), 560px); }
}

/* Short landscape phones: stand the layout up side-by-side rather than let the
   logo eat the whole viewport. */
@media (max-height: 620px) and (orientation: landscape) {
  .stage { flex-direction: row; justify-content: center; gap: clamp(2rem, 6vw, 4rem); }
  .scene { height: min(74svh, calc(34vw * 1.3456), 340px); }
  .copy  { justify-items: start; text-align: left; }
  .rule  { width: min(40vw, 280px); }
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  /* Keep the off-axis pose — that is what makes the depth legible — but hold
     it still. */
  .logo3d { animation: none; rotate: 0 1 0 -7deg; }
  .logo3d__sheen { animation: none; background-position: 50% 0; opacity: 0.35; }
  .is-ready .site-header,
  .is-ready .site-footer,
  .is-ready .scene,
  .is-ready .copy > * { animation: none; opacity: 1; transform: none; }
  #motes { display: none; }
  * { transition-duration: 1ms !important; }
}