/* Shared by the initial HTML shell and React's page loader. The original F
   stays still; only its separate lower line moves. */
.fiber-logo-loader { position: relative; display: block; width: 96px; height: 96px; flex: none; }
.fiber-logo-loader img { display: block; width: 100%; height: 100%; clip-path: inset(0 0 12% 0); }
.fiber-logo-loader .fiber-wand-track {
  position: absolute; left: 10.25%; top: 88.75%; width: 58.4%; height: 5%;
  overflow: hidden; background: #86c5ec33;
  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 100%, 0 100%);
}
.fiber-wand-wipe {
  display: block; width: 55%; height: 100%; background: #86c5ec;
  animation: fiber-wand-wipe 1.6s cubic-bezier(.65, 0, .35, 1) infinite alternate;
}
@keyframes fiber-wand-wipe {
  from { transform: translateX(-110%); }
  to { transform: translateX(190%); }
}
#fiber-boot {
  position: fixed; inset: 0; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: #f8fbfd; color: #526575;
  font: 600 14px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}
#fiber-boot .fiber-logo-loader { display: none; }
html[data-fiber-boot="fiber"] #fiber-boot .fiber-logo-loader { display: block; }
.dark #fiber-boot { background: #111b24; color: #b5c7d6; }
@media (prefers-reduced-motion: reduce) {
  .fiber-wand-wipe { width: 100%; animation: none; }
}