/* ==========================================================================
   reading-bar.css — fixed reading bar that fades in past the hero

   Three structural groups on the 1100px grid:
     left    circle button for reading options
     middle  segmented control for the case's sections
     right   get-in-touch CTA

   Controls are 48px tall, sit 48px in from the screen's left and right edges,
   and are vertically centred in the 144px progressive-blur + light-fade scrim
   (so 48px off the bottom edge). The scrim fades in; the controls slide up
   from below.

   The glass surfaces here supply fill, specular rim and float shadow. The
   *refraction* — the backdrop actually bending at the rim, with chromatic
   aberration — comes from scripts/vendor/liquid-glass.js, which replaces the
   CSS backdrop-filter below with an SVG displacement filter at runtime. The
   CSS values stay as the no-JS / non-Chromium baseline.
   ========================================================================== */

.reading-bar {
  --bar-height: 48px;
  --bar-inset: 48px; /* (scrim 144 - height 48) / 2 -> centred in the fade */
  --bar-scrim-height: 144px; /* 48px x 3 */
  --bar-edge: 48px;          /* left/right margin of the corner controls */
  --bar-gap: 16px;

  --bar-ink: #111;
  /*
   * Saturating the backdrop pulls the page's colour up through the glass, which
   * eats label contrast. Measured over the orange mockup, .55 alpha gave only
   * 4.15:1 on inactive labels; .68 gives 6.38:1. Darkening the ink rather than
   * thickening the fill keeps the glass see-through.
   */
  --bar-muted: rgba(0, 0, 0, 0.68);

  /* --- liquid glass ----------------------------------------------------- */
  /* Four ingredients: a blurred+saturated backdrop, a vertical translucent
     fill, a specular rim brightest at top and bottom, and a soft float
     shadow. The rim is what reads as "glass" rather than "frosted panel". */
  --lg-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.34));
  --lg-backdrop: blur(28px) saturate(180%) brightness(1.04);
  --lg-rim: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.18) 42%,
    rgba(255, 255, 255, 0.06) 58%,
    rgba(255, 255, 255, 0.6)
  );
  --lg-inner: inset 0 1px 0.5px rgba(255, 255, 255, 0.85),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.32);
  --lg-float: 0 1px 1px rgba(20, 20, 22, 0.05), 0 6px 14px rgba(20, 20, 22, 0.07),
    0 18px 40px rgba(20, 20, 22, 0.07);

  /* --- black glass (CTA) ------------------------------------------------ */
  /* Was .78/.88 alpha, which let the light page through and read as grey.
     Near-opaque keeps it black; the rim and the backdrop saturation are what
     still make it glass rather than a flat black pill. */
  --lgk-fill: linear-gradient(180deg, rgba(24, 24, 27, 0.95), rgba(3, 3, 5, 0.985));
  --lgk-backdrop: blur(28px) saturate(160%);
  --lgk-rim: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.03) 60%,
    rgba(255, 255, 255, 0.22)
  );
  --lgk-inner: inset 0 1px 0.5px rgba(255, 255, 255, 0.24),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.08);
  --lgk-float: 0 1px 1px rgba(0, 0, 0, 0.16), 0 8px 18px rgba(0, 0, 0, 0.16),
    0 20px 44px rgba(0, 0, 0, 0.14);

  position: fixed;
  inset: auto 0 0 0;
  z-index: 900;
  /* Passthrough layer; only the controls take pointer events. */
  pointer-events: none;

  /*
   * The reveal is split: the scrim (and hairline) fade, while the controls
   * slide up from below the bottom edge. Visibility is what keeps hidden
   * controls out of the tab order, so it flips instantly on show (delay 0) and
   * waits for the slide-out to finish on hide.
   */
  visibility: hidden;
  transition: visibility 0s linear 520ms;
}

.reading-bar.is-visible {
  visibility: visible;
  transition-delay: 0s;
}

.reading-bar__scrim,
.reading-bar__progress {
  opacity: 0;
  transition: opacity 420ms ease-out;
}

.reading-bar.is-visible .reading-bar__scrim,
.reading-bar.is-visible .reading-bar__progress {
  opacity: 1;
}

/* --- scrim: progressive blur + light fade ------------------------------ */
/*
 * Four stacked backdrop-filter layers, each masked to a feathered band that
 * reaches further up than the last, with the blur radius growing downward
 * (1 → 3 → 6 → 12px). Each layer blurs the backdrop independently and the
 * results alpha-composite, so the perceived blur ramps smoothly toward the
 * bottom rather than summing to a single radius.
 *
 * Skiper's own version is one layer — blur(6px) over 240px, masked
 * `to top, #fff 25%, transparent`, under a gradient to opaque white. Cheaper
 * (one filtered pass, not four) and it ramps the blur's *opacity* rather than
 * its radius. Ours stops short of opaque white because our blocks have their
 * own surface colours that a full white wash would fight.
 */

.reading-bar__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: var(--bar-scrim-height);
  pointer-events: none;
}

.reading-bar__scrim > i {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  -webkit-mask-image: var(--band);
  mask-image: var(--band);
}

/*
 * Every band must feather out at its top edge, including the weakest one.
 * An unfeathered first layer switches its blur on abruptly and puts a visible
 * seam across the page — measured at a 0.70 contrast drop in a single row,
 * versus 0.10 for the ramp below.
 */

.reading-bar__scrim > i:nth-child(1) {
  --blur: 1px;
  --band: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
}

.reading-bar__scrim > i:nth-child(2) {
  --blur: 3px;
  --band: linear-gradient(to top, #000 0%, #000 32%, transparent 72%);
}

.reading-bar__scrim > i:nth-child(3) {
  --blur: 6px;
  --band: linear-gradient(to top, #000 0%, #000 14%, transparent 46%);
}

.reading-bar__scrim > i:nth-child(4) {
  --blur: 12px;
  --band: linear-gradient(to top, #000 0%, transparent 24%);
}

/* The "light fade" itself, over the blur. */
.reading-bar__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.65) 35%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* --- progress hairline -------------------------------------------------- */

.reading-bar__progress {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: rgba(0, 0, 0, 0.06);
}

.reading-bar__progress > span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
}

/* --- layout ------------------------------------------------------------- */
/*
 * Full-bleed, not capped at --grid-width: the side controls belong on the
 * screen's edge rather than the text column's edge, inset by --bar-edge.
 * 1fr / auto / 1fr keeps the segmented control optically centred on the
 * viewport no matter how wide the two side controls are.
 */
.reading-bar__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--bar-gap);
  padding: 0 var(--bar-edge) var(--bar-inset);
  font-size: 1.4em;
  /* Start fully below the viewport edge, then slide up into place. */
  transform: translateY(calc(var(--bar-height) + var(--bar-inset)));
  transition: transform 520ms cubic-bezier(0.32, 0.72, 0, 1);
}

.reading-bar.is-visible .reading-bar__inner {
  transform: translateY(0);
}

.reading-bar__inner > *:first-child {
  justify-self: start;
}

.reading-bar__inner > *:last-child {
  justify-self: end;
}

/* --- glass surfaces ----------------------------------------------------- */

.reading-bar .glass,
.reading-bar .glass-dark {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--bar-height);
  border-radius: 999px;
  color: var(--bar-ink);
  white-space: nowrap;
  pointer-events: auto;
  /* Keeps the spotlight's z-index:-1 inside the control, so it paints over the
     fill but under the text instead of escaping behind the whole element. */
  isolation: isolate;
}

/* --- cursor spotlight --------------------------------------------------- */
/*
 * A soft white light that tracks the pointer inside the control. JS sets
 * --spot-x / --spot-y from the pointer position and toggles --spot-opacity;
 * everything else is CSS, so it costs one custom-property write per frame.
 */

.reading-bar .glass::before,
.reading-bar .glass-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--spot-opacity, 0);
  transition: opacity 260ms ease-out;
  background: radial-gradient(
    circle var(--spot-size, 180px) at var(--spot-x, 50%) var(--spot-y, 50%),
    var(--spot-color),
    transparent 70%
  );
}

.reading-bar .glass {
  --spot-color: rgba(255, 255, 255, 0.85);
}

/*
 * Brightest on the dark pill, where a white spotlight actually reads.
 */
.reading-bar .glass-dark {
  --spot-color: rgba(255, 255, 255, 0.34);
  --spot-size: 224px;
}

.reading-bar .glass {
  background: var(--lg-fill);
  backdrop-filter: var(--lg-backdrop);
  -webkit-backdrop-filter: var(--lg-backdrop);
  box-shadow: var(--lg-float), var(--lg-inner);
}

.reading-bar .glass-dark {
  background: var(--lgk-fill);
  backdrop-filter: var(--lgk-backdrop);
  -webkit-backdrop-filter: var(--lgk-backdrop);
  box-shadow: var(--lgk-float), var(--lgk-inner);
  color: #fff;
}

/* Specular rim, drawn as a 1px gradient ring via mask subtraction. */
.reading-bar .glass::after,
.reading-bar .glass-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask-composite: exclude;
  pointer-events: none;
}

.reading-bar .glass::after {
  background: var(--lg-rim);
}

.reading-bar .glass-dark::after {
  background: var(--lgk-rim);
}

/* --- left: reading options --------------------------------------------- */

.reading-bar__options {
  justify-content: center;
  width: var(--bar-height);
  padding: 0;
  border: 0;
  border-radius: 50%;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.reading-bar__options[aria-expanded="true"] {
  --spot-opacity: 1;
}

.reading-bar__options .glyph {
  font-size: 1.25em;
  line-height: 1;
}

/* --- left: reading options popover -------------------------------------- */
/*
 * UI only. The controls inside select and animate, but nothing is applied to
 * the page yet — no type scale, no theme, no motion preference. See README.
 */

.reading-bar__options-wrap {
  position: relative;
  pointer-events: auto;
}

.reading-options {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  width: 292px;
  padding: 8px;
  border-radius: 26px;
  /* More opaque than the pills: this panel carries its own content, so the
     page behind it needs to stay quiet and legible. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.68));
  backdrop-filter: var(--lg-backdrop);
  -webkit-backdrop-filter: var(--lg-backdrop);
  box-shadow: var(--lg-float), var(--lg-inner);
  color: var(--bar-ink);

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.97);
  transform-origin: bottom left;
  /*
   * visibility as a 0s step, not a timed transition: a timed discrete property
   * flips at 50% progress, which leaves the panel unfocusable for the first
   * ~130ms after opening. Delayed on close so the fade-out is still seen.
   */
  transition:
    opacity 200ms ease-out,
    transform 260ms cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 260ms;
}

.reading-options.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity 200ms ease-out,
    transform 260ms cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0s;
}

/* Same specular rim as the pills. */
.reading-options::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: var(--lg-rim);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask-composite: exclude;
  pointer-events: none;
}

.reading-options__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 14px;
}

.reading-options__row + .reading-options__row {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.reading-options__label {
  font-size: 13px;
  color: var(--bar-muted);
}

/* Inline segmented control, same idea as the section tabs at a smaller size. */
.opt-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
}

.opt-seg button {
  min-width: 34px;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--bar-muted);
  cursor: pointer;
  transition: background 200ms ease-out, color 200ms ease-out;
}

.opt-seg button:hover {
  color: var(--bar-ink);
}

.opt-seg button[aria-checked="true"] {
  background: #fff;
  color: var(--bar-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.opt-seg .size-s {
  font-size: 11px;
}

.opt-seg .size-l {
  font-size: 15px;
}

/* Switch */
.opt-switch {
  position: relative;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transition: background 220ms ease-out;
}

.opt-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.opt-switch[aria-checked="true"] {
  background: #111;
}

.opt-switch[aria-checked="true"]::after {
  transform: translateX(18px);
}

@media (prefers-reduced-motion: reduce) {
  .reading-options {
    transition: opacity 120ms linear, visibility 0s linear 120ms;
    transform: none;
  }

  .reading-options.is-open {
    transform: none;
    transition: opacity 120ms linear, visibility 0s linear 0s;
  }

  .opt-switch::after {
    transition: none;
  }
}

/* --- middle: segmented control ----------------------------------------- */

.reading-bar__sections {
  padding: 5px;
}

/*
 * The white pill. JS sets --seg-x / --seg-w from the active link's box, so the
 * thumb both slides and resizes to fit labels of different widths.
 */
.reading-bar__thumb {
  position: absolute;
  top: 5px;
  left: 0;
  z-index: 1;
  width: var(--seg-w, 0px);
  height: calc(var(--bar-height) - 10px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateX(var(--seg-x, 0px));
  opacity: 0;
  transition:
    transform 520ms cubic-bezier(0.32, 0.72, 0, 1),
    width 520ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity 260ms ease-out;
}

.reading-bar__sections.has-active .reading-bar__thumb {
  opacity: 1;
}

.reading-bar__sections a {
  position: relative;
  z-index: 2;
  padding: 0 16px;
  line-height: calc(var(--bar-height) - 10px);
  color: var(--bar-muted);
  transition: color 260ms ease-out;
}

.reading-bar__sections a:hover {
  color: var(--bar-ink);
}

.reading-bar__sections a[aria-current="true"] {
  color: var(--bar-ink);
  font-weight: 600;
}

/* --- right: call to action --------------------------------------------- */

.reading-bar__cta {
  padding: 0 22px;
  font-weight: 600;
}

.reading-bar__cta .arrow {
  display: inline-block;
  margin-left: 10px;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.reading-bar__cta:hover .arrow {
  transform: translateX(4px);
}

/* --- responsive --------------------------------------------------------- */

/* Six labels plus both side controls stop fitting the grid below this. */
@media (max-width: 940px) {
  .reading-bar .reading-bar__sections {
    display: none;
  }

  .reading-bar__inner {
    grid-template-columns: auto 1fr;
  }
}

@media (max-width: 560px) {
  .reading-bar {
    --bar-height: 44px;
    --bar-inset: 44px; /* (132 - 44) / 2 */
    --bar-scrim-height: 132px;
    --bar-edge: 20px;
  }

  .reading-bar__cta {
    padding: 0 20px;
  }
}

/* --- motion / fallbacks ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .reading-bar {
    transition: visibility 0s linear 150ms;
  }

  .reading-bar__inner,
  .reading-bar.is-visible .reading-bar__inner {
    transform: none;
    transition: none;
  }

  .reading-bar__scrim,
  .reading-bar__progress {
    transition: opacity 150ms linear;
  }

  .reading-bar__thumb {
    transition: opacity 150ms linear;
  }

  .reading-bar__cta .arrow {
    transition: none;
  }
}

/* Without backdrop-filter the glass would read as flat tint; lean opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .reading-bar__scrim::after {
    background: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.85) 45%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .reading-bar .glass {
    background: rgba(255, 255, 255, 0.94);
  }

  .reading-bar .glass-dark {
    background: rgba(17, 17, 19, 0.96);
  }
}