/* The other format (switch.js): a big round button in the bottom-right corner, and over it a preview of the
   portfolio's other version. Same glass as the guide's close button; only the button and the open preview take
   presses, so the page around them stays free. */
.switch {
  --switch-size: 64px; /* the button (it was 40 px) */
  --switch-edge: 20px; /* its distance from the corner */
  position: fixed;
  right: calc(var(--switch-edge) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--switch-edge) + env(safe-area-inset-bottom, 0px));
  z-index: 150; /* over the page and Milo, under the guide (1000) and the splash (2000) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* out of the way while a box is open */
.switch[data-away] {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

/* the preview never sits on Milo's words: when a short screen leaves it no room above them, his words wait under it
   until it closes (switch.js) */
body:has(.switch[data-open][data-over-words]) .say-bubble {
  opacity: 0;
  transition: opacity 0.12s ease;
}

/* the other format: it fades with the scroll as the footer comes up to it, and is gone before they meet (switch.js) */
.switch[data-fading] {
  opacity: var(--switch-fade, 1);
  transition: visibility 0s linear 0s;
}

.switch[data-fading][data-away] {
  opacity: 0;
}

.switch__icon {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: var(--switch-size);
  height: var(--switch-size);
  color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 50%;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.switch__icon:hover,
.switch[data-open] .switch__icon {
  background-color: rgba(255, 255, 255, 0.22);
}

.switch__icon:active {
  transform: scale(0.94);
}

.switch__icon:focus {
  outline: none;
}

.switch__icon:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.switch__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the preview: the line, then a picture of the other version */
.switch__card {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 232px;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  background-color: rgba(18, 18, 18, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transform-origin: 100% 100%;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.switch[data-open] .switch__card {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.2s ease, transform 0.32s cubic-bezier(0.2, 1.25, 0.35, 1);
}

/* with a mouse, the way between the preview and the button still counts as the preview (all of it when the preview
   sits higher, over Milo's words), so a slow mouse never loses it */
@media (hover: hover) {
  .switch[data-open] .switch__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: calc(12px + var(--raise, 0px));
  }

  .switch[data-open][data-raised] .switch__card::after {
    left: auto;
    width: calc(var(--switch-size) + 16px);
  }
}

.switch__say {
  display: block;
  margin: 1px 2px 9px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
}

.switch__say b {
  color: #fff;
  font-weight: 650;
  white-space: nowrap; /* "Click here." stays together */
}

.switch__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background-color: #1b1b1b;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.switch__card:hover .switch__shot {
  transform: scale(1.02);
}

@media (max-width: 479px) {
  .switch {
    --switch-edge: 16px;
  }

  .switch__card {
    width: 208px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .switch,
  .switch[data-away],
  .switch__icon,
  .switch__card,
  .switch[data-open] .switch__card,
  .switch__shot {
    transition: none;
  }

  .switch__card,
  .switch[data-open] .switch__card,
  .switch__card:hover .switch__shot {
    transform: none;
  }
}

@media (forced-colors: active) {
  .switch__icon,
  .switch__card {
    border: 1px solid CanvasText;
  }
}