/* floating icons — hand-placed doors between scarlett's screen and the
   veil (jameel, 2026-10-30). one shared shape and motion for both: an
   84px circle, a thin ring, a soft shadow, a paper label beneath it, and
   a slow drift — present, never loud. the personal page anchors its veil
   icon bottom-right; the veil page anchors its scarlett icon
   bottom-left. under reduced motion both simply stand still. */
.float-icon {
  position: fixed;
  bottom: max(1.4rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: #17140f;
  animation: floatDrift 7s ease-in-out infinite;
  transition: opacity 0.9s ease;
}
.float-icon img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(23, 20, 15, 0.55);
  box-shadow: 0 10px 28px rgba(23, 20, 15, 0.28);
  background: #faf7f1;
}
.float-icon .float-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  background: rgba(255, 255, 255, 0.88);
  padding: 0.18rem 0.6rem 0.24rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(23, 20, 15, 0.14);
}
.float-icon:hover img, .float-icon:focus-visible img {
  box-shadow: 0 14px 34px rgba(23, 20, 15, 0.38);
}
.float-icon:focus-visible { outline: 1px solid #17140f; outline-offset: 4px; }
/* hidden means hidden (fix, 2026-10-30): the flex above would otherwise
   override the hidden attribute, leaving the veil's icon invisible yet
   present and tappable on the door and welcome screens — a tap in its
   corner opened the veil before scarlett ever stood. with this line the
   attribute rules again: no place on the page, no taps taken. */
.float-icon[hidden] { display: none; }
/* the veil's icon rides higher on scarlett's screen (jameel, 2026-10-30):
   at the very bottom it crowded her message box, so it hovers about a
   third of the way up from the bottom — then lowered by one icon's
   height (84px) at his word, to the perfect spot. her own icon on the
   veil page keeps the low corner. */
#veilFloat { bottom: calc(33.333vh - 84px); }
@keyframes floatDrift {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(-4px, -9px); }
  55% { transform: translate(3px, -4px); }
  80% { transform: translate(-2px, -11px); }
}
@media (prefers-reduced-motion: reduce) {
  .float-icon { animation: none; transition: none; }
}