/* Finite LibraHub signature reveal shared by website, login and installed app entry. */
html.signature-prepaint,
html.signature-prepaint body {
  background: #080c18;
}

html.signature-prepaint body {
  visibility: hidden;
}

html.signature-prepaint .signature-reveal {
  display: grid;
  visibility: visible;
  place-items: center;
}

.signature-reveal {
  --signature-ready: 1;
  --signature-elapsed: 0ms;
  --signature-brand: #8176ff;
  --signature-ink: #f7f7ff;
  --signature-muted: #aab3cc;
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  color: var(--signature-ink);
  background-color: #080c18;
  background:
    radial-gradient(circle at 50% 43%, rgba(129, 118, 255, .21), transparent 28%),
    radial-gradient(circle at 70% 18%, rgba(53, 217, 255, .08), transparent 22%),
    linear-gradient(150deg, #050811 0%, #090d19 50%, #080b16 100%);
  font-family: "Manrope", "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  opacity: 1;
  transition: opacity 170ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity;
  transform: translateZ(0);
}

.signature-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 28%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 28%, transparent 72%);
}

.signature-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .025) 48%, transparent 70%);
  transform: translate3d(-55%, 0, 0);
  animation: signature-surface-sweep 1200ms 180ms cubic-bezier(.22, 1, .36, 1) both;
}

.signature-reveal.is-active {
  display: grid;
  place-items: center;
}

.signature-reveal.is-leaving {
  opacity: 0;
}

/* Student PWA cold launches use a lighter composition so the dashboard can
   paint behind the short reveal without GPU-heavy rings/grid causing flicker. */
.signature-reveal[data-reveal-role="student"]::before {
  display: none;
}
.signature-reveal[data-reveal-role="student"] .signature-reveal__ring--outer {
  display: none;
}
.signature-reveal[data-reveal-role="student"] .signature-reveal__halo {
  opacity: .72;
  filter: none;
}
.signature-reveal[data-reveal-role="student"] .signature-reveal__ink {
  filter: none;
}

.signature-reveal__atmosphere {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.signature-reveal__halo {
  position: absolute;
  width: min(760px, 138vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(129, 118, 255, .24) 0%,
    rgba(129, 118, 255, .09) 34%,
    transparent 68%
  );
  opacity: .95;
  transform: translateY(-4%) scale(.78);
  animation: signature-halo 1100ms calc(40ms - var(--signature-elapsed)) cubic-bezier(.22, 1, .36, 1) both;
}

.signature-reveal__ring {
  position: absolute;
  border: 1px solid rgba(129, 118, 255, .21);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.72);
  animation: signature-ring 920ms cubic-bezier(.22, 1, .36, 1) both;
}

.signature-reveal__ring--outer {
  width: min(560px, 108vw);
  aspect-ratio: 1;
  animation-delay: calc(80ms - var(--signature-elapsed));
}

.signature-reveal__ring--inner {
  width: min(390px, 76vw);
  aspect-ratio: 1;
  border-color: rgba(255, 255, 255, .07);
  animation-delay: calc(150ms - var(--signature-elapsed));
}

.signature-reveal__beam {
  position: absolute;
  width: min(680px, 128vw);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(129, 118, 255, .38),
    rgba(255, 255, 255, .42),
    rgba(129, 118, 255, .38),
    transparent
  );
  opacity: 0;
  transform: scaleX(.18);
  animation: signature-beam 900ms calc(500ms - var(--signature-elapsed)) cubic-bezier(.22, 1, .36, 1) both;
}

.signature-reveal__core {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(91vw, 620px);
  padding: 28px 0 36px;
}

.signature-reveal__eyebrow {
  color: #929db6;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .28em;
  line-height: 1.6;
  text-transform: uppercase;
  animation: signature-copy-in 520ms calc(90ms - var(--signature-elapsed)) cubic-bezier(.22, 1, .36, 1) both;
}

.signature-reveal__signature {
  position: relative;
  width: 100%;
  margin: 22px 0 6px;
  padding-bottom: 23px;
  perspective: 900px;
}

.signature-reveal__wordmark {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  color: var(--signature-ink);
  font-size: clamp(46px, 12vw, 92px);
  font-weight: 780;
  letter-spacing: -.065em;
  line-height: 1.04;
  white-space: nowrap;
  text-rendering: geometricPrecision;
}

.signature-reveal__letter {
  --letter-delay: 150ms;
  display: inline-block;
  transform-origin: 50% 82%;
  will-change: transform, opacity;
  animation: signature-letter-in 680ms calc(var(--letter-delay) - var(--signature-elapsed)) cubic-bezier(.16, 1, .3, 1) both;
}
.signature-reveal__letter:nth-child(2) { --letter-delay: 204ms; }
.signature-reveal__letter:nth-child(3) { --letter-delay: 258ms; }
.signature-reveal__letter:nth-child(4) { --letter-delay: 312ms; }
.signature-reveal__letter:nth-child(5) { --letter-delay: 366ms; }
.signature-reveal__letter:nth-child(6) { --letter-delay: 420ms; }
.signature-reveal__letter:nth-child(7) { --letter-delay: 474ms; }
.signature-reveal__letter:nth-child(8) { --letter-delay: 528ms; }

.signature-reveal__letter--accent {
  color: #b8b0ff;
  text-shadow: 0 0 34px rgba(129, 118, 255, .24);
}

.signature-reveal__ink {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 43px;
  overflow: visible;
  stroke: #aaa0ff;
  stroke-width: 1.45;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(129, 118, 255, .28));
}

.signature-reveal__ink path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: signature-draw 680ms calc(520ms - var(--signature-elapsed)) cubic-bezier(.22, 1, .36, 1) both;
}

.signature-reveal__tagline {
  margin-top: 10px;
  color: #c4cbda;
  font-size: 13px;
  font-weight: 520;
  line-height: 1.65;
  letter-spacing: .012em;
  animation: signature-copy-in 500ms calc(650ms - var(--signature-elapsed)) cubic-bezier(.22, 1, .36, 1) both;
}

.signature-reveal__library {
  max-width: min(88vw, 520px);
  margin-top: 8px;
  overflow-wrap: anywhere;
  color: #7f8ca7;
  font-size: 10.5px;
  font-weight: 620;
  line-height: 1.55;
  letter-spacing: .025em;
  animation: signature-copy-in 500ms calc(760ms - var(--signature-elapsed)) cubic-bezier(.22, 1, .36, 1) both;
}

.signature-reveal__footer {
  position: absolute;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 20px;
  right: 20px;
  color: #68758f;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .22em;
  animation: signature-footer-in 460ms calc(840ms - var(--signature-elapsed)) ease-out both;
}

@keyframes signature-letter-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(.84) rotateX(58deg) rotateZ(-2deg);
  }
  58% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(1.015) rotateX(-3deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes signature-draw {
  from { stroke-dashoffset: 1; opacity: 0; }
  25% { opacity: 1; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes signature-copy-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

@keyframes signature-footer-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

@keyframes signature-halo {
  from { opacity: 0; transform: translateY(-4%) scale(.72); }
  to { opacity: .95; transform: translateY(-4%) scale(1); }
}

@keyframes signature-ring {
  from { opacity: 0; transform: scale(.72); }
  45% { opacity: .45; }
  to { opacity: .11; transform: scale(1); }
}

@keyframes signature-beam {
  from { opacity: 0; transform: scaleX(.18); }
  45% { opacity: .8; }
  to { opacity: .18; transform: scaleX(1); }
}

@keyframes signature-surface-sweep {
  from { transform: translate3d(-55%, 0, 0); opacity: 0; }
  30% { opacity: 1; }
  to { transform: translate3d(55%, 0, 0); opacity: 0; }
}

@media (max-width: 560px) {
  .signature-reveal__core { width: min(94vw, 560px); }
  .signature-reveal__wordmark { font-size: clamp(44px, 15.5vw, 74px); letter-spacing: -.072em; }
  .signature-reveal__signature { margin-top: 18px; padding-bottom: 18px; }
  .signature-reveal__ink { left: 7%; width: 86%; height: 36px; }
  .signature-reveal__ring--outer { width: 118vw; }
  .signature-reveal__ring--inner { width: 82vw; }
}

@media (max-height: 520px) {
  .signature-reveal__core { padding-block: 12px 18px; }
  .signature-reveal__signature { margin: 10px 0 2px; padding-bottom: 12px; }
  .signature-reveal__wordmark { font-size: clamp(42px, 11vw, 64px); }
  .signature-reveal__ink { height: 28px; }
  .signature-reveal__tagline { margin-top: 3px; }
  .signature-reveal__library { margin-top: 3px; }
  .signature-reveal__footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .signature-reveal,
  .signature-reveal *,
  .signature-reveal *::before,
  .signature-reveal *::after {
    animation: none !important;
    transition-duration: 90ms !important;
    filter: none !important;
    transform: none !important;
  }

  .signature-reveal__ring { opacity: .1; }
  .signature-reveal__halo { opacity: .75; }
  .signature-reveal__beam { opacity: .14; }
  .signature-reveal__ink path { stroke-dashoffset: 0; opacity: 1; }
}

/* Finish the owner's first-launch signature before it delays dashboard access. */
.signature-reveal[data-reveal-role="owner"] .signature-reveal__atmosphere {
  animation-duration: 600ms;
}
.signature-reveal[data-reveal-role="owner"] .signature-reveal__halo,
.signature-reveal[data-reveal-role="owner"] .signature-reveal__ring {
  animation-duration: 550ms;
}
.signature-reveal[data-reveal-role="owner"] .signature-reveal__beam {
  animation-duration: 380ms;
  animation-delay: calc(270ms - var(--signature-elapsed));
}
.signature-reveal[data-reveal-role="owner"] .signature-reveal__letter {
  animation-duration: 350ms;
  --letter-delay: 90ms;
}
.signature-reveal[data-reveal-role="owner"] .signature-reveal__letter:nth-child(2) { --letter-delay: 120ms; }
.signature-reveal[data-reveal-role="owner"] .signature-reveal__letter:nth-child(3) { --letter-delay: 150ms; }
.signature-reveal[data-reveal-role="owner"] .signature-reveal__letter:nth-child(4) { --letter-delay: 180ms; }
.signature-reveal[data-reveal-role="owner"] .signature-reveal__letter:nth-child(5) { --letter-delay: 210ms; }
.signature-reveal[data-reveal-role="owner"] .signature-reveal__letter:nth-child(6) { --letter-delay: 240ms; }
.signature-reveal[data-reveal-role="owner"] .signature-reveal__letter:nth-child(7) { --letter-delay: 270ms; }
.signature-reveal[data-reveal-role="owner"] .signature-reveal__letter:nth-child(8) { --letter-delay: 300ms; }
.signature-reveal[data-reveal-role="owner"] .signature-reveal__ink path {
  animation-duration: 380ms;
  animation-delay: calc(260ms - var(--signature-elapsed));
}
.signature-reveal[data-reveal-role="owner"] .signature-reveal__tagline {
  animation-duration: 250ms;
  animation-delay: calc(340ms - var(--signature-elapsed));
}
.signature-reveal[data-reveal-role="owner"] .signature-reveal__library {
  animation-duration: 250ms;
  animation-delay: calc(410ms - var(--signature-elapsed));
}
.signature-reveal[data-reveal-role="owner"] .signature-reveal__footer {
  animation-duration: 220ms;
  animation-delay: calc(470ms - var(--signature-elapsed));
}