@property --ink-frame {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.br-desktop-nav a[data-home-handoff] {
  visibility: hidden;
  opacity: 0;
  transition: color 160ms ease,
              var(--handoff-property, opacity) 900ms cubic-bezier(0.35, 0.2, 0.65, 0.8),
              visibility 0s linear 900ms;
}

.br-desktop-nav a[data-home-handoff]:not([inert]) {
  --ink-frame: 59;
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.br-desktop-nav a[data-home-handoff]:focus-visible {
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  .br-desktop-nav a[data-home-handoff][data-ink-ready] {
    --handoff-property: --ink-frame;
    opacity: 1;
    /* The mask is 60 alpha frames stacked vertically. */
    mask: url("img/glass/ink-bloom-mask.png") 0 calc(var(--ink-frame) * 100% / 59) / 100% 6000% no-repeat;
  }

  .br-desktop-nav a[data-home-handoff][data-ink-ready]:focus-visible {
    mask-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .br-desktop-nav a[data-home-handoff] {
    transition: none;
  }
}