/* SpaceEx — finishing: the small motions that make the interface feel made
   rather than assembled. Loads last. Everything here is decoration; nothing
   breaks if it is removed. */

/* A slow breath of light on the mark. */
@keyframes brand-glow{
  0%,100%{filter:drop-shadow(0 0 3px rgba(242,198,124,.12))}
  50%{filter:drop-shadow(0 0 10px rgba(242,198,124,.32))}
}
.brand-glyph{animation:brand-glow 5s ease-in-out infinite;transition:transform .4s var(--spring)}
.brand:hover .brand-glyph{transform:rotate(-10deg) scale(1.08)}

/* The fact panel arrives rather than appears when the selection changes. */
.panel.is-fresh .panel-head,.panel.is-fresh .panel-body > *{animation:rise .5s var(--ease) both}
.panel.is-fresh .panel-body > :nth-child(2){animation-delay:.04s}
.panel.is-fresh .panel-body > :nth-child(3){animation-delay:.08s}
.panel.is-fresh .panel-body > :nth-child(4){animation-delay:.12s}
.panel.is-fresh .panel-body > :nth-child(5){animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

/* A thin ring turns round the selected world in the rail. */
.world[aria-pressed="true"] .world-dot::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1px solid transparent;border-top-color:var(--accent);border-right-color:rgba(242,198,124,.25);
  animation:orbit-spin 3s linear infinite;
}
@keyframes orbit-spin{to{transform:rotate(360deg)}}

/* The primary button carries a slow sheen, so the one thing to press first
   is the one thing on the page that moves on its own. */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);animation:sheen 5.5s ease-in-out 2s infinite;
}
@keyframes sheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* The loader bar's shimmer. */
.loader-bar span{position:relative;overflow:hidden}
.loader-bar span::after{
  content:'';position:absolute;top:0;left:-50%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:shimmer 1.8s ease-in-out infinite;
}
@keyframes shimmer{to{left:150%}}
.loader-word{font-family:var(--font);font-weight:600}
.loader-word b{color:var(--accent);font-weight:600}
.loader-tag{font-family:var(--mono)}

@media (prefers-reduced-motion:reduce){
  .brand-glyph,.btn-primary::after,.world[aria-pressed="true"] .world-dot::after{animation:none}
}