/* Farfisa prologue — an illuminated threshold in the Polar Signal palette. */
html:has(.fables-prologue:not(.is-complete)) { overflow: hidden; }
.fables-prologue {
  --prologue-ink: #070b18;
  --prologue-white: #e5eafa;
  --prologue-muted: #a1acc6;
  --prologue-blue: #939bff;
  --prologue-ice: #9cd5e6;
  --prologue-edge: clamp(24px, 4.4vw, 84px);
  color-scheme: dark;
  display: grid;
  place-items: center;
  background: var(--prologue-ink);
  color: var(--prologue-white);
  isolation: isolate;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  clip-path: none;
  transition: opacity .6s ease, visibility 0s;
}
.fables-prologue::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 72%, #17324447, transparent 53%),
    radial-gradient(ellipse at 82% 34%, #34327330, transparent 51%),
    radial-gradient(ellipse at 50% 110%, #2c396345, transparent 53%);
  filter: none;
  transform: none;
  opacity: 1;
}
.fables-prologue::after { display: none; }
.prologue-masthead {
  position: absolute;
  top: clamp(24px, 4.6vh, 54px);
  inset-inline: var(--prologue-edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  z-index: 4;
  animation: prologue-arrive 1s .1s both;
}
.prologue-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e1e5f5;
  font: 500 32px/1 'Louize', Georgia, serif;
}
.prologue-brand img { width: 40px; height: 29px; object-fit: contain; opacity: .93; }
.prologue-world { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.prologue-aura {
  position: absolute;
  width: min(1440px, 150vw);
  aspect-ratio: 1;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at 36% 63%, #58addb10, transparent 35%),
    radial-gradient(ellipse at 67% 34%, #817cf114, transparent 34%),
    radial-gradient(ellipse, #090f23 12%, transparent 52%);
}
.prologue-depth {
  position: absolute;
  inset: 0;
  transform: translate(var(--portal-x, 0px), var(--portal-y, 0px));
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
}
.prologue-portal {
  position: absolute;
  width: min(1280px, 120vw, 132svh);
  aspect-ratio: 1;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%) scale(calc(1 + var(--scroll-progress, 0) * .25));
  transition: transform 1s cubic-bezier(.22, .65, .2, 1), opacity .9s;
}
.prologue-halo {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 43%, #697bff08 47%, #8799f91a 51%, #6d8ce316 54%, transparent 63%);
  animation: prologue-breathe 9s ease-in-out infinite alternate;
}
.prologue-orbit, .prologue-flow { position: absolute; inset: 0; }
.prologue-orbit { animation: prologue-form 1.9s cubic-bezier(.16, 1, .3, 1) both; }
.prologue-flow { animation: prologue-form 2.3s .15s cubic-bezier(.16, 1, .3, 1) both; }
.prologue-dust, .prologue-filaments { display: block; width: 100%; height: 100%; }
.prologue-dust { animation: prologue-orbit 110s linear infinite; }
.prologue-filaments { animation: prologue-counter-orbit 85s linear infinite; }
.prologue-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(900px, calc(100% - 40px));
  margin-top: -1.5svh;
  transition: opacity .4s ease, transform .65s cubic-bezier(.4, 0, .2, 1);
}
.prologue-seal {
  display: grid;
  place-items: center;
  width: 50px;
  height: 42px;
  margin-bottom: 20px;
  position: relative;
  animation: prologue-content-in 1.3s .2s both;
}
.prologue-seal::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse, #879bfd20, transparent 66%);
}
.prologue-seal img { width: 43px; height: 33px; object-fit: contain; opacity: .78; }
.prologue-eyebrow {
  margin: 0 0 clamp(23px, 3.1vh, 36px);
  color: #99afd6;
  font: 500 9px/1.6 'Aeonik', sans-serif;
  letter-spacing: .24em;
  animation: prologue-content-in 1.2s .3s both;
}
.prologue-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0 0 .08em;
  color: var(--prologue-white);
  font: 500 clamp(56px, 6.5vw, 112px)/.92 'Louize', Georgia, serif;
  letter-spacing: -.038em;
  overflow: visible;
  text-shadow: none;
}
.prologue-title span, .prologue-title em {
  display: block;
  padding: .035em .14em .12em;
  overflow: visible;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: prologue-content-in 1.4s .42s cubic-bezier(.16, 1, .3, 1) both;
}
.prologue-title span {
  /* Louize's lowercase g has a deep descender. Give the glyph a taller
     paint box, then offset that extra room so the two title lines keep
     their original visual spacing. */
  line-height: 1.04;
  padding-bottom: .23em;
  margin-bottom: -.12em;
  background-image: linear-gradient(112deg, #edf0fc 9%, #dbe2f6 51%, #aebee1 100%);
}
.prologue-title em {
  margin-top: -.015em;
  font-style: normal;
  font-size: 1.28em;
  letter-spacing: -.043em;
  background-image: linear-gradient(108deg, #b5b5ed 2%, #c0c7fa 22%, #8d9bf2 47%, #93bcef 73%, #a0d7df 98%);
  animation-delay: .54s;
}
.prologue-contract {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: min(520px, calc(100vw - 40px));
  min-height: 46px;
  margin: 14px 0 28px;
  padding: 8px 10px 8px 15px;
  border: 1px solid rgba(154, 177, 255, .2);
  border-radius: 14px;
  color: #c8d4f0;
  background: linear-gradient(110deg, rgba(40, 54, 98, .52), rgba(23, 31, 65, .38));
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 10px 35px rgba(3, 10, 32, .18);
  font-family: 'Aeonik', sans-serif;
  cursor: pointer;
  backdrop-filter: blur(10px);
  animation: prologue-content-in 1.15s .68s both;
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}
.prologue-contract:hover {
  border-color: rgba(166, 188, 255, .4);
  background: linear-gradient(110deg, rgba(49, 66, 116, .64), rgba(29, 39, 78, .48));
  transform: translateY(-1px);
}
.prologue-contract-label {
  color: #8294bc;
  font: 600 9px/1 'Aeonik', sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.prologue-contract code {
  min-width: 0;
  overflow: hidden;
  color: #dce5fb;
  font: 500 12px/1.2 ui-monospace, 'SFMono-Regular', Consolas, monospace;
  letter-spacing: .025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prologue-contract-copy {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(164, 187, 255, .17);
  border-radius: 9px;
  color: #aabdf0;
  background: rgba(143, 166, 246, .07);
}
.prologue-contract-copy svg { width: 15px; height: 15px; }
.prologue-contract-status {
  width: 42px;
  color: #8fa6dc;
  font: 600 10px/1 'Aeonik', sans-serif;
  text-align: left;
}
.prologue-contract.is-copied {
  border-color: rgba(104, 220, 208, .42);
  background: linear-gradient(110deg, rgba(35, 79, 94, .56), rgba(28, 44, 82, .44));
}
.prologue-contract.is-copied .prologue-contract-copy,
.prologue-contract.is-copied .prologue-contract-status { color: #83e0d7; }
.prologue-action { animation: prologue-content-in 1.1s .8s both; }
.fables-prologue .prologue-enter {
  position: relative;
  inset: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-width: 174px;
  min-height: 53px;
  padding: 7px 8px 7px 24px;
  border-radius: 999px;
  border: 1px solid #b1bfff4d;
  color: #e4eafd;
  background: linear-gradient(112deg, #5967ad59, #39447645 68%);
  box-shadow: inset 0 1px #ffffff12, 0 0 28px #6b84ef0b;
  backdrop-filter: none;
  font: 500 12px/1 'Aeonik', sans-serif;
  letter-spacing: .025em;
  cursor: pointer;
  transition: background .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.fables-prologue .prologue-enter span { color: inherit; }
.prologue-enter-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #b3c7ff0e;
  border: 1px solid #bdcfff1a;
}
.prologue-enter svg { width: 18px; height: 18px; transition: transform .3s; }
.fables-prologue .prologue-enter:hover {
  border-color: #b8c6ff9c;
  background: linear-gradient(112deg, #6b7cd180, #44538870 68%);
  box-shadow: inset 0 1px #ffffff20, 0 0 34px #7d90ff20;
  transform: translateY(-2px);
}
.prologue-enter:hover svg { transform: translateX(2px); }
.fables-prologue :is(a, button):focus-visible { outline: 2px solid var(--prologue-ice); outline-offset: 6px; }
.prologue-footer {
  position: absolute;
  bottom: clamp(22px, 4vh, 42px);
  inset-inline: var(--prologue-edge);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font: 400 11px/1.5 'Aeonik', sans-serif;
  animation: prologue-arrive 1.5s .9s both;
}
.prologue-footer a { display: inline-flex; align-items: center; gap: 5px; color: #9eacc6; text-decoration: none; padding: 10px 0; transition: color .2s; }
.prologue-xmark {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-left: 1px;
  border: 1px solid rgba(135, 157, 255, .25);
  border-radius: 5px;
  color: #92a9ff;
  background: linear-gradient(145deg, rgba(102, 126, 232, .16), rgba(82, 205, 232, .07));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 0 13px rgba(111,134,255,.12);
}
.prologue-xmark svg { width: 8px; height: 8px; fill: currentColor; }
.prologue-footer-arrow { margin-left: 0; color: #a8b5ee; }
.prologue-footer a:hover { color: #e4eaff; }
.prologue-footer a:hover .prologue-xmark { color: #c4d0ff; border-color: rgba(163,180,255,.46); }
.prologue-signature { color: #8290b0; font: 500 18px/1.2 'Louize', Georgia, serif; }
.fables-prologue.is-entering .prologue-content { opacity: 0; transform: scale(.94) translateY(-10px); }
.fables-prologue.is-entering .prologue-portal { transform: translate(-50%, -50%) scale(1.85); opacity: .18; }
.fables-prologue.is-entering :is(.prologue-masthead, .prologue-footer) { opacity: 0; transition: opacity .35s; animation: none; }
.fables-prologue.is-complete {
  clip-path: none;
  filter: none;
  transform: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .55s ease, visibility 0s .55s;
}
@keyframes prologue-orbit { to { transform: rotate(360deg); } }
@keyframes prologue-counter-orbit { from { transform: rotate(-12deg); } to { transform: rotate(-372deg); } }
@keyframes prologue-form { from { opacity: 0; transform: scale(.8) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes prologue-breathe { from { opacity: .4; transform: scale(.98); } to { opacity: .9; transform: scale(1.025); } }
@keyframes prologue-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes prologue-content-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
  .prologue-masthead { top: 25px; }
  .prologue-brand { font-size: 27px; gap: 8px; }
  .prologue-brand img { width: 33px; height: 25px; }
  .prologue-portal { width: min(156vw, 112svh); }
  .prologue-content { width: calc(100% - 28px); margin-top: -1svh; }
  .prologue-seal { margin-bottom: 13px; }
  .prologue-title { font-size: clamp(45px, 10.7vw, 72px); }
  .prologue-title em { font-size: 1.3em; }
  .prologue-eyebrow { font-size: 8px; letter-spacing: .17em; margin-bottom: 25px; }
  .prologue-contract { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; width: min(430px, calc(100vw - 34px)); margin: 15px 0 25px; padding-left: 12px; }
  .prologue-contract-label { font-size: 8px; }
  .prologue-contract code { font-size: 11px; }
  .prologue-contract-status { display: none; }
  .prologue-footer { bottom: 20px; font-size: 10px; gap: 16px; }
  .prologue-signature { font-size: 15px; }
}
@media (max-height: 760px) and (min-width: 701px) {
  .prologue-seal { margin-bottom: 8px; height: 30px; }
  .prologue-seal img { width: 33px; height: 25px; }
  .prologue-title { font-size: clamp(54px, 11.5vh, 87px); }
  .prologue-eyebrow { margin-bottom: 22px; }
  .prologue-contract { min-height: 40px; margin: 10px 0 20px; }
}
@media (max-height: 580px) {
  .prologue-seal { display: none; }
  .prologue-masthead { top: 16px; }
  .prologue-content { margin-top: 0; }
  .prologue-title { font-size: clamp(36px, min(10.7vw, 10vh), 58px); }
  .prologue-eyebrow { margin-bottom: 14px; font-size: 8px; }
  .prologue-contract { min-height: 38px; margin: 4px 0 14px; padding-block: 5px; }
  .fables-prologue .prologue-enter { min-height: 44px; padding-block: 3px; }
  .prologue-footer { bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .fables-prologue *, .fables-prologue *::before, .fables-prologue *::after { animation: none !important; transition: none !important; }
}