@keyframes splat-spin {
  to {
    transform: rotate(360deg);
  }
}

.explore-antarctica.antarctica #main__content > .object-wrapper {
  padding-top: 0 !important;
  margin-top: 8rem !important;
}

.object-wrapper {
  background: #000;

  h1 {
    color: #fff;
    text-align: center;
    font-family: "Sofia Sans Extra Condensed";
    font-size: 4.8rem;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: 1%;
    text-transform: uppercase;
    margin: 10px;
  }

  p {
    color: #f8fafd;
    font-family: "proxima-nova", sans-serif;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -0.14px;
    padding-bottom: 40px;
  }
  /* ---- layout: accordion on the left, viewer on the right ---- */
  .splat-layout {
    display: flex;
    align-items: stretch;
    width: 75%;
    margin: auto;
    font-family: "proxima-nova", sans-serif;
    border-radius: 7px;
    max-height: 660px;
    background: #000;
    padding-bottom: 0 !important;
  }

  /* ---- the viewer itself: takes the remaining space (~75%) ---- */
  .splat-component {
    position: relative;
    flex: 1 1 auto;
    min-width: 0; /* let the flex item shrink instead of overflowing */
    height: auto;
    background: #000; /* black before the splat loads */
    overflow: hidden;
  }

  .splat-component canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none; /* let the splat receive pinch/drag instead of the page */
  }

  /* ---- loading spinner (element created by JS, removed once loaded) ---- */
  .splat-loading {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
  }
  .splat-loading p {
    padding: 24px;
    text-align: center;
    line-height: 1.5;
  }
  .splat-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(248, 250, 253, 0.2);
    border-top-color: #f8fafd;
    animation: splat-spin 0.9s linear infinite;
  }

  /* ---- "use two fingers" / "ctrl+scroll" hint toast (created by JS) ---- */
  .gesture-hint {
    position: absolute;
    left: 50%;
    bottom: 18%;
    transform: translateX(-50%);
    z-index: 7;
    background: rgba(0, 0, 0, 0.75);
    color: #f8fafd;
    font-size: 1.3rem;
    padding: 8px 14px;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    white-space: nowrap;
  }
  .gesture-hint.show {
    opacity: 1;
  }

  /* ---- mobile touch gate (created by JS): hidden on desktop; turned on
     inside the mobile media query at the bottom ---- */
  .touch-gate {
    display: none;
  }

  /* ---- annotation hotspots (projected over the object) ---- */
  .splat-component .hotspot {
    position: absolute;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 5;
    user-select: none;
  }
  .splat-component .hotspot:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
  }
  .splat-component .hotspot.active {
    background: #f60;
    border-color: #f60;
    color: #fff;
  }

  /* ---- left-hand accordion (now beside the viewer, not over it) ---- */
  .annotation-panel {
    flex: 0 1 330px; /* up to ~330px, may shrink if space is tight */
    max-width: 330px;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: #000;
  }
  /* scrollable list of annotations */
  .acc-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  /* spacer so any clicked item can physically scroll to the top of the list
     (42px ≈ one closed title row incl. gap — tune alongside the JS row math) */
  .acc-list::after {
    content: "";
    flex: 0 0 calc(100% - 42px);
  }
  .acc-list::-webkit-scrollbar {
    width: 5px;
  }
  .acc-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
  }
  /* control bar pinned to the bottom of the panel */
  .panel-controls {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    padding-top: 40px;
  }
  .panel-controls button {
    flex: 1 1 0;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    color: #fff;
    background: transparent;
    cursor: pointer;
  }
  .panel-controls button:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }
  .panel-controls button svg {
    fill: none;
  }

  .annotation-panel .acc-item {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    overflow: hidden;
    color: #fff;
    flex-shrink: 0;
    margin-right: 10px;
  }
  .annotation-panel .acc-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    color: #f8fafd;
    text-align: center;
    font-family: "proxima-nova", sans-serif;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.12px;
    text-transform: uppercase;
  }

  /* grid-rows trick = smooth expand to true content height */
  .annotation-panel .acc-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
  }
  .annotation-panel .acc-body > div {
    overflow: hidden;
    padding: 0 10px; /* body is CMS HTML now — pad the wrapper, not a <p> */
    font-size: 1.6rem;
    line-height: 1.45;
    color: #ddd;
  }
  .annotation-panel .acc-item.open .acc-body > div {
    padding-bottom: 10px;
  }
  .annotation-panel .acc-item.open .acc-body {
    grid-template-rows: 1fr;
  }
  .annotation-panel .acc-body p {
    margin: 0 0 0.6em;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1.45;
    color: #ddd;
  }
  .annotation-panel .acc-body p:last-child {
    margin-bottom: 0;
  }
  /* fullscreen: let the viewer fill the screen, keep the panel beside it */
  .splat-layout:fullscreen {
    width: 100vw;
    height: 100vh;
    padding: 16px;
    box-sizing: border-box;
    background: #000;
    align-items: stretch;
  }
  .splat-layout:fullscreen .splat-component {
    width: auto;
    height: 100%;
    flex: 1 1 auto;
  }
  .splat-layout:fullscreen .annotation-panel {
    height: 100%;
  }
  .splat-layout:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    padding: 16px;
    box-sizing: border-box;
    background: #000;
    align-items: stretch;
  }
  .splat-layout:-webkit-full-screen .splat-component {
    width: auto;
    height: 100%;
    flex: 1 1 auto;
  }
  .splat-layout:-webkit-full-screen .annotation-panel {
    height: 100%;
  }

  /* =========================================================================
     NEW: mobile-only pieces. These three live inside the viewer and are hidden
     on desktop; the media query at the bottom turns them on.
     ========================================================================= */

  /* top overlay wrapper: a [burger + heading] row, with the annotation card
     stacked directly beneath it. Pinned to the top of the viewer. */
  .mobile-top {
    display: none; /* shown only on mobile */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 22;
    flex-direction: column;
    pointer-events: none; /* empty areas pass touches through to the splat */
  }

  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    pointer-events: none;
  }

  /* the heading, moved here from the panel by JS on mobile */
  .mobile-topbar #panelHeading {
    pointer-events: auto;
  }
  .mobile-topbar #panelHeading h1 {
    margin: 0;
    font-size: 2.2rem;
    text-align: left;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
  }
  .mobile-topbar #panelHeading p {
    display: none; /* keep the row compact — unhide to show the subtext */
  }

  /* hamburger button (lives in the topbar row) */
  .burger-btn {
    display: none; /* shown only on mobile */
    flex: 0 0 auto;
    pointer-events: auto;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* tap-anywhere backdrop behind the open drawer */
  .drawer-backdrop {
    display: none;
  }

  /* translucent annotation card, sits directly under the heading row */
  .mobile-annotation {
    display: none; /* shown via .is-open */
    align-items: flex-start;
    gap: 10px;
    margin: 0 12px;
    padding: 14px;
    border-radius: 8px;
    pointer-events: auto;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .mobile-annotation.is-open {
    display: flex;
  }
  .mobile-annotation .ma-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .mobile-annotation .ma-title {
    font-size: 1.8rem;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 4px;
  }
  /* ma-body is a div receiving CMS HTML — style it and any <p>s inside */
  .mobile-annotation .ma-body,
  .mobile-annotation .ma-body p {
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1.4;
    color: #e8e8e8;
  }
  .mobile-annotation .ma-body p {
    margin-bottom: 0.6em;
  }
  .mobile-annotation .ma-body p:last-child {
    margin-bottom: 0;
  }
  .mobile-annotation .ma-close {
    flex: 0 0 auto;
    margin-left: auto;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  /* belt-and-braces: never let the mobile pieces show on desktop */
  @media (min-width: 641px) {
    .mobile-top,
    .burger-btn,
    .drawer-backdrop,
    .mobile-annotation,
    .touch-gate {
      display: none !important;
    }
  }

  /* ================= MOBILE ================= */
  @media (max-width: 640px) {
    .splat-layout {
      width: 100%;
      margin: 0;
      position: relative;
    }

    /* viewer fills the width; panel is pulled out of flow into a drawer */
    .splat-component {
      width: 100%;
      flex: 1 1 auto;
      height: min(85vh, 660px);
    }

    /* touch gate on: covers the canvas, below hotspots (5), controls (15),
       and the top overlay (22), so all of those still receive taps */
    .touch-gate {
      display: block;
      position: absolute;
      inset: 0;
      z-index: 2;
      touch-action: pan-y pan-x; /* one finger = the page scrolls */
    }

    /* panel -> slide-in drawer */
    .annotation-panel {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      height: 100%;
      width: min(82%, 320px);
      max-width: none;
      z-index: 30;
      transform: translateX(-100%);
      transition: transform 0.25s ease;
      overflow-y: auto;
    }
    .splat-layout.menu-open .annotation-panel {
      transform: translateX(0);
    }

    /* drawer is a tap list of titles — body text shows in the top card instead */
    .annotation-panel .acc-body {
      display: none;
    }
    /* the desktop scroll spacer is pointless in the drawer */
    .acc-list::after {
      display: none;
    }

    /* backdrop appears with the open drawer */
    .splat-layout.menu-open .drawer-backdrop {
      display: block;
      position: absolute;
      inset: 0;
      z-index: 28;
      background: rgba(0, 0, 0, 0.5);
    }

    /* burger + top overlay on */
    .mobile-top {
      display: flex;
    }
    .burger-btn {
      display: flex;
    }

    /* controls (moved here by JS) sit along the bottom of the viewer */
    .splat-component > .panel-controls {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 15;
      padding: 10px 12px;
      gap: 6px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    }
    .splat-component > .panel-controls button {
      height: 38px;
    }
  }
}