/* ABOUTME: Book switcher header: a split of large book covers that collapses into a compact bar as the page scrolls. */
/* ABOUTME: --p runs from 0 (full split) to 1 (compact bar), set by js/switcher.js; without JavaScript the split stays full size and scrolls away. */

:root {
  --switcher-h: clamp(440px, calc(100svh - var(--topbar-h) - 80px), 760px);
  --switcher-compact: 76px;
  --switcher-pad: 40px;
  --switcher-cue: 56px;
}

@media (max-width: 639px) {
  :root {
    --switcher-h: clamp(320px, 92vw, 440px);
    --switcher-compact: 64px;
    --switcher-pad: 20px;
    --switcher-cue: 44px;
  }
}

.switcher { --p: 0; }

.js .switcher {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  /* The top bar slides away at the same rate the split shrinks, so the header's bottom edge tracks the page content. */
  transform: translateY(calc(var(--topbar-h) * -1 * var(--p)));
}
.js .switcher.is-compact { box-shadow: 0 6px 24px rgb(0 0 0 / 0.18); }

.switcher-spacer { display: none; }
.js .switcher-spacer {
  display: block;
  height: calc(var(--topbar-h) + var(--switcher-h));
}

.js:has(.switcher) { scroll-padding-top: var(--switcher-compact); }

.switcher__split {
  display: flex;
  height: calc(var(--switcher-h) - (var(--switcher-h) - var(--switcher-compact)) * var(--p));
  overflow: hidden;
}

.switcher__panel {
  --pad: calc(var(--switcher-pad) * (1 - var(--p)) + 8px * var(--p));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc((var(--from) + (var(--to) - var(--from)) * var(--p)) * 1%);
  min-width: 0;
  padding: var(--pad) 12px calc(var(--pad) + var(--switcher-cue) * (1 - var(--p)));
  color: #fff;
  text-decoration: none;
  container-type: inline-size;
}
.switcher__panel:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

.switcher__panel--morphic-fields-made-simple { background: var(--panel-morphic-fields-made-simple); }
.switcher__panel--tarot-made-simple { background: var(--panel-tarot-made-simple); }
.switcher__panel--les-champs-morphiques { background: var(--panel-les-champs-morphiques); }

.switcher__row {
  display: flex;
  align-items: center;
  gap: calc(16px * var(--p));
  min-width: 0;
  max-height: 100%;
}

.switcher__cover {
  display: block;
  width: auto;
  height: auto;
  max-width: 84cqi;
  max-height: calc(
    (var(--switcher-h) - 2 * var(--switcher-pad) - var(--switcher-cue)) * (1 - var(--p)) +
    (var(--switcher-compact) - 16px) * var(--p)
  );
  border-radius: 2px;
  box-shadow: 0 calc(22px - 18px * var(--p)) calc(48px - 40px * var(--p)) rgb(0 0 0 / 0.4);
  transition: transform 0.3s ease;
}
.switcher__panel:hover .switcher__cover { transform: translateY(-4px); }

.switcher__label {
  display: grid;
  max-width: calc(var(--p) * 24rem);
  overflow: hidden;
  opacity: clamp(0, (var(--p) - 0.6) * 2.5, 1);
  white-space: nowrap;
  text-align: left;
}
.switcher__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
}
.switcher__byline {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
}

.switcher__cue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--switcher-pad) * 0.55);
  translate: -50% 0;
  padding: 0.45rem 1.1rem;
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: clamp(0, 1 - var(--p) * 3, 1);
  pointer-events: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.switcher__panel:hover .switcher__cue { background: #fff; color: #111; }

/* Narrower panels shrink the text, and the narrowest keep only the cover. */
@container (max-width: 20rem) {
  .switcher__label { white-space: normal; }
  .switcher__title { font-size: 1.05rem; }
  .switcher__byline { display: none; }
}
@container (max-width: 13rem) {
  .switcher__label { display: none; }
  .switcher__cue { padding: 0.4rem 0.75rem; font-size: 0.65rem; letter-spacing: 0.1em; }
}
@container (max-width: 9rem) {
  .switcher__cue { display: none; }
}