/* ======================================================
   Sayonara_Alice.exe — v95_codex_plates.css
   The fourteen plates of Alice's Visual Codex (alice.html).
   ------------------------------------------------------
   Depends on v92_pages_shell.css for tokens and on
   v94_alice_codex.css for the archive opening. Namespaced
   .codex-* and touching no existing selector.

   The plates carry their own typography, diagrams and small
   captions, so they are never cropped: every figure keeps the
   source ratio and the picture scales inside it. Reading the
   plate at full resolution happens in the shared v71 lightbox.
====================================================== */

/* ------------------------------------------------------
   1. Progress bar — 14 real steps
   Sticky under the navbar on desktop, where there is room for
   it. On tablet and phone it stays in the flow: it must never
   eat reading space or cover a plate.
------------------------------------------------------ */

.codex-archive {
  position: relative;
}

/* The bar stays where the archive opens. A version pinned under the
   navbar was tried and removed: floating over the plates and over the
   text made the reading worse, which is the opposite of the point.
   The counter still tracks the reading — it is simply consulted at the
   entrance instead of following the eye. */
.codex-progress-wrap {
  position: relative;
  z-index: 2;
  width: min(var(--page-max), 100%);
  margin: 0 auto;
  padding-inline: clamp(1.1rem, 5vw, 4rem);
}

.codex-progress {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.7rem, 2vw, 1.4rem);
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  padding: .7rem clamp(.9rem, 2vw, 1.3rem);
  border: 1px solid rgba(0, 220, 255, .16);
  border-radius: 999px;
  background: rgba(3, 10, 18, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.codex-progress-label {
  margin: 0;
  color: rgba(158, 244, 255, .72);
  font: 700 .68rem/1 var(--page-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.codex-progress-count {
  margin: 0;
  min-width: 5.4ch;
  color: var(--sa-text, #effcff);
  font: 700 .84rem/1 var(--page-mono);
  letter-spacing: .12em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The ruler: fourteen marks, one per plate image. */
.codex-ruler {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  align-items: center;
  gap: 2px;
  height: 20px;
}

.codex-ruler i {
  position: relative;
  display: block;
  height: 9px;
  border-radius: 1px;
  background: rgba(120, 230, 255, .18);
  transition: background .45s ease, height .45s var(--page-ease), box-shadow .45s ease;
}

/* Every fifth mark is taller, like a real measuring edge. */
.codex-ruler i:nth-child(5n + 1) { height: 15px; }

.codex-ruler i.is-passed {
  background: rgba(140, 235, 255, .62);
}

.codex-ruler i.is-current {
  height: 19px;
  background: #cdf6ff;
  box-shadow: 0 0 10px rgba(0, 220, 255, .85);
}

/* ------------------------------------------------------
   1b. Vertical rail
   When the opening bar scrolls away, the same progress
   reappears standing in the right margin, clear of the text
   column. It is the reading position, not a scrollbar
   replacement: the browser's own scrollbar is untouched.
------------------------------------------------------ */

/* Only where the page actually has a free margin for it. Below roughly
   1200px the reading column reaches too far right and a standing rail
   would sit on the text, so the bar at the entrance stays the only
   indicator. */
.codex-rail {
  display: none;
  position: fixed;
  right: clamp(20px, 2.4vw, 36px);
  top: 50%;
  z-index: 11;
  justify-items: center;
  gap: .55rem;
  padding: .8rem .55rem;
  border: 1px solid rgba(0, 220, 255, .18);
  border-radius: 999px;
  background: rgba(3, 10, 18, .8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(-50%);
  animation: codexRailIn .62s var(--page-ease) both;
}

@media (min-width: 1200px) {
  .codex-rail { display: grid; }
  .codex-rail[hidden] { display: none; }
}

.codex-rail.is-leaving {
  animation: codexRailOut .3s ease both;
}

.codex-rail-count,
.codex-rail-total {
  color: rgba(190, 245, 255, .9);
  font: 700 .62rem/1 var(--page-mono);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.codex-rail-total { color: rgba(158, 244, 255, .5); }

.codex-rail-ticks {
  display: grid;
  gap: 3px;
  justify-items: center;
}

.codex-rail-ticks i {
  display: block;
  width: 12px;
  height: 3px;
  border-radius: 1px;
  background: rgba(120, 230, 255, .2);
  transition: background .4s ease, width .4s var(--page-ease), box-shadow .4s ease;
}

.codex-rail-ticks i:nth-child(5n + 1) { width: 17px; }
.codex-rail-ticks i.is-passed { background: rgba(140, 235, 255, .6); }

.codex-rail-ticks i.is-current {
  width: 21px;
  background: #cdf6ff;
  box-shadow: 0 0 9px rgba(0, 220, 255, .85);
}

/* The hand-off: the bar breaks up and reassembles standing.
   Short, twice, then still — a signature the site already speaks. */
@keyframes codexRailIn {
  0%   { opacity: 0; transform: translate(30px, -50%) scaleY(.35); filter: blur(2px); }
  16%  { opacity: 1; transform: translate(-5px, -50%) scaleY(1.08); filter: blur(0); }
  26%  { transform: translate(7px, -50%) scaleY(.96); clip-path: inset(0 0 46% 0); }
  36%  { transform: translate(-3px, -50%) scaleY(1.02); clip-path: inset(0 0 0 0); }
  52%  { clip-path: inset(38% 0 0 0); opacity: .82; }
  62%  { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { transform: translate(0, -50%) scaleY(1); }
}

@keyframes codexRailOut {
  0%   { opacity: 1; transform: translate(0, -50%); }
  40%  { opacity: .7; transform: translate(5px, -50%); clip-path: inset(0 0 40% 0); }
  100% { opacity: 0; transform: translate(26px, -50%) scaleY(.5); }
}

/* ------------------------------------------------------
   2. Plate chapter
------------------------------------------------------ */

.codex-plates {
  width: min(var(--page-max), 100%);
  margin: clamp(2rem, 5vw, 3.4rem) auto 0;
  padding-inline: clamp(1.1rem, 5vw, 4rem);
}

.codex-plate {
  padding-block: clamp(2.6rem, 6vw, 5rem);
  /* Clears the sticky navbar, so a plate reached by anchor never lands
     underneath it. */
  scroll-margin-top: clamp(112px, 15vh, 140px);
}

.codex-plate + .codex-plate {
  border-top: 1px solid rgba(0, 220, 255, .09);
}

.codex-plate-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(.8rem, 2vw, 1.5rem);
  margin-bottom: clamp(1.3rem, 3vw, 2.2rem);
}

.codex-plate-code {
  grid-row: 1 / span 2;
  margin: 0;
  color: rgba(158, 244, 255, .58);
  font: 700 .82rem/1.1 var(--page-mono);
  letter-spacing: .16em;
  white-space: nowrap;
  transition: color .5s ease, text-shadow .5s ease;
}

.codex-plate.is-active .codex-plate-code {
  color: rgba(205, 248, 255, .95);
  text-shadow: 0 0 14px rgba(0, 220, 255, .5);
}

.codex-plate-title {
  margin: 0;
  color: var(--sa-text, #effcff);
  font-family: var(--page-serif);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.codex-plate-sub {
  grid-column: 2;
  margin: .5rem 0 0;
  color: rgba(158, 244, 255, .8);
  font-family: var(--page-serif);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-style: italic;
  line-height: 1.5;
}

/* ------------------------------------------------------
   3. The plate itself
   A button, so it is reachable and operable from the keyboard;
   it opens the shared lightbox where the plate can be zoomed.
------------------------------------------------------ */

.codex-figure {
  position: relative;
  margin: 0;
}

/* One reading passage per plate. Invisible, one pixel tall, placed at a
   distinct height inside its figure: side-by-side plates of a diptych
   are then crossed one after the other, so all fourteen passages are
   counted instead of two of them sharing a position. */
.codex-step-marker {
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.codex-diptych .codex-figure:first-child .codex-step-marker { top: 30%; }
.codex-diptych .codex-figure:last-child .codex-step-marker { top: 76%; }

/* Stacked on tablet and phone, the two plates already follow one another. */
@media (max-width: 1024px) {
  .codex-diptych .codex-figure:first-child .codex-step-marker,
  .codex-diptych .codex-figure:last-child .codex-step-marker {
    top: 50%;
  }
}

.codex-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(0, 220, 255, .16);
  border-radius: clamp(10px, 1.2vw, 16px);
  background: linear-gradient(160deg, rgba(0, 24, 34, .5), rgba(0, 0, 0, .3));
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 0 40px rgba(0, 140, 255, .05);
  transition: border-color .3s ease, box-shadow .3s ease, transform .35s var(--page-ease);
}

.codex-open img {
  display: block;
  width: 100%;
  height: auto;
  /* Reserves the box before load and guarantees the plate is
     shown whole: no cover, no crop. */
  aspect-ratio: var(--plate-ratio, 1);
  object-fit: contain;
}

.codex-open:hover,
.codex-open:focus-visible {
  border-color: rgba(0, 235, 255, .5);
  box-shadow: 0 26px 66px rgba(0, 0, 0, .55), 0 0 38px rgba(0, 190, 255, .16);
  transform: translateY(-2px);
}

/* Archive corner marks, drawn in CSS. */
.codex-open .codex-marks i {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid rgba(140, 235, 255, .45);
  pointer-events: none;
  opacity: 1;
  transition: opacity .8s ease .2s;
}

.codex-marks i:nth-child(1) { top: 9px; left: 9px; border-top-width: 1px; border-left-width: 1px; }
.codex-marks i:nth-child(2) { top: 9px; right: 9px; border-top-width: 1px; border-right-width: 1px; }
.codex-marks i:nth-child(3) { bottom: 9px; left: 9px; border-bottom-width: 1px; border-left-width: 1px; }
.codex-marks i:nth-child(4) { bottom: 9px; right: 9px; border-bottom-width: 1px; border-right-width: 1px; }

.codex-figure.v71-reveal-pending .codex-marks i { opacity: 0; }

/* Zoom affordance: visible label, not colour alone. */
.codex-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem;
  border: 1px solid rgba(0, 220, 255, .34);
  border-radius: 999px;
  background: rgba(3, 10, 18, .78);
  color: #cdf6ff;
  font: 700 .62rem/1 var(--page-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .3s ease, background-color .3s ease;
}

.codex-open:hover .codex-zoom,
.codex-open:focus-visible .codex-zoom {
  border-color: rgba(0, 245, 255, .7);
  background: rgba(0, 40, 60, .84);
}

.codex-caption {
  margin-top: .8rem;
  color: rgba(158, 244, 255, .55);
  font: 700 .64rem/1.4 var(--page-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ------------------------------------------------------
   4. Desktop composition — the plate accompanies the reading
   Image and text sit side by side, alternating sides chapter
   after chapter. The plate is deliberately not enormous: it is
   a companion to the text, and the full-resolution reading
   happens in the lightbox, one click away.
------------------------------------------------------ */

@media (min-width: 1025px) {
  .codex-plate {
    display: grid;
    grid-template-columns: minmax(0, var(--figure-share, 46%)) minmax(0, 1fr);
    column-gap: clamp(1.8rem, 3.4vw, 3.4rem);
    align-items: start;
  }

  /* Placement applies to the chapter's own children only: the figures
     nested inside a diptych are laid out by the diptych itself. */
  .codex-plate > .codex-plate-head { grid-column: 1 / -1; }
  .codex-plate > .codex-figure,
  .codex-plate > .codex-diptych { grid-column: 1; grid-row: 2; }
  .codex-plate > .codex-plate-copy { grid-column: 2; grid-row: 2; margin-top: 0; }

  /* Mirrored chapters swap the two columns. */
  .codex-plate--mirror {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--figure-share, 46%));
  }
  .codex-plate--mirror > .codex-figure,
  .codex-plate--mirror > .codex-diptych { grid-column: 2; }
  .codex-plate--mirror > .codex-plate-copy { grid-column: 1; }

  /* Each shape gets the share it actually needs — bounded by the text,
     which must never drop below a comfortable line length. */
  .codex-plate--wide { --figure-share: 48%; }
  .codex-plate--tall { --figure-share: 42%; }

  /* The plates scroll with the reading. A pinned version was tried and
     removed: anything taller than the free viewport height got stuck
     with its lower half out of reach, and a pair could not be scrolled
     to be seen whole. */

  /* --- The two paired chapters both read as a vertical sequence,
     A above B. Their variety comes from the side of the page they take
     and from their own inner rhythm. --- */

  .codex-plate:has(.codex-diptych) > .codex-diptych {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 05A + 05B, walking then turning: a tight gap, so the two panoramas
     read as consecutive frames of a single movement. */
  .codex-plate--wide:has(.codex-diptych) > .codex-diptych {
    gap: clamp(.9rem, 1.8vw, 1.5rem);
  }

  /* 04A + 04B, hands then feet: two separate studies, so they breathe
     further apart and a hairline marks the passage between them. */
  .codex-plate--square:has(.codex-diptych) {
    --figure-share: 44%;
  }

  .codex-plate--square:has(.codex-diptych) > .codex-diptych {
    gap: clamp(2rem, 4vw, 3.4rem);
  }

  .codex-plate--square:has(.codex-diptych) .codex-figure:last-child::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: calc(clamp(2rem, 4vw, 3.4rem) / -2);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 220, 255, .3), transparent);
  }

  .codex-plate--mirror > .codex-plate-head { margin-left: auto; max-width: 64ch; }
}

/* ------------------------------------------------------
   5. Diptychs — 04A/04B and 05A/05B
   Two plates of equal standing inside one chapter, sharing a
   single description. Neither is an appendix to the other.
------------------------------------------------------ */

.codex-diptych {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: start;
}

.codex-diptych .codex-figure { width: 100%; }

/* ------------------------------------------------------
   6. Editorial text
------------------------------------------------------ */

.codex-plate-copy {
  max-width: var(--page-measure);
  margin-top: clamp(1.5rem, 3.4vw, 2.6rem);
}

.codex-plate-copy p {
  margin: 0 0 1.5em;
  color: var(--page-ink-soft);
  font-family: var(--page-serif);
  font-size: clamp(1.02rem, 1.05vw, 1.14rem);
  line-height: 1.86;
  letter-spacing: .003em;
}

.codex-plate-copy p:last-child {
  margin-bottom: 0;
}

/* The lines the author already set apart — the short opening, the inner
   breaks and the closing — get more air and a quiet mark that draws
   itself. The rule is structural (position and length), never a choice
   about which sentence matters: the page stays a continuous narration,
   not a wall of pull quotes. */
.codex-plate-copy p.codex-lead {
  margin-bottom: 1.9em;
  color: var(--page-ink);
  font-size: clamp(1.14rem, 1.55vw, 1.34rem);
  line-height: 1.62;
}

.codex-plate-copy p.codex-accent,
.codex-plate-copy p.codex-closing {
  position: relative;
  margin-top: 2.2em;
  color: var(--page-ink);
  font-size: clamp(1.08rem, 1.4vw, 1.26rem);
  line-height: 1.6;
}

.codex-plate-copy p.codex-closing {
  font-size: clamp(1.12rem, 1.55vw, 1.34rem);
}

/* Two closing lines in a row belong together: no double gap between them. */
.codex-plate-copy p.codex-closing + p.codex-closing {
  margin-top: 1.15em;
}

.codex-plate-copy p.codex-accent::before,
.codex-plate-copy p.codex-closing::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1.05em;
  height: 1px;
  background: linear-gradient(90deg, var(--page-hair-strong), transparent);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform .9s var(--page-ease) .12s;
}

.codex-plate-copy p.codex-accent::before { width: 34px; }
.codex-plate-copy p.codex-closing::before { width: 58px; }

/* The second of a pair does not repeat the mark. */
.codex-plate-copy p.codex-closing + p.codex-closing::before { display: none; }

.codex-plate-copy p.codex-accent.v71-reveal-pending::before,
.codex-plate-copy p.codex-closing.v71-reveal-pending::before {
  transform: scaleX(0);
}

/* A light that settles once the line has arrived, then stays still. */
.codex-plate-copy p.codex-closing {
  text-shadow: 0 0 18px rgba(0, 200, 255, .14);
  transition: text-shadow 1.2s ease .3s;
}

.codex-plate-copy p.codex-closing.v71-reveal-pending {
  text-shadow: 0 0 0 rgba(0, 200, 255, 0);
}

/* ------------------------------------------------------
   7. Reveal choreography
------------------------------------------------------ */

.codex-plate .v71-reveal {
  --v71-reveal-duration: .68s;
  --v71-reveal-distance: 12px;
}

/* A single archive line that draws itself beside the active plate. */
.codex-plate-head::after {
  content: "";
  grid-column: 1 / -1;
  display: block;
  height: 1px;
  margin-top: clamp(.9rem, 2vw, 1.4rem);
  background: linear-gradient(90deg, var(--page-hair-strong), transparent);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 1s var(--page-ease) .08s;
}

.codex-plate-head.v71-reveal-pending::after {
  transform: scaleX(0);
}

.codex-plate--mirror .codex-plate-head::after {
  background: linear-gradient(270deg, var(--page-hair-strong), transparent);
  transform-origin: right center;
}

/* ------------------------------------------------------
   8. Lightbox additions — zoom and pan
   The shared v71 lightbox handles dialog, keyboard, previous
   and next. Only the magnification layer is added here, and
   only while a Codex plate is open.
------------------------------------------------------ */

.v71-lightbox.is-codex .v71-lightbox-img {
  cursor: zoom-in;
  touch-action: none;
  transform-origin: 0 0;
  transition: transform .28s var(--page-ease);
  will-change: transform;
}

.v71-lightbox.is-codex.is-zoomed .v71-lightbox-img {
  cursor: grab;
  transition: none;
}

.v71-lightbox.is-codex.is-panning .v71-lightbox-img {
  cursor: grabbing;
}

.codex-zoom-hud {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 3vh, 26px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .32rem .4rem;
  border: 1px solid rgba(0, 220, 255, .28);
  border-radius: 999px;
  background: rgba(3, 10, 18, .86);
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.codex-zoom-hud button {
  min-width: 38px;
  height: 34px;
  padding: 0 .5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #cdf6ff;
  font: 700 .82rem/1 var(--page-mono);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}

.codex-zoom-hud button:hover,
.codex-zoom-hud button:focus-visible {
  background: rgba(0, 190, 255, .16);
}

.codex-zoom-hud output {
  min-width: 5ch;
  color: rgba(190, 245, 255, .9);
  font: 700 .7rem/1 var(--page-mono);
  letter-spacing: .08em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------
   9. Tablet — simplify before anything starts to squeeze
------------------------------------------------------ */

@media (max-width: 1024px) {
  /* Stacked composition: the plate sits above its description, at a size
     that accompanies the reading instead of dominating the screen. */
  .codex-plate--wide .codex-figure { width: min(720px, 100%); }
  .codex-plate--square .codex-figure { width: min(560px, 100%); }
  .codex-plate--tall .codex-figure { width: min(480px, 100%); }

  .codex-plate--mirror .codex-figure,
  .codex-plate--mirror .codex-plate-copy,
  .codex-plate--mirror .codex-plate-head {
    margin-left: 0;
  }

  .codex-plate--mirror .codex-plate-head::after {
    background: linear-gradient(90deg, var(--page-hair-strong), transparent);
    transform-origin: left center;
  }

  /* Two plates side by side would become unreadable well before
     the phone breakpoint. */
  .codex-diptych {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.4rem, 3vw, 2.2rem);
    max-width: 620px;
  }
}

/* ------------------------------------------------------
   10. Mobile — image first, then the description
------------------------------------------------------ */

@media (max-width: 760px) {
  .codex-plates {
    padding-inline: 1.15rem;
  }

  .codex-progress-wrap {
    padding-inline: 1.15rem;
  }

  .codex-progress {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: .5rem;
    border-radius: 16px;
    padding: .7rem .9rem;
  }

  .codex-progress-count {
    text-align: right;
  }

  .codex-ruler {
    grid-column: 1 / -1;
    height: 16px;
  }

  .codex-ruler i { height: 7px; }
  .codex-ruler i:nth-child(5n + 1) { height: 12px; }
  .codex-ruler i.is-current { height: 16px; }

  .codex-plate {
    padding-block: clamp(2.2rem, 9vw, 3.4rem);
  }

  .codex-plate-head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .35rem;
  }

  .codex-plate-code {
    grid-row: auto;
  }

  .codex-plate-sub {
    grid-column: 1;
  }

  .codex-plate--wide .codex-figure,
  .codex-plate--square .codex-figure,
  .codex-plate--tall .codex-figure,
  .codex-diptych {
    width: 100%;
    max-width: none;
  }

  .codex-open {
    border-radius: 10px;
  }

  .codex-marks i { width: 10px; height: 10px; }

  .codex-plate-copy p { line-height: 1.8; }

  .codex-zoom {
    right: 8px;
    bottom: 8px;
    padding: .34rem .55rem;
  }

}

/* ------------------------------------------------------
   11. Reduced motion
   Nothing is hidden and nothing moves; the plates, the marks
   and the ruler are immediately complete and usable.
------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .codex-open,
  .codex-marks i,
  .codex-ruler i,
  .codex-rail-ticks i,
  .codex-plate-code,
  .codex-plate-head::after,
  .codex-plate-copy p.codex-accent::before,
  .codex-plate-copy p.codex-closing::before,
  .codex-plate-copy p.codex-closing,
  .v71-lightbox.is-codex .v71-lightbox-img {
    transition: none !important;
  }

  .codex-plate-head::after,
  .codex-plate-copy p.codex-accent::before,
  .codex-plate-copy p.codex-closing::before {
    transform: scaleX(1) !important;
  }

  /* The rail simply is there, without the glitch hand-off. */
  .codex-rail,
  .codex-rail.is-leaving {
    animation: none !important;
  }
}