/* The opening sheet uses the hero's own paper, type and proportions. */
.archive-intro { overflow:hidden; color:var(--ink,#16291e); touch-action:none; }
.intro-backdrop { position:absolute; inset:0; background:#14251b; }
.intro-position {
  position:absolute; left:50%; top:50%; width:var(--intro-width,338px);
  height:var(--intro-height,491px);
  transform:translate(-50%,-50%) scale(var(--intro-scale,1));
  perspective:1600px;
}
.intro-paper-motion {
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transform:translate(-25%,-25%) rotate(-5deg);
}
.intro-folds { position:absolute; inset:0; transform-style:preserve-3d; }
.intro-half {
  position:absolute; top:0; width:50%; height:100%; transform-style:preserve-3d;
}
.intro-half-left { left:0; z-index:2; transform-origin:right center; transform:rotateY(179deg); }
.intro-half-right { right:0; }
.intro-stock {
  position:absolute; left:0; width:100%; height:50%;
  background:#d8c690; box-shadow:0 1px 2px #45351a28,inset 0 0 26px #70582b12;
  transform-style:preserve-3d;
}
.intro-stock::before {
  content:''; position:absolute; inset:0; opacity:.82; mix-blend-mode:multiply;
  background-image:var(--intro-grain);
  background-size:200% 200%,200% 200%,200% 200%,180px 180px;
  background-position:inherit;
}
.intro-stock-top { top:0; transform-origin:center bottom; transform:rotateX(-179deg); z-index:2; }
.intro-stock-bottom { bottom:0; }
.intro-half-left .intro-stock-top { background-position:left top; }
.intro-half-left .intro-stock-bottom { background-position:left bottom; }
.intro-half-right .intro-stock-top { background-position:right top; }
.intro-half-right .intro-stock-bottom { background-position:right bottom; }
.intro-stock::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,#48371515,transparent 8%,transparent 94%,#fff8d82b),
    linear-gradient(0deg,#4b351c24,transparent 7%,transparent 97%,#fff9da45);
}
.intro-running .intro-paper-motion { animation:intro-sheet-centre 1350ms cubic-bezier(.22,.7,.2,1) both; }
.intro-running .intro-half-left { animation:intro-unfold-side 1050ms 240ms cubic-bezier(.22,.65,.22,1) both; }
.intro-running .intro-stock-top { animation:intro-unfold-top 850ms 80ms cubic-bezier(.24,.62,.2,1) both; }
.intro-running .intro-folds { animation:intro-folds-away 180ms 1250ms linear both; }
#archive-intro .intro-card.world-frame {
  position:absolute; inset:0; width:100%; height:100%; min-height:0; margin:0;
  transform:none; opacity:0; pointer-events:none;
}
.intro-running .intro-card { animation:intro-paper-face 220ms 1110ms ease-out both; }
.intro-card .world-index { opacity:0; }
.intro-card .intro-char { opacity:0; white-space:pre; }
.intro-typing .intro-char {
  animation:intro-type-letter 1ms linear both;
  animation-delay:calc(var(--intro-character) * 45ms);
}
.intro-card h1 em { position:relative; display:inline-block; }
.intro-card .intro-signature-fallback { opacity:0; }
.intro-card .intro-signature {
  position:absolute; width:104%; height:112%; left:-3%; top:-4%; overflow:visible;
}
.intro-card .intro-ink-stroke { stroke-dasharray:1; stroke-dashoffset:1; opacity:0; }
.intro-writing .intro-ink-stroke {
  animation:intro-write-ink var(--ink-duration,100ms) var(--ink-delay,0ms) linear both;
}
.intro-writing .intro-signature-fallback:not(.has-vector) { animation:intro-fallback-ink 1300ms ease-out both; }
.intro-index-ready .intro-card .world-index { animation:intro-index-settle 450ms ease-out both; }
.intro-complete .intro-paper-motion { animation:none; transform:none; transform-style:flat; }
.intro-complete .intro-folds { display:none; }
#archive-intro.intro-complete .intro-card.world-frame { animation:none; opacity:1; }
.intro-complete .intro-char,
.intro-complete .intro-card .world-index { animation:none; opacity:1; translate:none; }
.intro-complete .intro-ink-stroke { animation:none; stroke-dashoffset:0; opacity:1; }
.intro-complete .intro-signature-fallback:not(.has-vector) { animation:none; opacity:1; clip-path:none; }
html.intro-entering { overflow:auto; }
html.intro-entering #archive-intro { background:transparent; }
.intro-entering .intro-backdrop { animation:intro-backdrop-away 700ms ease both; }
.intro-entering .intro-card { animation:intro-card-handoff 700ms ease both!important; }
@keyframes intro-sheet-centre {
  from { transform:translate(-25%,-25%) rotate(-5deg); }
  75% { transform:translate(0,0) rotate(.7deg); }
  to { transform:none; }
}
@keyframes intro-unfold-side {
  0% { transform:rotateY(179deg); filter:brightness(.74); }
  72% { transform:rotateY(-5deg); filter:brightness(1.02); }
  100% { transform:rotateY(0); filter:none; }
}
@keyframes intro-unfold-top {
  0% { transform:rotateX(-179deg); filter:brightness(.7); }
  75% { transform:rotateX(4deg); filter:brightness(1.02); }
  100% { transform:rotateX(0); filter:none; }
}
@keyframes intro-folds-away { to { opacity:0; visibility:hidden; } }
@keyframes intro-paper-face { to { opacity:1; } }
@keyframes intro-type-letter { to { opacity:1; } }
@keyframes intro-write-ink {
  0% { stroke-dashoffset:1; opacity:0; }
  1% { opacity:1; }
  100% { stroke-dashoffset:0; opacity:1; }
}
@keyframes intro-fallback-ink { from { opacity:1; clip-path:inset(0 100% 0 0); } to { opacity:1; clip-path:inset(0 -4% 0 -4%); } }
@keyframes intro-index-settle { from { opacity:0; translate:0 5px; } to { opacity:1; translate:none; } }
@keyframes intro-backdrop-away { to { opacity:0; } }
@keyframes intro-card-handoff { 0%,55% { opacity:1; } 100% { opacity:0; } }
.intro-loading .floating-photo { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) {
  .intro-paper-motion { transform:none!important; animation:none!important; }
  .intro-folds { display:none; }
  #archive-intro .intro-card.world-frame,
  .intro-card .intro-char,.intro-card .world-index,.intro-card .intro-signature-fallback { opacity:1; animation:none; }
  .intro-card .intro-signature { display:none; }
  .intro-entering .intro-card,.intro-entering .intro-backdrop { animation:none!important; opacity:0; }
}