/* Bubbles — logo mark and cursor trail. Transform/opacity only, so the GPU does it. */
.brand .mark { position: relative; overflow: hidden; isolation: isolate; }
.brand .mark::before, .brand .mark::after {
  content: ""; position: absolute; z-index: -1; left: 4px; top: 100%;
  width: 4px; height: 4px; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.7);
  box-shadow: 8px -6px 0 -1px rgba(255,255,255,.55), 15px 2px 0 0 rgba(255,255,255,.6);
  animation: mark-rise 3.4s linear infinite;
}
.brand .mark::after {
  left: 9px; width: 3px; height: 3px;
  box-shadow: 7px -9px 0 0 rgba(255,255,255,.5), -5px -3px 0 -1px rgba(255,255,255,.6);
  animation-duration: 4.1s; animation-delay: -2s;
}
@keyframes mark-rise { from { transform: translateY(0); } to { transform: translateY(-44px); } }

.bubble-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.bubble-layer i {
  position: absolute; left: 0; top: 0; border-radius: 50%; display: block;
  width: var(--s, 8px); height: var(--s, 8px);
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), color-mix(in srgb, var(--accent) 45%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
  transform: translate(var(--x), var(--y)) scale(.4);
  animation: cursor-rise 1s ease-out forwards;
}
@keyframes cursor-rise {
  0%   { transform: translate(var(--x), var(--y)) scale(.4); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) - var(--rise))) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .brand .mark::before, .brand .mark::after { animation: none; top: 6px; }
  .bubble-layer { display: none; }
}