/* Keep the page fully covered until the intro animation is finished. */
html.freedom-intro-pending body > :not(#freedom-intro) {
  visibility: hidden !important;
}

#freedom-intro {
  position: fixed;
  z-index: 99999;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 900px;
  overflow: hidden;
  pointer-events: none;
  color: #fff;
  background: #000;
}

#freedom-intro-word {
  backface-visibility: visible;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(32px, 10vw, 64px);
  font-weight: 900;
  letter-spacing: .02em;
  transform-style: preserve-3d;
}

#freedom-intro.playing #freedom-intro-word {
  animation: freedomFlip 1.8s cubic-bezier(.55, .05, .45, .95) both;
}

@keyframes freedomFlip {
  from { transform: rotateY(0); }
  to { transform: rotateY(1080deg); }
}

/* Animate only the page surface, never every direct child of body. */
body.freedom-content-ready > .app,
body.freedom-content-ready > #browser-auth:not(.hidden) {
  animation: freedomPageReveal .55s ease both !important;
}

@keyframes freedomPageReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}