/* Purple 7 — Cinematic scroll hero. Three.js globe + GSAP/ScrollTrigger + Lenis.
   The hero is a tall scroll track (#hero-scroll) with a pinned sticky stage. */

#hero-scroll { position: relative; }
#hero-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; width: 100%;
  overflow: hidden; background: #000;
}

/* --- Three.js canvas (stars + globe) --- */
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }

/* CSS starfield fallback + ambient purple bloom behind everything */
#hero-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 50% at 50% 42%, rgba(133,46,143,0.18), transparent 60%),
    radial-gradient(100% 100% at 50% 120%, rgba(92,30,100,0.22), transparent 55%),
    #000;
}
#hero-vignette {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* --- Stage 1: copy layer (centered, restrained) --- */
.hero-copy {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 96px 24px; will-change: transform, opacity, filter;
}
/* localized dark glow behind the text only — keeps every line legible over the globe */
.hero-copy::before {
  content: ""; position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%);
  width: min(920px, 94vw); height: min(660px, 82vh); z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(6,4,6,0.78) 0%, rgba(6,4,6,0.55) 42%, rgba(6,4,6,0.2) 66%, transparent 78%);
}
.hero-copy-inner { max-width: 720px; display: flex; flex-direction: column; align-items: center; }
.hero-mark {
  font: 500 11px/1 var(--font-body); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent-bright); display: flex; align-items: center; gap: 14px; margin-bottom: 34px;
  opacity: 0;
}
.eyebrow-line { width: 30px; height: 1px; background: var(--accent); display: inline-block; opacity: 0.7; }

.hero-h {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 5vw, 74px); line-height: 1.03; letter-spacing: -0.02em;
  margin: 0;
}
.hero-h .line { display: block; overflow: hidden; }
.hero-h .line > span { display: block; will-change: transform; }
.hero-h .accentword { color: var(--accent-bright); }

.hero-sub {
  margin: 26px auto 0; max-width: 50ch; opacity: 0;
  font: 300 clamp(14px,1.3vw,17px)/1.65 var(--font-body); color: var(--text-2);
}
.hero-actions { margin-top: 40px; display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; opacity: 0; }
.hero-explore { padding: 15px 32px; }
.btn-text-arrow { margin-top: 22px; font: 500 12px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); transition: color 0.3s; opacity: 0; }
.btn-text-arrow:hover { color: #fff; }
#hero-scroll.static-hero .btn-text-arrow { opacity: 1; }

.hero-scrollcue {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 400 10px/1 var(--font-body); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-3);
  opacity: 0;
}
.hero-scrollcue .rail { width: 1px; height: 46px; background: rgba(255,255,255,0.14); position: relative; overflow: hidden; }
.hero-scrollcue .rail::after {
  content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%;
  background: linear-gradient(var(--accent-bright), transparent);
  animation: cuefall 2.2s cubic-bezier(0.7,0,0.3,1) infinite;
}
@keyframes cuefall { 0%{transform:translateY(0)} 100%{transform:translateY(300%)} }

/* --- Stage captions (as camera flies) --- */
.hero-caption {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 6;
  text-align: center; pointer-events: none; opacity: 0; will-change: opacity, transform;
}
.hero-caption .k { font: 400 11px/1 var(--font-body); letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 16px; }
.hero-caption .v { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px,4vw,56px); letter-spacing: -0.02em; }

/* --- Stages 5–6: Dubai stylized map layer --- */
#dubai-layer {
  position: absolute; inset: 0; z-index: 4; opacity: 0; visibility: hidden;
  background:
    radial-gradient(80% 70% at 60% 40%, rgba(133,46,143,0.10), transparent 60%),
    linear-gradient(160deg, #0a0710 0%, #05040a 70%, #030205 100%);
  will-change: opacity;
}
#dubai-map { position: absolute; inset: 0; width: 100%; height: 100%; }
#dubai-map svg { width: 100%; height: 100%; display: block; }
.map-head {
  position: absolute; left: clamp(24px,5vw,80px); top: clamp(90px,12vh,120px); z-index: 6; max-width: 30ch;
  text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}
.map-head .eyebrow { margin-bottom: 16px; }
.map-head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px,3.4vw,48px); letter-spacing: -0.02em; line-height: 1.02; }
.map-head p { color: var(--text-2); font-size: 14.5px; margin-top: 14px; max-width: 34ch; }

/* Community markers */
.marker {
  position: absolute; transform: translate(-50%,-50%); z-index: 7;
  width: 14px; height: 14px; opacity: 0;
}
.marker .dot {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--accent-bright); box-shadow: 0 0 0 4px rgba(169,77,180,0.18), 0 0 18px 3px var(--accent-glow);
}
.marker .ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent-bright);
  animation: mpulse 2.6s ease-out infinite;
}
@keyframes mpulse { 0%{transform:scale(1);opacity:0.8} 100%{transform:scale(3.4);opacity:0} }
.marker .mlabel {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font: 400 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); text-shadow: 0 1px 8px #000; pointer-events: none;
  transition: color 0.3s;
}
.marker:hover { z-index: 20; }
.marker:hover .mlabel { color: #fff; }

/* Glass info card on hover */
.marker .glass {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(8px);
  width: 250px; opacity: 0; pointer-events: none; transition: opacity 0.32s cubic-bezier(0.22,1,0.36,1), transform 0.32s cubic-bezier(0.22,1,0.36,1);
  background: rgba(16,10,20,0.62); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px; overflow: hidden; -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.8), 0 0 40px -14px var(--accent-glow);
}
.marker:hover .glass, .marker:focus-within .glass { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.marker .glass .ph { height: 120px; min-height: 0; }
.marker .glass .gbody { padding: 16px 16px 18px; }
.marker .glass h3 { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.marker .glass .grow { display: flex; justify-content: space-between; margin: 12px 0 14px; color: var(--text-2); font-size: 12.5px; }
.marker .glass .grow b { display: block; color: #fff; font-weight: 500; font-size: 15px; margin-top: 3px; font-family: var(--font-display); }
.marker .glass .glabel { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.marker .glass a.gbtn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 11px; border-radius: 999px; background: var(--accent); color: #fff;
  font: 500 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.3s;
}
.marker .glass a.gbtn:hover { background: var(--accent-bright); }

.map-legend {
  position: absolute; right: clamp(24px,5vw,80px); bottom: clamp(40px,8vh,64px); z-index: 6;
  display: flex; gap: 28px; opacity: 0.9; text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}
.map-legend .li { color: var(--text-3); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.map-legend .li b { display: block; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 22px; margin-top: 8px; letter-spacing: -0.01em; }

/* --- Mobile / reduced-motion fallback: static hero --- */
#hero-scroll.static-hero { height: auto; }
#hero-scroll.static-hero #hero-stage { position: relative; height: 100vh; height: 100svh; min-height: 620px; }
#hero-scroll.static-hero .hero-copy { opacity: 1 !important; }
#hero-scroll.static-hero .hero-mark,
#hero-scroll.static-hero .hero-sub,
#hero-scroll.static-hero .hero-actions,
#hero-scroll.static-hero .hero-stat,
#hero-scroll.static-hero .hero-scrollcue { opacity: 1; }
#hero-scroll.static-hero .hero-h .line > span { transform: none !important; }
#hero-scroll.static-hero #dubai-layer,
#hero-scroll.static-hero .hero-caption { display: none; }

@media (max-width: 900px) {
  .map-head { top: 80px; }
  .marker .mlabel { display: none; }
}

/* --- Mapbox container + markers (live map path) --- */
#mapbox-container { position: absolute; inset: 0; z-index: 1; }
#mapbox-container:empty { display: none; }
.mapboxgl-ctrl-logo, .mapboxgl-ctrl-attrib { opacity: 0.25; }
.mb-marker { position: relative; width: 14px; height: 14px; cursor: pointer; }
.mb-marker .dot { position: absolute; inset: 0; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 4px rgba(169,77,180,0.18), 0 0 18px 3px var(--accent-glow); }
.mb-marker .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent-bright); animation: mpulse 2.6s ease-out infinite; }
.mb-marker .mlabel { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 400 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.8); text-shadow: 0 1px 8px #000; }

/* --- Community panel flyout --- */
#cp-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 0.4s; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
body.panel-open #cp-scrim { opacity: 1; pointer-events: auto; }
#community-panel {
  position: fixed; top: 0; right: 0; z-index: 301; height: 100vh; width: min(460px, 92vw);
  background: rgba(12,8,16,0.86); border-left: 1px solid rgba(255,255,255,0.1);
  -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
  box-shadow: -40px 0 80px -30px rgba(0,0,0,0.9);
  transform: translateX(100%); transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column; overflow: hidden;
}
#community-panel.open { transform: none; }
.cp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: clamp(28px,4vw,44px) clamp(24px,3vw,36px) 22px; border-bottom: 1px solid var(--line); }
.cp-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px,3vw,34px); letter-spacing: -0.02em; }
.cp-sub { color: var(--accent-bright); font: 400 12px/1 var(--font-body); letter-spacing: 0.06em; margin-top: 12px; }
.cp-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--text-2); font-size: 15px; transition: all 0.3s; flex: none; }
.cp-close:hover { background: rgba(255,255,255,0.07); color: #fff; border-color: rgba(255,255,255,0.3); }
.cp-listings { flex: 1; overflow-y: auto; padding: 24px clamp(24px,3vw,36px) 40px; display: flex; flex-direction: column; gap: 18px; }
.cp-loading { color: var(--text-3); font-size: 14px; padding: 20px 0; }
.cp-card { display: block; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card-bg); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.4s; }
.cp-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.18); }
.cp-card .ph { height: 150px; min-height: 0; }
.cp-cbody { padding: 16px 18px 18px; }
.cp-ctype { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.cp-cspecs { color: var(--text-2); font-size: 12.5px; margin: 8px 0 12px; }
.cp-cprice { font: 600 18px/1 var(--font-display); }
.cp-all { width: 100%; justify-content: center; margin-top: 4px; }