/* ==========================================================================
   PUPASEE — World (globe experience)
   One file. No overrides, no patches — edit here directly.
   ========================================================================== */

.world-hero{
  position:relative;
  min-height:calc(100vh - 78px);
  display:grid;
  grid-template-columns:1fr 1.15fr;
  align-items:center;
  gap:24px;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 15% 20%, rgba(201,144,63,0.08), transparent 60%),
    var(--ink-950);
}

.world-copy{
  position:relative;
  z-index:2;
  padding:64px 0 64px 28px;
  max-width:520px;
}
.world-copy h1{
  font-size:clamp(32px, 4vw, 52px);
  line-height:1.08;
  margin:12px 0 18px;
}
.world-copy .lede{
  color:var(--sand-200);
  opacity:0.85;
  font-size:16px;
  margin-bottom:32px;
}

/* ---------- World controls ---------- */
.world-controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:28px;
}
.world-ctrl-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  min-height:44px;
  background:rgba(233,224,210,0.03);
  border:1px solid var(--line-strong);
  border-radius:2px;
  color:var(--sand-200);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.world-ctrl-btn:hover{border-color:var(--amber-400); color:var(--amber-400);}
.world-ctrl-btn.active{background:var(--amber-500); border-color:var(--amber-500); color:var(--ink-950);}

.world-stats{
  display:flex;
  gap:32px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.world-stat b{
  display:block;
  font-family:var(--font-display);
  font-size:26px;
  color:var(--amber-400);
}
.world-stat span{
  display:block;
  font-size:12px;
  color:var(--sand-200);
  opacity:0.7;
  margin-top:4px;
}

/* ---------- Globe ---------- */
.world-globe-wrap{
  position:relative;
  height:calc(100vh - 78px);
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
#globe-container{
  position:relative;
  width:100%;
  height:100%;
  cursor:grab;
}
#globe-container:active{cursor:grabbing;}

.world-globe-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, var(--ink-950) 0%, transparent 12%);
  z-index:1;
}

/* ---------- Destination pulse markers (HTML overlay, positioned by three-globe) ---------- */
.world-marker{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--amber-400);
  box-shadow:0 0 0 0 rgba(224,172,95,0.6);
  cursor:pointer;
  animation:world-pulse 2.2s ease-out infinite;
  pointer-events:auto;
}
@keyframes world-pulse{
  0%{ box-shadow:0 0 0 0 rgba(224,172,95,0.55); }
  70%{ box-shadow:0 0 0 16px rgba(224,172,95,0); }
  100%{ box-shadow:0 0 0 0 rgba(224,172,95,0); }
}

/* ---------- Destination info panel ---------- */
.world-panel{
  position:absolute;
  left:28px;
  bottom:28px;
  z-index:3;
  width:min(380px, calc(100% - 56px));
  background:rgba(12,10,8,0.92);
  backdrop-filter:blur(10px);
  border:1px solid var(--line-strong);
  border-radius:2px;
  padding:26px;
  transform:translateY(12px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.world-panel.open{opacity:1; pointer-events:auto; transform:translateY(0);}
.world-panel-close{
  position:absolute;
  top:14px; right:14px;
  background:none; border:none;
  color:var(--sand-200);
  font-size:20px;
  cursor:pointer;
  width:32px; height:32px;
}
.world-panel-close:hover{color:var(--amber-400);}
.world-panel h3{font-size:22px; margin:10px 0 6px;}
.world-panel .world-panel-place{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--amber-400);
}
.world-panel p{font-size:14px; color:var(--sand-200); opacity:0.85; margin:12px 0 20px;}
.world-panel-actions{display:flex; gap:10px; flex-wrap:wrap;}

/* ---------- Video modal ---------- */
.world-video-modal{
  position:fixed; inset:0; z-index:200;
  background:rgba(5,6,8,0.95);
  display:flex; align-items:center; justify-content:center;
  padding:40px;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.world-video-modal.open{opacity:1; pointer-events:auto;}
.world-video-modal-inner{
  width:min(900px, 100%);
  aspect-ratio:16/9;
  position:relative;
  border:1px solid var(--line-strong);
  border-radius:2px;
  overflow:hidden;
  background:var(--ink-900);
}
.world-video-modal-inner iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.world-video-close{
  position:absolute;
  top:-48px; right:0;
  background:none; border:1px solid var(--line-strong);
  color:var(--sand-100);
  width:40px; height:40px;
  border-radius:50%;
  font-size:22px;
  cursor:pointer;
  z-index:2;
}
.world-video-close:hover{border-color:var(--amber-400); color:var(--amber-400);}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .world-hero{grid-template-columns:1fr; min-height:auto;}
  .world-copy{padding:56px 24px 32px; max-width:none;}
  .world-globe-wrap{height:70vh; min-height:420px;}
  .world-panel{left:16px; right:16px; width:auto; bottom:16px;}
}
@media (max-width:600px){
  .world-controls{gap:8px;}
  .world-ctrl-btn{padding:9px 12px; font-size:10px;}
  .world-stats{gap:20px;}
  .world-video-close{top:-56px; right:0;}
}