/* ==========================================================================
   Shapespark UI skin
   Restyles the top-right view list and the bottom-right menu bar.
   Must be loaded after the bundle's webwalk/style.css.

   Two themes, selected by a class on <body>:
     .ss-skin-fused  each group reads as one rounded card
     .ss-skin-pills  every item is its own rounded chip

   Note on shadows: the bundle relies on `overflow: hidden` on #view-list and
   #menu-bar to hide the panels as they slide away, so any shadow cast outside
   those boxes is clipped. --ss-shadow defaults to none for that reason.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Satoshi, self-hosted.

   These URLs resolve against this stylesheet, so they land on
   <bundle-root>/ui-skin/fonts/ wherever the tour is deployed. Re-vendor with
   `node tools/fetch-satoshi.mjs`.

   woff2 only: every browser that can run the WebGL viewer supports it, so a
   woff fallback would just be dead weight on the CDN.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  /* Show Open Sans immediately and swap, rather than blanking the view names
     while the font loads. */
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ss-font: 'Satoshi', 'Open Sans', sans-serif;
  /* Satoshi's regular reads lighter than Open Sans at 13px on a translucent
     panel, so the view list uses the medium weight to hold up. */
  --ss-font-weight: 500;

  --ss-radius: 14px;
  --ss-gap: 6px;

  --ss-panel-bg: rgba(0, 0, 0, 0.6);
  --ss-panel-hover-bg: rgba(0, 0, 0, 0.88);
  /* Current view in the top-right list. Yellow needs dark text: the bundle's
     white text is unreadable on #ffde59. */
  --ss-active-bg: #ffde59;
  --ss-active-fg: #1a1a1a;
  /* Shown while travelling to a clicked view: the same yellow, dimmed. */
  --ss-next-active-bg: rgba(255, 222, 89, 0.4);

  --ss-divider: rgba(255, 255, 255, 0.09);
  --ss-shadow: none;

  /* Loader shown after Play is clicked. Yellow by default; override per
     bundle with the loaderColor option. */
  --ss-loader-color: #ffde59;
  --ss-loader-track: var(--ss-panel-bg);
}

/* --------------------------------------------------------------------------
   Typography

   `font: 'views'` restyles the view list only, `font: 'ui'` restyles the whole
   viewer chrome. Both are independent of the panel theme, so the font still
   applies with theme: 'off'.
   -------------------------------------------------------------------------- */

body.ss-skin-font-views .view {
  font-family: var(--ss-font);
  font-weight: var(--ss-font-weight);
}

/* The bundle sets the family on `body` and lets everything inherit, so a
   single rule is enough here. It outranks the bundle's plain `body`. */
body.ss-skin-font-ui {
  font-family: var(--ss-font);
}

body.ss-skin-font-ui .view {
  font-weight: var(--ss-font-weight);
}

/* --------------------------------------------------------------------------
   Colours, shared by both themes
   -------------------------------------------------------------------------- */

.ss-skin .ui-panel {
  background-color: var(--ss-panel-bg);
}

.ss-skin .ui-hoverable:hover {
  background: var(--ss-panel-hover-bg);
}

/* .ss-current is added by shapespark-ui-skin.js and, unlike .active-view, is not
   removed 3 seconds after arrival. It stays until travel to another view starts.
   Same specificity as the hover rule above, so it must stay after it. */
.ss-skin .active-view,
.ss-skin .active-view:hover,
.ss-skin .ss-current,
.ss-skin .ss-current:hover {
  background-color: var(--ss-active-bg);
  color: var(--ss-active-fg);
}

.ss-skin .next-active-view,
.ss-skin .next-active-view:hover {
  background-color: var(--ss-next-active-bg);
}

/* The bundle only transitions `top`/`right` on the slide wrappers, so adding a
   background transition on the items does not interfere with its animations. */
.ss-skin .view,
.ss-skin #menu-bar-slide .menu-item {
  transition: background-color 180ms ease;
}

/* ==========================================================================
   Theme: fused
   ========================================================================== */

/* --- view list (top right) -----------------------------------------------
   #view-list-items is the scroll box. A border-radius on a scroll container
   clips its content, so the top corners stay rounded even mid-scroll. The
   folder chevron sits below it and carries the bottom corners.
   ------------------------------------------------------------------------- */

.ss-skin-fused #view-list-items {
  border-top-left-radius: var(--ss-radius);
  border-top-right-radius: var(--ss-radius);
  /* The bundle uses -2px to cancel the first item's 2px top margin, which the
     rule below removes. */
  margin-top: 0;
  /* Close the 4px gap so the list and the chevron read as one card. */
  margin-bottom: 0;
  box-shadow: var(--ss-shadow);
}

.ss-skin-fused .view {
  margin-top: 0;
}

.ss-skin-fused #view-list-items > .view:not(:first-child) {
  box-shadow: inset 0 1px 0 var(--ss-divider);
}

.ss-skin-fused #view-list-folder {
  border-bottom-left-radius: var(--ss-radius);
  border-bottom-right-radius: var(--ss-radius);
  box-shadow: inset 0 1px 0 var(--ss-divider);
}

/* --- menu bar (bottom right) ---------------------------------------------
   Items are inline-blocks spread across two nesting levels (#menu-bar-folder,
   then #menu-buttons > button, then #engine-logo) and several are toggled with
   inline `display: none`. The end caps are therefore tagged by the script
   rather than matched with :first-child / :last-child.
   ------------------------------------------------------------------------- */

.ss-skin-fused #menu-bar-content {
  padding-left: 0;
}

.ss-skin-fused #menu-bar-slide .menu-item {
  margin-left: 0;
}

.ss-skin-fused #menu-bar-slide .menu-item:not(.ss-first) {
  box-shadow: inset 1px 0 0 var(--ss-divider);
}

.ss-skin-fused #menu-bar-slide .ss-first {
  border-top-left-radius: var(--ss-radius);
  border-bottom-left-radius: var(--ss-radius);
}

.ss-skin-fused #menu-bar-slide .ss-last {
  border-top-right-radius: var(--ss-radius);
  border-bottom-right-radius: var(--ss-radius);
}

/* ==========================================================================
   Theme: pills
   ========================================================================== */

.ss-skin-pills #view-list-items {
  margin-top: 0;
  margin-bottom: var(--ss-gap);
}

.ss-skin-pills .view {
  margin-top: var(--ss-gap);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
}

.ss-skin-pills #view-list-items > .view:first-child {
  margin-top: 0;
}

.ss-skin-pills #view-list-folder {
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
}

.ss-skin-pills #menu-bar-slide .menu-item {
  margin-left: var(--ss-gap);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
}

.ss-skin-pills #menu-bar-content {
  padding-left: 0;
}

.ss-skin-pills #menu-bar-slide .ss-first {
  margin-left: 0;
}

/* ==========================================================================
   Scrollbar
   The bundle paints a 10px opaque track, which squares off the rounded corner
   of the view list. This makes it an overlay-style thumb instead.
   ========================================================================== */

.ss-skin-slim-scrollbar #view-list-items {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.55) transparent;
}

.ss-skin-slim-scrollbar #view-list-items::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
}

.ss-skin-slim-scrollbar #view-list-items::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.55);
  border-radius: 3px;
}

/* ==========================================================================
   Loader (after clicking Play)

   Two indicators, both driven by walk.min.js through inline styles:

     #primary-progress       centred SVG ring. The viewer sets
                             #primary-progress-done's stroke-dashoffset to
                             314.159 * (1 - progress), which is 2 * PI * r for
                             r = 50, so the radius and dasharray must NOT be
                             changed. Colour, stroke width and caps are safe.
     #secondary-progress     thin bar across the top. The viewer sets the
                             width of #secondary-progress-done in percent.

   The viewer also toggles `display` and fades `opacity` on these elements
   inline, so nothing here sets either. Heights are left to the bundle, which
   already halves the bar below the responsive breakpoint.
   ========================================================================== */

.ss-skin-loader #primary-progress {
  /* Keeps the ring legible over bright cover photos as well as dark ones. */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

.ss-skin-loader #primary-progress > circle:nth-child(1) {
  stroke: var(--ss-loader-track);
  stroke-width: 8;
}

.ss-skin-loader #primary-progress-done {
  stroke: var(--ss-loader-color);
  stroke-width: 8;
  stroke-linecap: round;
  /* The viewer writes stroke-dashoffset in bursts as buffers arrive; easing it
     turns the jumps into a continuous sweep. */
  transition: stroke-dashoffset 250ms ease-out;
}

.ss-skin-loader #secondary-progress-done {
  background-color: var(--ss-loader-color);
  border-top-right-radius: var(--ss-radius);
  border-bottom-right-radius: var(--ss-radius);
  transition: width 250ms ease-out;
}