/* The approved capsule study, mounted over the real chapter (never an iframe).
   Deep links and missing WebGL use a still capsule with real loading progress. */
html.capsule-intro-active,html.capsule-intro-active body{overflow:hidden}
html:is(.capsule-intro-active,.capsule-still) .archive-loader.capsule-enhanced{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding:24px;background:transparent;color:var(--mhc-ink);
  isolation:isolate;--capsule-cover-opacity:1;--capsule-copy-opacity:1;
}
.archive-loader.capsule-enhanced::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--mhc-ground);
  opacity:var(--capsule-cover-opacity);pointer-events:none;
}
.capsule-enhanced .archive-loader-head{
  position:relative;z-index:2;display:block;text-align:center;
  font:480 clamp(12px,1.1vw,15px)/1.5 var(--mono);letter-spacing:.06em;
  color:var(--mhc-ink);opacity:var(--capsule-copy-opacity);
}
.capsule-enhanced .archive-loader-head b{display:block;margin-top:6px;font-size:11px;letter-spacing:.12em;color:var(--mhc-ink-3)}
.capsule-enhanced .archive-loader-core{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:20px;width:100%;border:0;padding:0;
}
.capsule-enhanced .archive-loader-core p{
  max-width:none;font:400 clamp(25px,3vw,36px)/1.15 var(--sans);
  letter-spacing:-.025em;text-align:center;opacity:var(--capsule-copy-opacity);
}
.capsule-enhanced .archive-loader-lockup{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;
}
.capsule-enhanced .archive-loader-progress{opacity:var(--capsule-copy-opacity)}
/* HELD UNTIL THE CAPSULE IS CHOSEN.

   A direct load paints this page before the parser has reached the script that
   mounts the capsule, and until that script runs the drawn substitute is all the
   loader holds. A reader therefore met it at rest and then watched the rendered
   capsule replace it at another size and seam, just as the fill began. To prevent
   that, the boot script in timeline.html marks the root capsule-pending while the
   document is still being parsed, and the capsule script clears the mark once it
   has chosen which capsule to show. The lockup then arrives whole, on the curve
   and at the pace of the veil a chapter swap lifts over the loader. */
html.capsule-pending :is(.archive-loader-lockup,.timeline-capsule-particles){opacity:0}
.archive-loader-lockup,.timeline-capsule-particles{
  transition:opacity calc(420ms * var(--chapter-wash-scale,1)) var(--chapter-soft-ease,cubic-bezier(.45,0,.4,1));
}
.timeline-capsule-progress{position:relative;width:min(680px,calc(100vw - 24px));height:240px;flex:none}
.timeline-capsule-progress[hidden],.timeline-capsule-particles[hidden],.timeline-capsule-shell[hidden]{display:none}
.timeline-capsule-shell{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);pointer-events:none}
/* THE DRAWN CAPSULE, FOR A MACHINE THAT CANNOT RUN THE REAL ONE.

   This is the study's own pre-render placeholder, which stands in only where
   WebGL is unavailable. It is NOT what a reference link shows: a record or era
   link now mounts the real capsule and fills it with its particles, holding
   everything the entrance owns at zero, so that every door into the chapter
   arrives at the same object. See the still mode in timeline-capsule-intro.js.

   Two halves meeting at a seam, a core that fills salmon then state blue behind
   them, and a meniscus riding the leading edge of that fill. It reads the real
   loading percentage through --capsule-load, the same property the capsule
   publishes, so even the substitute shows the archive's actual progress. */
.timeline-capsule-fallback{
  position:absolute;left:50%;top:50%;
  width:clamp(220px,24vw,276px);height:clamp(86px,9.2vw,104px);
  transform:translate3d(-50%,-50%,0) rotateX(5deg);transform-origin:50% 50%;transform-style:preserve-3d;
}
.timeline-capsule-core{
  position:absolute;z-index:1;inset:9px;overflow:hidden;border-radius:999px;
  background:rgba(var(--mhc-ground-rgb),.2);
  box-shadow:inset 0 1px 2px rgba(var(--mhc-ground-rgb),.72),inset 0 -8px 16px rgba(var(--mhc-shadow-rgb),.1);
}
.timeline-capsule-fill{
  position:absolute;inset:0;overflow:hidden;border-radius:inherit;
  background:
    radial-gradient(ellipse at 31% 21%,rgba(255,255,255,.55) 0 3%,transparent 28%),
    radial-gradient(ellipse at 76% 23%,rgba(255,255,255,.5) 0 3%,transparent 29%),
    linear-gradient(180deg,rgba(255,255,255,.34),transparent 34%,rgba(35,21,20,.09) 68%,rgba(35,21,20,.32)),
    linear-gradient(90deg,var(--mhc-salmon) 0 49.55%,var(--mhc-state) 50.45% 100%);
  box-shadow:inset 0 11px 14px rgba(255,255,255,.18),inset 0 -16px 18px rgba(40,25,28,.2),
    inset 12px 0 14px rgba(255,255,255,.08),inset -12px 0 14px rgba(22,39,53,.08);
  clip-path:inset(0 calc(100% - var(--capsule-load,0%)) 0 0 round 999px);
}
/* The grain the animated capsule paints with particles, at rest. */
.timeline-capsule-fill::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background-image:radial-gradient(circle at 18% 32%,rgba(255,255,255,.18) 0 1px,transparent 1.5px),
    radial-gradient(circle at 66% 63%,rgba(26,34,39,.12) 0 1px,transparent 1.4px);
  background-size:19px 17px,23px 21px;mix-blend-mode:soft-light;opacity:.52;
}
.timeline-capsule-meniscus{
  position:absolute;z-index:2;left:var(--capsule-load,0%);top:50%;width:17px;height:calc(100% - 5px);
  border:1px solid rgba(255,255,255,.38);border-radius:50%;
  background:radial-gradient(ellipse at 32% 28%,rgba(255,255,255,.68),transparent 30%),
    linear-gradient(90deg,color-mix(in srgb,var(--mhc-salmon) 62%,#fff),var(--mhc-salmon) 52%,color-mix(in srgb,var(--mhc-salmon) 65%,#182027));
  box-shadow:inset 3px 0 5px rgba(255,255,255,.25),inset -4px 0 6px rgba(22,26,29,.24);
  opacity:.62;transform:translate(-50%,-50%);
}
.timeline-capsule-half{
  position:absolute;z-index:3;top:0;width:50.35%;height:100%;
  border:1px solid rgba(var(--mhc-ink-rgb),.32);
  background:radial-gradient(120% 80% at 50% -5%,rgba(255,255,255,.62),transparent 48%),
    linear-gradient(180deg,rgba(var(--mhc-ground-rgb),.29),rgba(var(--mhc-ground-rgb),.04) 42%,rgba(var(--mhc-shadow-rgb),.12) 76%,rgba(var(--mhc-shadow-rgb),.23));
  box-shadow:inset 0 9px 15px rgba(255,255,255,.19),inset 0 -12px 18px rgba(var(--mhc-shadow-rgb),.14);
}
.timeline-capsule-half::before{
  content:"";position:absolute;z-index:2;left:17%;right:9%;top:10px;height:23%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.08));filter:blur(.25px);opacity:.74;
}
.timeline-capsule-half::after{
  content:"";position:absolute;left:12%;right:8%;bottom:7px;height:19%;border-radius:50%;
  background:linear-gradient(0deg,rgba(var(--mhc-shadow-rgb),.2),transparent);opacity:.64;
}
.timeline-capsule-half-left{left:0;border-right-color:rgba(var(--mhc-ink-rgb),.18);border-radius:999px 12px 12px 999px}
.timeline-capsule-half-right{right:0;border-left-color:rgba(var(--mhc-ink-rgb),.18);border-radius:12px 999px 999px 12px}
.timeline-capsule-seam{
  position:absolute;z-index:5;left:50%;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(var(--mhc-ink-rgb),.31) 24% 76%,transparent);
  transform:translateX(-.5px);
}
.capsule-enhanced .timeline-capsule-fallback{display:none}
.timeline-capsule-particles{position:fixed;inset:0;z-index:1;width:100vw;height:100vh;pointer-events:none}
@media(max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  /* iOS's large 100vh viewport can exceed the visible loader. Keep the
     particles on the loader's own plane, just like the capsule shell. */
  .capsule-enhanced .timeline-capsule-particles{position:absolute;width:100%;height:100%}
}
@media(max-width:520px){
  .archive-loader,html.capsule-intro-active .archive-loader.capsule-enhanced{gap:18px;padding:18px}
  .archive-loader-head,.capsule-enhanced .archive-loader-head{font-size:11px}
  .timeline-capsule-progress{height:216px}
  .archive-loader-core p,.capsule-enhanced .archive-loader-core p{font-size:28px}
}
@media(max-height:560px){
  .archive-loader,html.capsule-intro-active .archive-loader.capsule-enhanced{gap:8px;padding:12px 16px 58px}
  .timeline-capsule-progress{height:160px}
  .archive-loader-core,.capsule-enhanced .archive-loader-core{gap:8px}
}