/* ==== GLOBAL / DESKTOP ==== */
@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html, body { margin:0; padding:0; width:100vw; height:100vh; }
body{
  background: url(https://glxroadtrip.b-cdn.net/Pictures/IMG_20250608_112247415_MFNR.jpg) center/cover no-repeat;
  font-family:'Montserrat',sans-serif;
  display:flex; justify-content:center; align-items:center;
}
.overlay{
  position:fixed; inset:0; background:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  pointer-events:none; z-index:0;
}

/* Map (desktop/default) */
#map-container{
  position:relative; width:65vw; height:65vh; border:1px solid #ccc; z-index:1;
  border-radius:20px; filter:drop-shadow(1px 1px 4px #00000067);
}
#map{ position:absolute; inset:0; border-radius:10px; }

/* Top nav */
#prev,#next{ position:static; transform:none; }
#stage-label{
  white-space:nowrap; overflow-x:auto; overflow-y:hidden; max-width:90vw;
  font-size:clamp(1rem,2vw,2rem);
}
#stage-label img{ height:.8em !important; width:auto !important; vertical-align:middle; margin:0 .25em; transform:translateY(-0.1em); }
#stage-label::-webkit-scrollbar{ display:none; }
#nav-wrapper{
  position:absolute; top:5vmin; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:1rem; padding:0 1rem; z-index:7000; font-family:"Kumbh Sans",sans-serif;
}
.nav-arrow{
  font-size:clamp(1rem,2vw,2.5rem); cursor:pointer; transition:transform .2s,color .2s; color:#000; user-select:none;
}
.nav-arrow:hover{ transform:scale(1.2); color:#000; text-shadow:0 0 6px rgba(0,0,0,.9); }

/* Image (desktop) */
#images-top-left{ position:fixed; top:2vmin; left:2vmin; width:clamp(100px,20vw,250px); z-index:3; }
#images-top-left img{ display:block; width:100%; height:auto; border-radius:8px; filter:drop-shadow(1px 1px 4px #00000067); }

/* GLB preview (desktop) */
#iframe-bottom-left{
  position:fixed; bottom:2vmin; left:2vmin; width:clamp(200px,30vw,600px); aspect-ratio:3/2;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); z-index:2; overflow:hidden; border-radius:10px; filter:drop-shadow(1px 1px 4px #00000067);
}
#iframe-bottom-left model-viewer{ width:100%; height:100%; background:transparent; }
#vision-btn{
  position:absolute; top:.5rem; right:.5rem; z-index:3; padding:.3rem .6rem; background:rgba(255, 255, 255, 0.6); filter:drop-shadow(1px 1px 4px #00000067);
  color:#000000; border:none; border-radius:.3rem; cursor:pointer;
}

#vision-btn:hover{
  position:absolute; top:.5rem; right:.5rem; z-index:3; padding:.3rem .6rem; background:rgba(255, 255, 255, 0.6); filter:drop-shadow(1px 1px 4px #00000067);
  color:#000000; border:none; border-radius:.3rem; cursor:pointer;
}

/* Vision modal */
/* Modal = your existing white panel, positioned like before */
#splat-modal{
  display:none;
  position:fixed;
  bottom:10vh; left:10vw;
  width:80vw; height:80vh;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
  border-radius:10px;
  z-index:8000;

  /* NEW: isolate stacking so ::before can sit behind content cleanly */
  isolation:isolate;
}

/* NEW: full-viewport blurred/dim layer that sits BEHIND the panel content */
#splat-modal::before{
  content:"";
  position:fixed;          /* key: cover the whole viewport */
  inset:0;                 /* full screen */
  background:rgba(0,0,0,0.25);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:auto;     /* blocks clicks to the page behind */
  z-index:0;               /* behind modal children */
}

/* Ensure all direct children (iframe, close, caption) sit ABOVE the blur */
#splat-modal > *{
  position:relative;
  z-index:1;
}

#splat-caption{
  position:absolute; bottom:7%; left:50%;
  transform:translateX(-50%);
  display:inline-block; max-width:90%;
  padding:.5rem 1rem; background:rgba(0,0,0,.6);
  color:#fff; font-size:2vmin; text-align:center;
  border-radius:.3rem; pointer-events:none; white-space:nowrap;
}
#splat-close{
  position:absolute; top:.5rem; right:.5rem;
  background:#eee; border:none; padding:.3rem;
  cursor:pointer; font-size:1.2rem; z-index:5;
}
#splat-iframe{ width:100%; height:100%; border:none; }

/* Right-hand AR (desktop) */
#iframe-right{
  position:fixed; top:50%; right:2vmin; transform:translateY(-50%);
  width:clamp(150px,20vw,400px); aspect-ratio:1/1; background:#ffffff3c; box-shadow:0 2px 6px rgba(0,0,0,.2);
  border-radius:50px; overflow:hidden; z-index:2; filter:drop-shadow(1px 1px 4px #00000067);
}
#iframe-right model-viewer{ width:100%; height:100%; background:transparent; }

/* AR button + modal */
#launch-ar{
  position:absolute; top:90%; left:50%; transform:translate(-50%,-50%); border:none; border-radius:.4rem; font-size:.8rem; cursor:pointer; z-index:3; transition:background .2s;
  padding:.3rem .6rem;  
   background:rgb(255, 255, 255); filter:drop-shadow(1px 1px 4px #00000067);
  color:#000000; border:none; border-radius:.3rem; cursor:pointer;
}
@media screen and (max-width: 820px) {
  #launch-ar {
    display: none !important;
  }
}

#launch-ar:hover{ background:#fff; color:#000; }
#ar-modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); justify-content:center; align-items:center; z-index:9000; pointer-events:auto; }
#ar-modal.active{ display:flex; }
.ar-content .modal-close{
  position:absolute; top:.5rem; right:.5rem; background:rgba(255,255,255,.8); border:none; padding:.3rem .5rem; font-size:1.2rem; cursor:pointer; border-radius:.3rem; z-index:2;
}

/* Image gallery modal (shared) */
.modal{
  display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; backdrop-filter:blur(8px);
  background:rgba(255,255,255,.5); justify-content:center; align-items:center; z-index:8000;
}
.modal.active{ display:flex; }
.modal-content{ position:relative; display:inline-block; padding:0; background:transparent; }
.modal-title{ color:#000; font-size:1.2rem; margin:.5rem 0; }
#modal-img{ display:block; margin:0; width:auto; height:auto; max-width:80vw; max-height:80vh; object-fit:contain; border-radius:10px; }
.grain-overlay{ pointer-events:none; position:absolute; top:0; left:0; width:100%; height:100%; background-image:url('https://www.transparenttextures.com/patterns/asfalt-light.png'); mix-blend-mode:overlay; animation:grain .2s steps(10) infinite; }
@keyframes grain{
  0%,100%{transform:translate(0,0);} 10%{transform:translate(-5%,-5%);} 20%{transform:translate(-10%,5%);}
  30%{transform:translate(5%,-10%);} 40%{transform:translate(-5%,15%);} 50%{transform:translate(-10%,5%);}
  60%{transform:translate(15%,0);} 70%{transform:translate(0,10%);} 80%{transform:translate(-15%,0);} 90%{transform:translate(10%,5%);}
}
.modal-close{
  position:absolute; top:1rem; right:1rem; background:rgba(255,255,255,.8); border:none; padding:.5rem; font-size:1.2rem; cursor:pointer; border-radius:.3rem; z-index:101;
}
.modal-arrow{
  position:absolute; top:50%; font-size:2.5rem; color:#000; background:transparent; padding:.5rem; border-radius:50%; cursor:pointer; z-index:101;
}
.modal-content .modal-arrow.prev{ left:-3rem; top:50%; }
.modal-content .modal-arrow.next{ right:-3rem; top:50%; }

/* Elevation summary tweaks (desktop default) */
#elevation-summary-div .elevation-summary span{
  display:block !important; margin:.1rem 0 !important; --ele-close-btn:none !important;
}
#elevation-summary-div .elevation-summary > span:not(:last-child)::after{ content:"" !important; --ele-close-btn:none !important; }

/* ==== MOBILE (≤900px) ==== */
@media (max-width: 900px){
  :root{ --nav-h:68px; --stack-gap:20px; }

  html,body{ height:auto; overflow-y:auto; overflow-x:hidden; }
  body{ display:block !important; background:#000; padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0) + 8px); }

  /* Fixed nav */
  #nav-wrapper{
    position:fixed !important; top:env(safe-area-inset-top,0); left:0 !important; right:0 !important; width:100vw !important; height:var(--nav-h);
    transform:none !important; z-index:10000; display:flex !important; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; box-sizing:border-box;
    white-space:nowrap; overflow:hidden;
    background:linear-gradient(to bottom, rgba(255,255,255,.96), rgba(255,255,255,.82), rgba(255,255,255,0)); backdrop-filter:blur(6px);
  }

  .nav-arrow{ flex:0 0 auto; font-size:clamp(18px,5vw,22px) !important; line-height:1; padding:6px 8px; }
  #stage-label{ flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; }
  #stage-label img{ height:1em !important; width:auto !important; vertical-align:-0.15em; margin:0 .25em; }

  /* Map: square, with consistent space UNDER it */
  #map-container{
    position:relative !important; width:90vw !important; max-width:90vw !important;
    margin:12px auto var(--stack-gap) auto !important; /* <- unified bottom gap */
    aspect-ratio:1 / 1; border-radius:12px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.25);
    
  }

  #map{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; }

  /* Turn elevation OFF on mobile */
  #elevation-div{ display:none !important; visibility:hidden !important; height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; }
  #elevation-summary-div{ display:none !important; pointer-events:none !important; height:0 !important; margin:0 !important; padding:0 !important; opacity:0 !important; visibility:hidden !important; }

  /* Below map row: EXACT same width as map; unified gaps */
  #below-map-row{
    width:90vw; margin:0 auto var(--stack-gap) auto;  /* no extra top margin; space comes from map-container’s bottom margin */
    display:grid; grid-template-columns:1fr 1fr; gap:var(--stack-gap); align-items:stretch;
  }

  /* The two square tiles */
  #below-map-row > #images-top-left,
  #below-map-row > #iframe-right{
    position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    transform:none !important; filter:none !important; background:transparent; margin:0 !important;
    width:auto !important; height:auto !important; aspect-ratio:1 / 1 !important;
    border-radius:12px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.25);
  }
  #images-top-left img{ width:100% !important; height:100% !important; object-fit:cover !important; }
  #iframe-right model-viewer{ width:100% !important; height:100% !important; background:transparent; }

  /* Full-width 4:3 panel UNDER the squares; SAME vertical gap */
  #below-map-row > #iframe-bottom-left{
    position:relative !important; grid-column:1 / -1 !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    transform:none !important; filter:none !important; margin: 0; /* top gap equals others */
    width:100% !important; height:auto !important; aspect-ratio:4 / 2 !important;
    border-radius:12px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.25); background:#0000;
  }
  #iframe-bottom-left model-viewer{ width:100% !important; height:100% !important; background:#00000000; }

}

#credits {
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.8);
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  z-index: 9999;
  white-space: nowrap;
}

/* Links */
#credits a {
  color: inherit;
  text-decoration: none;
}

#credits a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 900px) {
  #credits {
    position: static !important;     /* stop pinning */
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    display: block !important;
    width: 75% !important;           /* match your 75% layout */
    max-width: 100% !important;
    margin: 20px auto !important;    /* centered, with spacing */
    box-sizing: border-box !important;
text-align: center;
    white-space: normal !important;  /* wrap text */
    overflow-wrap: anywhere !important; /* break long URLs if any */
  }
}




#map-spinner{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  background:rgba(255, 255, 255, 0.199); /* subtle veil over map */
}
#map-spinner::after{
  content:"";
  width:64px; height:64px;
  border:6px solid rgba(0,0,0,0.15);
  border-top-color:#000;
  border-radius:50%;
  animation:spin 1s linear infinite;
}
#map-spinner.hidden{ display:none; }
@keyframes spin{ to{ transform: rotate(360deg); } }

#gif-pin-free{
  background: url(24892548063685502_5.gif) center / cover no-repeat; /* ⬅️ key line */
  position: absolute;
  top: 15%;
  left: 65%;
  width: 17vmin;
  height: 17vmin;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  animation: gifpulse 10s ease-in-out infinite;
  z-index: 5000;
}
@keyframes gifpulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}
@media (max-width: 900px){
  #gif-pin-free{ display: none !important; }
}

@media (max-width: 900px){
  /* Reduce main width from 90vw → 75vw */
  #map-container,
  #below-map-row {
    width: 80vw !important;
    max-width: 80vw !important;
  }

  /* Optional: if you want the credits bar to match */
  #credits {
    width: 85vw !important;
  }
}