/* ==========================================================================
   Claude Version Switcher
   A fixed, frosted "meta" control that floats above every homepage edition.
   Neutral dark-glass styling so it stays legible on the light editions
   (4.5, Fable 5) and the dark one (4.8).
   ========================================================================== */

.version-switcher {
  position: fixed;
  /* Mobile-first: dock to the bottom where it can never overlap the header.
     Lifted to the top on wide screens (see the min-width: 1200px rule below). */
  bottom: 1rem;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.32rem 0.4rem 0.32rem 0.95rem;
  border-radius: 999px;
  background: rgba(12, 12, 14, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  animation: vs-drop-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

@keyframes vs-drop-in {
  from { opacity: 0; transform: translate(-50%, -16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes vs-drop-up {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.version-switcher__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.78);
  white-space: nowrap;
  user-select: none;
}

.version-switcher__spark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5436;
  box-shadow: 0 0 0 0 rgba(255, 84, 54, 0.6);
  animation: vs-pulse 2.4s ease-in-out infinite;
}

@keyframes vs-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 84, 54, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 84, 54, 0); }
}

/* Segmented control ------------------------------------------------------- */
.version-switcher__track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.version-switcher__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  height: calc(100% - 6px);
  border-radius: 999px;
  /* Darkened from the brand coral so the active white label holds ~4.5:1 */
  background: linear-gradient(135deg, #ea5639 0%, #cf4630 100%);
  box-shadow: 0 4px 14px rgba(207, 70, 48, 0.45);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.45s ease, box-shadow 0.45s ease;
}

.version-switcher[data-active="4.8"] .version-switcher__thumb {
  transform: translateX(100%);
}

/* Fable 5 gets its own ultramarine "drafting pen" thumb */
.version-switcher[data-active="fable"] .version-switcher__thumb {
  transform: translateX(200%);
  background: linear-gradient(135deg, #5468ff 0%, #2430df 100%);
  box-shadow: 0 4px 14px rgba(36, 48, 223, 0.5);
}

.version-switcher__option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.95rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(244, 241, 234, 0.7);
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.3s ease;
}

.version-switcher__option:hover {
  color: rgba(244, 241, 234, 0.95);
}

.version-switcher__option.is-active {
  color: #fff;
}

.version-switcher__option:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Very small screens: hide the label so the pill stays compact (three options) */
@media (max-width: 460px) {
  .version-switcher { gap: 0.4rem; padding-left: 0.5rem; }
  .version-switcher__label { display: none; }
  .version-switcher__option { padding: 0.42rem 0.7rem; font-size: 0.7rem; }
}

/* Wide screens only: lift the switcher to the top, where there is room beside
   the logo and nav (incl. the conditional fourth nav link). Below 1360px it
   stays docked at the bottom so it can never overlap the header (and the
   admin-bar offset only matters at the top). */
@media (min-width: 1360px) {
  .version-switcher {
    top: 1rem;
    bottom: auto;
    animation: vs-drop-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
  }
  .admin-bar .version-switcher {
    top: calc(32px + 0.85rem);
    bottom: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .version-switcher,
  .version-switcher__spark { animation: none; }
  .version-switcher__thumb { transition: none; }
}

/* ==========================================================================
   "Look here" hint — a hand-drawn arrow + marker caption pointing at the pill.
   Coral so it reads on both the light (4.5) and dark (4.8) editions. Decorative
   and click-through (pointer-events: none); only rendered for first-time
   visitors who haven't picked an edition yet.
   ========================================================================== */
.version-hint {
  position: fixed;
  left: 50%;
  bottom: 3.6rem;            /* default: above the bottom-docked pill */
  top: auto;
  z-index: 299;
  display: flex;
  flex-direction: column-reverse;  /* caption on top, arrow below (pointing down) */
  align-items: center;
  gap: 0.1rem;
  transform: translateX(42px);     /* offset so it sweeps in at an angle */
  color: #ff5436;
  pointer-events: none;
  animation: vh-appear 0.5s ease 0.4s backwards;
}

@keyframes vh-appear { from { opacity: 0; } to { opacity: 1; } }

.version-hint__arrow {
  --vh-flip: -1;             /* flipped to point down toward the bottom pill */
  width: 64px;
  height: 64px;
  animation: vh-bob 2.3s ease-in-out infinite;
}

@keyframes vh-bob {
  0%, 100% { transform: translateY(0) scaleY(var(--vh-flip)); }
  50%      { transform: translateY(5px) scaleY(var(--vh-flip)); }
}

.version-hint__path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: vh-draw 1s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}
.version-hint__head {
  opacity: 0;
  animation: vh-fade 0.3s ease 1.6s forwards;
}
@keyframes vh-draw { to { stroke-dashoffset: 0; } }
@keyframes vh-fade { to { opacity: 1; } }

.version-hint__note {
  font-family: 'Caveat', 'Bradley Hand', cursive;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 0.9;
  text-align: center;
  transform: rotate(-7deg);
  white-space: nowrap;
}

/* Wide screens: pill is at the top, so sit below it and point up. */
@media (min-width: 1360px) {
  .version-hint {
    top: 3.5rem;
    bottom: auto;
    flex-direction: column;        /* arrow on top (pointing up), caption below */
    transform: translateX(46px);
  }
  .admin-bar .version-hint { top: calc(32px + 3.5rem); }
  .version-hint__arrow { --vh-flip: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .version-hint,
  .version-hint__arrow { animation: none; }
  .version-hint__path { animation: none; stroke-dashoffset: 0; }
  .version-hint__head { animation: none; opacity: 1; }
}