/* AI Video Blackbook motion utilities.
   Keep motion quiet: reveal structure, soften scroll edges, never distract from reading. */

.bb-scroll-fade {
  -webkit-mask-image: none;
  mask-image: none;
}

.bb-progressive-blur {
  position: relative;
}

.bb-progressive-blur::before,
.bb-progressive-blur::after {
  content: none;
}

.bb-reveal-on-load > * {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  animation: bb-text-reveal 760ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.bb-reveal-on-load > *:nth-child(1) {
  animation-delay: 80ms;
}

.bb-reveal-on-load > *:nth-child(2) {
  animation-delay: 180ms;
}

.bb-reveal-on-load > *:nth-child(3) {
  animation-delay: 300ms;
}

.bb-reveal-on-load > *:nth-child(4) {
  animation-delay: 420ms;
}

.topbar .brand-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  width: max-content;
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease, opacity 160ms ease;
}

.topbar .brand-link:hover,
.topbar .brand-link:focus-visible {
  color: rgba(255, 255, 255, 0.9);
  outline: none;
}

.bb-page-back {
  position: fixed;
  left: var(--bb-page-inset-x, var(--page-x, 76px));
  top: auto;
  bottom: var(--bb-next-bottom, var(--button-bottom, calc(var(--bb-layout-bottom, 52px) + var(--bb-layout-bottom-rail-gap, 20px))));
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.3);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.bb-page-back::before {
  content: "\2190";
  margin-right: 10px;
  color: var(--bb-color-accent, #ff0044);
  font-weight: 900;
}

.bb-page-back:hover,
.bb-page-back:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 0, 68, 0.62);
  background: rgba(255, 0, 68, 0.08);
  color: #fff;
  outline: none;
}

@keyframes bb-text-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb-reveal-on-load > * {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}